@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --stg-bg:          #f4f6fb;
  --stg-surface:     #ffffff;
  --stg-surface-2:   #f0f3fa;
  --stg-border:      #e2e8f0;
  --stg-text:        #0f172a;
  --stg-muted:       #64748b;
  --stg-dim:         #94a3b8;
  --stg-navy:        #1b3a6b;
  --stg-blue:        #4f6ef7;
  --stg-blue-soft:   rgba(79,110,247,.10);
  --stg-gold:        #c8a84b;
  --stg-gold-soft:   #fdf3dc;
  --stg-green:       #22c55e;
  --stg-green-soft:  #d1fae5;
  --stg-red:         #ef4444;
  --stg-red-soft:    #fee2e2;
  --stg-amber:       #f59e0b;
  --stg-amber-soft:  #fef3c7;
  --stg-purple:      #8b5cf6;
  --stg-purple-soft: #ede9fe;
  --stg-radius:      16px;
  --stg-shadow:      0 4px 24px rgba(15,23,42,.08);
  --stg-shadow-lg:   0 16px 48px rgba(15,23,42,.14);
  --stg-font:        'Plus Jakarta Sans', system-ui, sans-serif;
  --stg-mono:        'DM Mono', monospace;
}

/* ── RESET ───────────────────────────────────── */
.stratega-wrap *, .stratega-login-gate * { box-sizing: border-box; margin: 0; padding: 0; }
.stratega-wrap { font-family: var(--stg-font); color: var(--stg-text); background: var(--stg-bg); border-radius: var(--stg-radius); overflow: hidden; }

/* ── LOGIN GATE ──────────────────────────────── */
.stratega-login-gate { display: flex; align-items: center; justify-content: center; min-height: 360px; padding: 40px; background: var(--stg-bg); border-radius: var(--stg-radius); }
.stg-login-box { text-align: center; max-width: 380px; }
.stg-login-icon { font-size: 48px; margin-bottom: 16px; }
.stg-login-box h3 { font-size: 20px; font-weight: 700; color: var(--stg-navy); margin-bottom: 8px; }
.stg-login-box p  { font-size: 14px; color: var(--stg-muted); line-height: 1.65; margin-bottom: 20px; }

/* ── TOP NAV ─────────────────────────────────── */
.stg-topnav { background: var(--stg-navy); position: sticky; top: 0; z-index: 100; }
.stg-nav-inner { display: flex; align-items: center; gap: 12px; padding: 0 20px; flex-wrap: wrap; }
.stg-nav-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 17px; padding: 12px 0; margin-right: 16px; }
.stg-brand-dot { width: 32px; height: 32px; border-radius: 10px; background: var(--stg-gold); color: var(--stg-navy); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.stg-nav-tabs { display: flex; gap: 2px; flex: 1; }
.stg-tab { background: none; border: none; color: rgba(255,255,255,.65); padding: 14px 18px; border-radius: 0; cursor: pointer; font-family: var(--stg-font); font-size: 13.5px; font-weight: 600; transition: all .2s; border-bottom: 3px solid transparent; white-space: nowrap; }
.stg-tab:hover  { color: #fff; background: rgba(255,255,255,.08); }
.stg-tab.active { color: #fff; border-bottom-color: var(--stg-gold); }
.stg-nav-user { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.stg-user-name { font-size: 13px; color: rgba(255,255,255,.75); }
.stg-role-badge { font-size: 10px !important; }

/* ── PANELS ─────────────────────────────────── */
.stg-panels { min-height: 600px; }
.stg-panel { display: none; padding: 24px; animation: stgFade .2s ease; }
.stg-panel.active { display: block; }
@keyframes stgFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; } }

/* ── PAGE HEADER ─────────────────────────────── */
.stg-page-header { background: var(--stg-navy); color: #fff; border-radius: 16px; padding: 24px 28px; margin-bottom: 22px; position: relative; overflow: hidden; }
.stg-page-header::before { content:''; position:absolute; top:-50px; right:-50px; width:220px; height:220px; border-radius:50%; background:rgba(200,168,75,.12); }
.stg-page-header h1 { font-size: 20px; font-weight: 800; margin-bottom: 5px; position: relative; }
.stg-page-header p  { font-size: 13.5px; opacity: .75; line-height: 1.6; position: relative; }

/* ── CARDS ───────────────────────────────────── */
.stg-card { background: var(--stg-surface); border: 1px solid var(--stg-border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--stg-shadow); }
.stg-card-title { font-size: 14px; font-weight: 700; color: var(--stg-navy); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.stg-p-sm { padding: 14px 16px !important; }

/* ── GRID ────────────────────────────────────── */
.stg-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stg-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stg-grid-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 768px) { .stg-two-col, .stg-grid-2, .stg-grid-3 { grid-template-columns: 1fr; } }

/* ── BUTTONS ─────────────────────────────────── */
.stg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 10px; cursor: pointer; font-family: var(--stg-font); font-size: 13.5px; font-weight: 600; padding: 10px 18px; transition: all .18s; line-height: 1; }
.stg-btn:disabled { opacity: .55; cursor: not-allowed; }
.stg-btn-primary { background: var(--stg-navy); color: #fff; }
.stg-btn-primary:not(:disabled):hover { background: #1e4585; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(27,58,107,.25); }
.stg-btn-gold    { background: var(--stg-gold); color: #fff; }
.stg-btn-gold:not(:disabled):hover    { filter: brightness(1.08); transform: translateY(-1px); }
.stg-btn-outline { background: transparent; color: var(--stg-navy); border: 1.5px solid var(--stg-navy); }
.stg-btn-outline:not(:disabled):hover { background: var(--stg-blue-soft); }
.stg-btn-danger  { background: var(--stg-red-soft); color: var(--stg-red); border: 1px solid #fca5a5; }
.stg-btn-danger:not(:disabled):hover  { background: #fecaca; }
.stg-btn-sm  { padding: 8px 14px; font-size: 12.5px; }
.stg-btn-xs  { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

/* ── BADGES ──────────────────────────────────── */
.stg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.stg-badge-blue   { background: var(--stg-blue-soft); color: var(--stg-blue); }
.stg-badge-green  { background: var(--stg-green-soft); color: #166534; }
.stg-badge-amber  { background: var(--stg-amber-soft); color: #92400e; }
.stg-badge-red    { background: var(--stg-red-soft); color: #991b1b; }
.stg-badge-gold   { background: var(--stg-gold-soft); color: #7a5100; border: 1px solid #e8c96a; }
.stg-badge-purple { background: var(--stg-purple-soft); color: var(--stg-purple); }

/* ── FORMS ───────────────────────────────────── */
.stg-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.stg-label { font-size: 13px; font-weight: 600; color: var(--stg-text); }
.stg-label .req { color: var(--stg-red); margin-left: 2px; }
.stg-input, .stg-select, .stg-textarea {
  border: 1.5px solid var(--stg-border); border-radius: 10px;
  padding: 9px 12px; font-family: var(--stg-font); font-size: 13.5px;
  color: var(--stg-text); background: #fff;
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.stg-input:focus, .stg-select:focus, .stg-textarea:focus { outline: none; border-color: var(--stg-blue); box-shadow: 0 0 0 3px rgba(79,110,247,.1); }
.stg-textarea { resize: vertical; min-height: 80px; }
.stg-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.stg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .stg-form-row { grid-template-columns: 1fr; } }

/* ── RADIO BTN ───────────────────────────────── */
.stg-radio-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1.5px solid var(--stg-border); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .2s; }
.stg-radio-btn input { display: none; }
.stg-radio-btn.sel, .stg-radio-btn:has(input:checked) { border-color: var(--stg-navy); background: var(--stg-blue-soft); color: var(--stg-navy); }

/* ── SECTION BANNER ──────────────────────────── */
.stg-section-banner { background: var(--stg-navy); color: #fff; padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stg-section-banner .num { background: var(--stg-gold); color: var(--stg-navy); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.stg-section-banner h3 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.stg-section-banner p  { font-size: 11.5px; opacity: .78; margin: 0; }

/* ── STEPS ───────────────────────────────────── */
.stg-steps { display: flex; overflow-x: auto; border-bottom: 1px solid var(--stg-border); background: var(--stg-surface); scrollbar-width: none; }
.stg-steps::-webkit-scrollbar { display: none; }
.stg-step-tab { padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--stg-muted); border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: all .2s; font-family: var(--stg-font); }
.stg-step-tab.active { color: var(--stg-navy); border-bottom-color: var(--stg-gold); }
.stg-step-tab.done   { color: var(--stg-green); }

/* ── PROGRESS BAR ────────────────────────────── */
.stg-progress-bar { height: 3px; background: var(--stg-border); }
.stg-progress-fill { height: 100%; background: var(--stg-gold); transition: width .4s; }

/* ── TABLE ───────────────────────────────────── */
.stg-table-wrap { overflow-x: auto; border: 1px solid var(--stg-border); border-radius: 14px; }
.stg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stg-table th { background: var(--stg-surface-2); padding: 11px 14px; text-align: left; font-size: 12px; font-weight: 700; color: var(--stg-muted); }
.stg-table td { padding: 12px 14px; border-top: 1px solid var(--stg-border); vertical-align: middle; }
.stg-table tbody tr:hover td { background: var(--stg-surface-2); }
.stg-fw { font-weight: 600; }
.stg-muted { color: var(--stg-muted); }
.stg-small { font-size: 12.5px; }
.stg-mono  { font-family: var(--stg-mono); font-size: 12.5px; }

/* ── NOTICE ──────────────────────────────────── */
.stg-notice { padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.6; display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; }
.stg-notice-info    { background: var(--stg-blue-soft); color: #1e3a8a; border: 1px solid rgba(79,110,247,.25); }
.stg-notice-warn    { background: var(--stg-amber-soft); color: #92400e; border: 1px solid #fbbf24; }
.stg-notice-success { background: var(--stg-green-soft); color: #14532d; border: 1px solid #86efac; }

/* ── TRL SELECTOR ────────────────────────────── */
.stg-trl-selector { display: flex; gap: 7px; flex-wrap: wrap; }
.stg-trl-btn { flex: 1; min-width: 64px; padding: 11px 6px; border: 2px solid var(--stg-border); border-radius: 12px; background: #fff; cursor: pointer; text-align: center; transition: all .2s; font-family: var(--stg-font); }
.stg-trl-btn .num { font-size: 20px; font-weight: 700; color: var(--stg-muted); }
.stg-trl-btn .lbl { font-size: 10px; color: var(--stg-muted); margin-top: 2px; }
.stg-trl-btn.sel  { border-color: var(--stg-navy); background: var(--stg-blue-soft); }
.stg-trl-btn.sel .num { color: var(--stg-navy); }
.stg-trl-btn.sel .lbl { color: var(--stg-blue); }
.stg-trl-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── SCORE BTNS ──────────────────────────────── */
.stg-score-btn { flex: 1; padding: 8px 4px; border: 2px solid var(--stg-border); border-radius: 8px; background: var(--stg-surface-2); cursor: pointer; font-family: var(--stg-font); font-size: 13px; font-weight: 700; color: var(--stg-muted); transition: all .15s; }
.stg-score-btn.sel { border-color: var(--stg-navy); background: var(--stg-blue-soft); color: var(--stg-navy); }
.stg-ind-label { font-size: 13.5px; font-weight: 600; color: var(--stg-text); }

/* ── SWOT ────────────────────────────────────── */
.stg-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stg-swot-cell { border-radius: 12px; padding: 14px; }
.stg-swot-cell label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.stg-swot-cell.s { background: var(--stg-green-soft); } .stg-swot-cell.s label { color: #065f46; }
.stg-swot-cell.w { background: var(--stg-red-soft); }   .stg-swot-cell.w label { color: #991b1b; }
.stg-swot-cell.o { background: #dbeafe; }               .stg-swot-cell.o label { color: #1e40af; }
.stg-swot-cell.t { background: var(--stg-purple-soft); } .stg-swot-cell.t label { color: #6b21a8; }
.stg-swot-cell .stg-textarea { background: rgba(255,255,255,.7); border-color: transparent; }
@media (max-width: 560px) { .stg-swot { grid-template-columns: 1fr; } }

/* ── VERDICT BTNS ────────────────────────────── */
.stg-verdict-btn { cursor: pointer; border: 2px solid transparent !important; transition: all .15s; }
.stg-verdict-btn.stg-verdict-active { border-color: currentColor !important; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }

/* ── AI BOX ──────────────────────────────────── */
.stg-ai-box { background: linear-gradient(135deg,#f0f4ff,#fdf3dc); border: 1.5px solid rgba(79,110,247,.2); border-radius: 16px; padding: 18px 20px; }
.stg-ai-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stg-ai-icon { font-size: 22px; }
.stg-ai-title { font-size: 14px; font-weight: 700; color: var(--stg-navy); }
.stg-ai-output { background: #fff; border: 1px solid var(--stg-border); border-radius: 10px; padding: 14px; font-size: 13.5px; line-height: 1.75; color: var(--stg-text); min-height: 100px; white-space: pre-wrap; }
.stg-ai-output.loading { color: var(--stg-muted); font-style: italic; }
.stg-ai-teaser { margin-top: 0; }

/* ── MITRA CARDS ─────────────────────────────── */
.stg-mitra-card { background: var(--stg-surface); border: 1px solid var(--stg-border); border-radius: 16px; padding: 18px 20px; transition: box-shadow .2s, transform .2s; }
.stg-mitra-card:hover { box-shadow: var(--stg-shadow-lg); transform: translateY(-2px); }
.stg-mitra-name   { font-size: 15px; font-weight: 700; color: var(--stg-navy); }
.stg-mitra-sector { font-size: 12px; color: var(--stg-muted); margin-top: 2px; }
.stg-mitra-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.stg-mitra-tag  { background: var(--stg-surface-2); color: var(--stg-muted); border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600; }

/* ── DRAWER ──────────────────────────────────── */
.stg-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 9999; display: flex; align-items: stretch; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity .3s; }
.stg-overlay.open { opacity: 1; pointer-events: auto; }
.stg-drawer { width: min(880px, 96vw); background: var(--stg-bg); height: 100vh; overflow-y: auto; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
.stg-overlay.open .stg-drawer { transform: translateX(0); }
.stg-drawer-header { background: var(--stg-navy); color: #fff; padding: 18px 24px; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-shrink: 0; }
.stg-drawer-title { font-size: 15px; font-weight: 700; }
.stg-drawer-sub   { font-size: 12px; opacity: .75; margin-top: 2px; }
.stg-drawer-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 17px; display: grid; place-items: center; transition: background .2s; flex-shrink: 0; }
.stg-drawer-close:hover { background: rgba(255,255,255,.28); }
.stg-drawer-body  { padding: 22px; flex: 1; }
.stg-drawer-footer { background: #fff; border-top: 1px solid var(--stg-border); padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; bottom: 0; z-index: 5; flex-shrink: 0; flex-wrap: wrap; }
.stg-drawer-loading { display: flex; align-items: center; justify-content: center; padding: 60px; gap: 12px; color: var(--stg-muted); }

/* ── SPINNER ─────────────────────────────────── */
.stg-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: stgSpin .7s linear infinite; }
.stg-spinner.dark { border-color: rgba(27,58,107,.2); border-top-color: var(--stg-navy); }
@keyframes stgSpin { to { transform: rotate(360deg); } }

/* ── SKELETON ────────────────────────────────── */
.stg-skeleton { height: 120px; background: linear-gradient(90deg, var(--stg-surface-2) 25%, #e8ecf4 50%, var(--stg-surface-2) 75%); background-size: 400% 100%; animation: stgShimmer 1.4s infinite; border-radius: 12px; }
@keyframes stgShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── TOAST ───────────────────────────────────── */
.stg-toast { position: fixed; bottom: 24px; right: 24px; z-index: 99999; padding: 13px 20px; border-radius: 12px; font-family: var(--stg-font); font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.18); transform: translateY(20px); opacity: 0; transition: all .3s; pointer-events: none; }
.stg-toast.stg-toast-in { transform: translateY(0); opacity: 1; }
.stg-toast-success { background: var(--stg-green-soft); color: #065f46; border: 1px solid #86efac; }
.stg-toast-error   { background: var(--stg-red-soft);   color: #991b1b; border: 1px solid #fca5a5; }

/* ── MISC ────────────────────────────────────── */
.stg-empty { color: var(--stg-muted); font-size: 13.5px; padding: 24px; text-align: center; }
.stg-error { color: var(--stg-red); }
.stg-global-overlay { display: none; }