:root{
    --bg:#0b1220;
    --card:#5464C1;
    --text:#eaf0ff;
    --muted:#b9c3e6;
    --border:rgba(255,255,255,.12);
    --shadow: 0 20px 60px rgba(0,0,0,.55);
    --teal:#1fd1c3;
    --teal2:#18b7ab;
    --danger:#ff5a7a;
  }
  .ig-box{
  max-width: 500px;
  margin: 0 auto;
  padding: 18px;
  background:#fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction: column;
  gap: 14px;
}

/* Input with icon */
.ig-input-wrap{
  position: relative;
}

.ig-input-wrap input{
  width: 100%;
  height: 50px;
  padding: 0 14px 0 46px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ig-input-wrap input::placeholder{
  color: var(--muted);
}

.ig-input-wrap input:focus{
  border-color: rgba(29,190,173,.55);
  box-shadow: 0 0 0 4px rgba(29,190,173,.15);
}

/* Instagram icon */
.ig-icon{
  position:absolute;
  top:55%;
  left:14px;
  transform: translateY(-50%);
  color:#9ca3af;
  pointer-events:none;
}

.ig-input-wrap input:focus + .ig-icon,
.ig-input-wrap input:not(:placeholder-shown) + .ig-icon{
  color: var(--teal2);
}

/* Button */
#ig-go{
  height: 52px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--teal), var(--teal2));
  color:#06201d;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .2px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 12px 30px rgba(29,190,173,.25);
}

#ig-go:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(29,190,173,.35);
}

#ig-go:active{
  transform: translateY(1px);
  box-shadow: 0 8px 20px rgba(29,190,173,.25);
}

/* Disabled state (optional) */
#ig-go:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
/* Minimal additions */
.viewer { max-width: 500px; margin: 0 auto; }
#ig-form { display:flex; gap:.5rem; justify-content:center; margin:18px 0; }
#ig-form input { padding:10px 50  px; border:1px solid #e3e3e3; border-radius:10px; min-width:280px; }
#ig-form button { padding:10px 16px; border:0; border-radius:10px; background:#1DBEAD; color:#fff; font-weight:600; cursor:pointer; }
.note { text-align:center; color:#666; font-size:.95rem; margin-bottom:10px; }
#error { display:none; background:#fff7f7; color:#a00; border:1px solid #f3d1d1; padding:10px 12px; border-radius:10px; margin:10px auto; max-width:500px; }
#loading { display:none; text-align:center; color:#555; }

.profile { display:flex; gap:16px; border:1px solid #eee; border-radius:16px; padding:16px; background:#fff; align-items:flex-start; }
.profile img { width:80px; height:80px; border-radius:50%; object-fit:cover; }
.pmeta .name { font-weight:700; font-size:1.1rem; }
.badge { display:inline-block; background:#f5f5f5; padding:4px 8px; border-radius:999px; font-size:.85rem; margin-right:6px; }

.grid { margin-top:16px; display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.card { border:1px solid #eee; border-radius:12px; background:#fff; overflow:hidden; }
.card .media { aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; background:#fafafa; }
.card img, .card video { max-width:100%; max-height:100%; }
.card .cap { padding:10px; font-size:.92rem; color:#333; white-space:pre-wrap; }

.actions { text-align:center; margin:14px 0 28px; }
#ig-more { display:none; padding:10px 16px; border:0; border-radius:10px; background:#1DBEAD; color:#fff; font-weight:600; cursor:pointer; }
#ig-more:disabled {
  background: #ccc;       /* gray background */
  color: #666;            /* dim text */
  cursor: not-allowed;    /* show forbidden cursor */
  opacity: 0.7;           /* slightly transparent */
}
#ig-more:not(:disabled):hover {
  background: #17a794; /* darker teal when hover */
}
#ig-go:disabled {
  background: #ccc;       /* gray background */
  color: #666;            /* dim text */
  cursor: not-allowed;    /* show forbidden cursor */
  opacity: 0.7;           /* slightly transparent */
}


/* Modal base */
  .modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
  }
  .modal a{ color: var(--teal); text-decoration: none; }
  .modal a:hover{ text-decoration: underline; }
  .modal.is-open{ display: block; }

  .modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
  }

  .modal__dialog{
    position: relative;
    width: min(560px, calc(100% - 32px));
    margin: 7vh auto 0;
    background: radial-gradient(1200px 400px at 20% 0%, rgba(31,209,195,.18), transparent 60%),
                var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: var(--shadow);
    animation: pop .16s ease-out;
  }

  @keyframes pop{
    from{ transform: translateY(10px) scale(.98); opacity: 0; }
    to{ transform: translateY(0) scale(1); opacity: 1; }
  }

  .modal__close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
  }

  .modal__title{
    margin: 4px 40px 6px 0;
    font-size: 26px;
    letter-spacing: .2px;
    color:white;
  }

  .modal__subtitle{
    margin: 0 0 14px 0;
    color: var(--muted);
    line-height: 1.45;
  }

  .form{ display: grid; gap: 10px; }

  .label{
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
  }

  .input{
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: white;
    outline: none;
  }
  .input:focus{
    border-color: rgba(31,209,195,.55);
    box-shadow: 0 0 0 4px rgba(31,209,195,.12);
  }

  .checkbox{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    user-select: none;
    margin-top: 2px;
  }
  .help{ color: var(--muted); font-size: 12px; }

  .modal__footer{
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
  }

  .msg{
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    min-height: 18px;
  }
  .msg.error{ color: var(--danger); }
  .btn-primary{
   background: linear-gradient(135deg, var(--teal), var(--teal2));
   border: 0;
   color: #06201d;
   font-weight: 700;
   padding: 12px 16px;
   border-radius: 12px;
   cursor: pointer;
   box-shadow: 0 10px 25px rgba(31, 209, 195, .18);
 }
 .btn-primary:active{ transform: translateY(1px); }
 .btn-block{ width: 100%; margin-top: 10px; }
 /* Full overlay (optional – remove if you want inline only) */
 .ig-loading{
   display:flex;
   justify-content:center;
   align-items:center;
   margin: 24px auto;
 }

 /* Box */
 .ig-loading-box{
   max-width: 500px;
   width: 100%;
   padding: 22px 18px;
   background:#fff;
   border-radius: 18px;
   text-align:center;
   box-shadow: 0 18px 45px rgba(0,0,0,.12);
   border: 2px solid transparent;
   background:
     linear-gradient(#fff, #fff) padding-box,
     linear-gradient(135deg,#5464C1,#dd2a7b,#8134af,#515bd4) border-box;
 }

 /* Spinner (SVG-like via CSS) */
 .ig-spinner{
   width: 46px;
   height: 46px;
   margin: 0 auto 12px;
   border-radius: 50%;
   border: 4px solid rgba(221,42,123,.2);
   border-top-color: #dd2a7b;
   animation: ig-spin 1s linear infinite;
 }

 /* Text */
 .ig-loading-text{
   font-size: 15px;
   font-weight: 800;
   color:#111827;
   letter-spacing:.2px;
 }

 @keyframes ig-spin{
   from{ transform: rotate(0deg); }
   to{ transform: rotate(360deg); }
 }
 .ig-collage{
   display:grid;
   grid-template-columns: repeat(2, 1fr);
   gap:6px;
 }
 .ig-tile{
   position:relative;
   width:100%;
   aspect-ratio: 1 / 1;
   overflow:hidden;
   border-radius:8px;
   background:#f3f3f3;
 }
 .ig-tile img, .ig-tile video{
   width:100%;
   height:100%;
   object-fit:cover;
   display:block;
 }
 .ig-more{
   position:absolute;
   inset:0;
   display:flex;
   align-items:center;
   justify-content:center;
   background:rgba(0,0,0,.45);
   color:#fff;
   font-weight:700;
   font-size:18px;
 }
 .ig-slider{ position:relative; }
 .ig-slider .ig-nav{
   position:absolute; top:50%; transform:translateY(-50%);
   width:34px; height:34px; border-radius:999px;
   border:0; background:rgba(0,0,0,.45); color:#fff;
   cursor:pointer; display:flex; align-items:center; justify-content:center;
 }
 .ig-slider .ig-nav.prev{ left:10px; }
 .ig-slider .ig-nav.next{ right:10px; }
 .ig-slider .ig-dots{
   position:absolute; left:0; right:0; bottom:10px;
   display:flex; gap:6px; justify-content:center;
 }
 .ig-slider .ig-dot{
   width:7px; height:7px; border-radius:99px;
   border:0; cursor:pointer;
   background:rgba(255,255,255,.5);
 }
 .ig-slider .ig-dot.on{ background:rgba(255,255,255,.95); }