/* Critical layout/style guard: keeps reference design even behind HTTPS proxies. */
html, body { min-height:100%; }
body { margin:0; overflow-x:hidden; }
.app-sidebar{
  width:250px!important; min-height:100vh!important; position:fixed!important; left:0!important; top:0!important; z-index:1040!important; color:#fff!important;
  background:radial-gradient(circle at 15% 75%, rgba(236,72,153,.45), transparent 22%), radial-gradient(circle at 85% 65%, rgba(59,130,246,.5), transparent 30%), linear-gradient(180deg,#10164a,#26328c)!important;
  box-shadow:8px 0 30px rgba(15,23,42,.08)!important; overflow:hidden;
}
.sidebar-inner{height:100vh!important;display:flex!important;flex-direction:column!important;padding:1.25rem!important;position:relative;z-index:1;}
.main-wrapper{margin-left:250px!important;min-height:100vh!important;}
.top-navbar{height:78px!important;background:transparent!important;}
.sidebar-nav .nav-link{color:#e8edff!important;border-radius:.85rem!important;padding:.8rem .95rem!important;margin-bottom:.35rem!important;font-weight:600!important;display:flex!important;align-items:center!important;gap:.85rem!important;}
.sidebar-nav .nav-link:hover,.sidebar-nav .nav-link.active{color:#fff!important;background:rgba(255,255,255,.15)!important;}
.brand-logo{width:44px!important;height:44px!important;border-radius:14px!important;display:grid!important;place-items:center!important;font-weight:800!important;background:linear-gradient(135deg,#60a5fa,#2dd4bf)!important;color:#fff!important;}
.sidebar-profile{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:1rem!important;}
.table-wrap{width:100%;overflow-x:auto;overflow-y:visible;}
.table{width:100%;min-width:1550px;font-size:.8rem;}
.table thead th{white-space:nowrap;}
.creative-thumb{width:96px!important;height:54px!important;object-fit:cover!important;border-radius:.7rem!important;border:1px solid #e7edf6!important;display:block!important;}
.game-icon{width:46px!important;height:46px!important;object-fit:cover!important;border-radius:.7rem!important;display:block!important;}
.media-fallback{width:96px!important;height:54px!important;}
@media(max-width:991px){.app-sidebar{transform:translateX(-100%);transition:.25s}.app-sidebar.show{transform:translateX(0)}.main-wrapper{margin-left:0!important}}

    :root{
      --app-bg:#f5f7fb;
      --sidebar:#10164a;
      --sidebar-2:#26328c;
      --primary:#3b82f6;
      --success:#16a34a;
      --danger:#ef4444;
      --warning:#f59e0b;
      --purple:#8b5cf6;
      --muted:#64748b;
      --border:#e7edf6;
      --dark:#0f172a;
    }

    body{
      font-family:"Inter","Noto Sans KR",sans-serif;
      background:var(--app-bg);
      color:var(--dark);
      font-size:14px;
    }

    .app-sidebar{
      width:250px;
      min-height:100vh;
      position:fixed;
      left:0;
      top:0;
      z-index:1040;
      color:#fff;
      background:
        radial-gradient(circle at 15% 75%, rgba(236,72,153,.45), transparent 22%),
        radial-gradient(circle at 85% 65%, rgba(59,130,246,.5), transparent 30%),
        linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
      box-shadow:8px 0 30px rgba(15,23,42,.08);
    }

    .app-sidebar::after{
      content:"";
      position:absolute;
      left:-70px;
      bottom:80px;
      width:380px;
      height:170px;
      border-radius:50%;
      background:linear-gradient(135deg,rgba(59,130,246,.35),rgba(236,72,153,.45),rgba(20,184,166,.25));
      transform:rotate(-14deg);
      z-index:0;
    }

    .sidebar-inner{
      position:relative;
      z-index:1;
      height:100vh;
      display:flex;
      flex-direction:column;
      padding:1.25rem;
    }

    .brand-logo{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      font-weight:800;
      background:linear-gradient(135deg,#60a5fa,#2dd4bf);
    }

    .sidebar-nav .nav-link{
      color:#e8edff;
      border-radius:.85rem;
      padding:.8rem .95rem;
      margin-bottom:.35rem;
      font-weight:600;
      font-size:.9rem;
      display:flex;
      align-items:center;
      gap:.85rem;
    }

    .sidebar-nav .nav-link:hover,
    .sidebar-nav .nav-link.active{
      color:#fff;
      background:rgba(255,255,255,.15);
    }

    .sidebar-profile{
      background:rgba(255,255,255,.13);
      border:1px solid rgba(255,255,255,.16);
      border-radius:1rem;
    }

    .main-wrapper{
      margin-left:250px;
      min-height:100vh;
    }

    .top-navbar{
      height:78px;
      background:transparent;
    }

    .page-title{
      font-size:1.55rem;
      font-weight:800;
      letter-spacing:-.04em;
    }

    .card{
      border:1px solid var(--border);
      border-radius:1rem;
      box-shadow:0 6px 18px rgba(15,23,42,.04);
    }

    .form-control,
    .form-select,
    .btn{
      border-radius:.75rem;
      font-size:.9rem;
    }

    .form-control,
    .form-select{
      border-color:var(--border);
      min-height:44px;
    }

    .btn-light{
      background:#fff;
      border-color:var(--border);
      font-weight:700;
    }

    .text-muted{
      color:var(--muted)!important;
    }

    .kpi-icon{
      width:44px;
      height:44px;
      border-radius:50%;
      display:grid;
      place-items:center;
      font-size:1.1rem;
    }

    .icon-blue{background:#e8f0ff;color:var(--primary)}
    .icon-green{background:#dcfce7;color:var(--success)}
    .icon-orange{background:#fff4dc;color:var(--warning)}
    .icon-red{background:#ffe8e8;color:var(--danger)}
    .icon-purple{background:#f1e8ff;color:var(--purple)}
    .icon-teal{background:#dcfdfa;color:#14b8a6}

    .kpi-value{
      font-size:1.45rem;
      font-weight:800;
      letter-spacing:-.03em;
    }

    .kpi-change{
      font-size:.78rem;
      color:var(--muted);
    }

    .up{color:var(--success);font-weight:800}
    .down{color:var(--danger);font-weight:800}

    .chart-box{
      height:195px;
      position:relative;
    }

    .impact-chart-box{
      height:255px;
      position:relative;
    }

    .legend-dot{
      width:11px;
      height:11px;
      display:inline-block;
      border-radius:3px;
      margin-right:.45rem;
    }

    .summary-box{
      background:#f8fafc;
      border-radius:1rem;
    }

    .table{
      font-size:.8rem;
    }

    .table thead th{
      background:#fafbfe;
      color:#475569;
      font-weight:800;
      white-space:nowrap;
      padding:.9rem .7rem;
      border-bottom:1px solid var(--border);
    }

    .table tbody td{
      padding:.85rem .7rem;
      vertical-align:middle;
      border-bottom:1px solid var(--border);
      color:#334155;
    }

    .game-icon{
      width:46px;
      height:46px;
      object-fit:cover;
      border-radius:.7rem;
    }

    .creative-thumb{
      width:96px;
      height:54px;
      object-fit:cover;
      border-radius:.7rem;
      border:1px solid var(--border);
      transition:.2s;
    }

    .creative-thumb:hover{
      transform:scale(1.04);
    }

    .creative-id{
      max-width:135px;
      white-space:normal;
      font-weight:700;
      color:#1e293b;
    }

    .badge{
      border-radius:.55rem;
      padding:.45rem .6rem;
      font-weight:800;
    }

    .badge-evergreen{background:#dcfce7;color:#16803d}
    .badge-candidate{background:#fff4dc;color:#c46900}
    .badge-promising{background:#f1e8ff;color:#7c3aed}
    .badge-non{background:#f1f5f9;color:#64748b}

    .pagination .page-link{
      border-color:var(--border);
      color:#334155;
      border-radius:.55rem;
      margin:0 .15rem;
    }

    .pagination .active .page-link{
      background:var(--primary);
      border-color:var(--primary);
    }

    .media-preview-wrap{
  position:relative;
  display:inline-block;
}

.media-type-badge{
  position:absolute;
  top:6px;
  left:6px;
  background:rgba(15,23,42,.82);
  color:#fff;
  font-size:.65rem;
  padding:.2rem .45rem;
  border-radius:.45rem;
  font-weight:700;
}

.play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.5rem;
  background:rgba(0,0,0,.18);
  border-radius:.7rem;
}

.channel-badge{
  background:#eef2ff;
  color:#3730a3;
  border-radius:.55rem;
  padding:.4rem .55rem;
  font-weight:800;
  font-size:.72rem;
}

.modal-video,
.modal-image{
  width:100%;
  max-height:72vh;
  border-radius:1rem;
  object-fit:contain;
}

.modal-youtube{
  width:100%;
  height:72vh;
  border:0;
  border-radius:1rem;
}

    @media(max-width:991px){
      .app-sidebar{
        transform:translateX(-100%);
        transition:.25s;
      }

      .app-sidebar.show{
        transform:translateX(0);
      }

      .main-wrapper{
        margin-left:0;
      }
    }


/*
 ========== Page 2   ========
*/  



.ai-hero-card{
  background:
    radial-gradient(circle at 12% 20%, rgba(59,130,246,.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(139,92,246,.18), transparent 28%),
    linear-gradient(135deg,#ffffff,#f8fbff);
  overflow:hidden;
}

.ai-glow-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.4rem;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  box-shadow:0 12px 35px rgba(59,130,246,.35);
  animation:pulseGlow 2.4s infinite ease-in-out;
}

@keyframes pulseGlow{
  0%,100%{transform:scale(1);box-shadow:0 12px 35px rgba(59,130,246,.28);}
  50%{transform:scale(1.05);box-shadow:0 18px 50px rgba(139,92,246,.42);}
}

.element-card{
  transition:.25s ease;
  cursor:pointer;
}

.element-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 35px rgba(15,23,42,.09);
}

.element-score{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#16a34a,#2dd4bf);
}

.hypothesis-card{
  border-left:5px solid #3b82f6;
}

.hypothesis-card.validated{
  border-left-color:#16a34a;
}

.hypothesis-card.partial{
  border-left-color:#f59e0b;
}

.hypothesis-card.rejected{
  border-left-color:#ef4444;
}

.pattern-pill{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:.55rem .85rem;
  font-size:.8rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:.25rem;
}

.ai-chat-box{
  height:520px;
  display:flex;
  flex-direction:column;
}

.ai-chat-messages{
  flex:1;
  overflow:auto;
  padding-right:.35rem;
}

.chat-msg{
  display:flex;
  gap:.75rem;
  margin-bottom:1rem;
  animation:slideUp .25s ease;
}

@keyframes slideUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.chat-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
}

.chat-bubble{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:1rem;
  padding:.8rem .95rem;
  font-size:.88rem;
  line-height:1.55;
}

.chat-msg.user{
  flex-direction:row-reverse;
}

.chat-msg.user .chat-avatar{
  background:#0f172a;
}

.chat-msg.user .chat-bubble{
  background:#eef2ff;
}

.typing-dots span{
  width:6px;
  height:6px;
  background:#94a3b8;
  border-radius:50%;
  display:inline-block;
  margin-right:3px;
  animation:typing 1s infinite ease-in-out;
}

.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}

@keyframes typing{
  0%,100%{transform:translateY(0);opacity:.4;}
  50%{transform:translateY(-4px);opacity:1;}
}

.creative-mini{
  width:78px;
  height:48px;
  border-radius:.65rem;
  object-fit:cover;
  border:1px solid var(--border);
}

.confidence-bar{
  height:8px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}

.confidence-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#3b82f6,#8b5cf6);
}

.insight-rank{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:800;
  background:#eef2ff;
  color:#3730a3;
}

.ai-scan-active{
  position:relative;
  overflow:hidden;
}

.ai-scan-active::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(59,130,246,.12) 45%, rgba(139,92,246,.2) 50%, transparent 58%);
  animation:aiScan 1.25s linear infinite;
  pointer-events:none;
}

@keyframes aiScan{
  from{transform:translateX(-100%);}
  to{transform:translateX(100%);}
}

.analysis-step{
  border:1px solid var(--border);
  border-radius:.85rem;
  padding:.75rem;
  margin-bottom:.65rem;
  background:#fff;
}

.analysis-step.done{
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.analysis-progress{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#e2e8f0;
}

.analysis-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#3b82f6,#8b5cf6,#16a34a);
  transition:width .45s ease;
}
/* Light version additions */
.media-fallback{width:96px;height:54px;border:1px dashed var(--border);border-radius:.7rem;display:grid;place-items:center;background:#f8fafc;color:#64748b;font-size:1.4rem}.empty-media{height:420px;display:grid;place-items:center;background:#0f172a;color:#fff;border-radius:1rem}.side-kpi{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border)}.side-kpi span{color:#64748b}.side-kpi strong{text-align:right}.creative-card{overflow:hidden}.creative-card .preview{height:168px;background:#f8fafc;display:grid;place-items:center}.creative-card .preview img,.creative-card .preview video{width:100%;height:100%;object-fit:cover}.table-wrap{overflow:auto}.filter-card{position:sticky;top:0;z-index:5}.log-upload{background:#ecfdf5!important}.log-delete{background:#fef2f2!important}.login-shell{min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.25),transparent 25%),linear-gradient(135deg,#10164a,#26328c);display:grid;place-items:center}.login-card{max-width:420px;width:100%;border-radius:1.5rem;background:#fff;padding:2rem;box-shadow:0 25px 60px rgba(15,23,42,.25)}

.cost-stack{line-height:1.15;white-space:nowrap}.cost-main{font-weight:700}.cost-sub{font-size:.72rem;color:#6b7280;margin-top:2px;white-space:nowrap}.side-kpi .cost-sub{display:block;text-align:right}