/* ============ Scoped styles for #im-ao-app ============ */

/* Design tokens are defined on the host container to avoid leaking to the theme */
#im-ao-app, 
#im-ao-app * {
  --bg-soft:#eef2f9; --card:#ffffff; --muted:#586273; --text:#0e1628;
  --brand:#6EC1E4; --brand-600:#57b4dc; --brand-700:#4aa6ce;
  --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  --line:#e7eaf0; --thead:#f0f4ff; --chip:#f4f7fb; --accent:#6EC1E4;
  --shadow: 0 8px 30px rgba(2, 6, 23, .06), 0 1px 0 rgba(2,6,23,.04);
  --radius: 16px; --radius-sm: 12px;
  color: var(--text);
  font-family: 'Calibri';
  letter-spacing: .1px;
}

#im-ao-app[data-theme="dark"]{
  --bg-soft:#0d1530; --card:#0f1834; --muted:#9aa6bf; --text:#e9eef8;
  --brand:#3b82f6; --brand-600:#2f73ea; --brand-700:#2467df;
  --line:#1e2a55; --thead:#0c1633; --chip:#0c132b; --accent:#60a5fa;
  --shadow: 0 10px 28px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02);
}

/* container */
#im-ao-app .wrap{max-width:1200px;margin:28px auto;padding:0 16px;background:var(--bg)}

/* subtle bg blob only behind the app */
#im-ao-app::before {
  content: none !important;
}
#im-ao-app > .wrap{ position:relative; z-index:1; }

/* Cards / layout */
#im-ao-app .card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
#im-ao-app .grid{display:grid;gap:12px}
@media(min-width:900px){#im-ao-app .grid{grid-template-columns:1fr}}

#im-ao-app label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px;font-weight:600}
#im-ao-app input[type="text"], 
#im-ao-app select{
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8));
  color:var(--text); outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
#im-ao-app[data-theme="dark"] input[type="text"],
#im-ao-app[data-theme="dark"] select{
  background:linear-gradient(180deg, rgba(18,26,56,.95), rgba(18,26,56,.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#im-ao-app input[type="text"]::placeholder{color:#8d97a8}
#im-ao-app input[type="text"]:focus, 
#im-ao-app select:focus{
  border-color:var(--brand-600);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 28%, transparent);
}

#im-ao-app .row{display:flex;gap:12px;flex-wrap:wrap}
#im-ao-app .row>*{flex:1 1 280px}
#im-ao-app .hint{font-size:12px;color:var(--muted)}

/* Buttons */
#im-ao-app button{
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 70%, #000 30%));
  color:var(--text); padding:11px 14px; border-radius:14px; cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow:var(--shadow);
}
#im-ao-app button:hover{ transform:translateY(-1px); }
#im-ao-app button:active{ transform:translateY(0); }
#im-ao-app .btn-ghost{
  background:transparent;
  border:1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}
#im-ao-app .btn-ghost:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); }
#im-ao-app .btn-primary{
  background:linear-gradient(180deg, var(--brand), var(--brand-700));
  border-color:var(--brand-700); color:#061327; font-weight:700;
}

#im-ao-app .chip[data-neg="1"]{
  opacity:.85; text-decoration:line-through;
  background:transparent; border:1px dashed var(--line);
  font-weight:600;
}


/* AO badge */
#im-ao-app .ao{
  margin:26px 0 8px; padding:10px 14px; border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  border:1px solid var(--line); color:var(--text); text-align:center;
}
#im-ao-app .ao strong{color:var(--brand)}

/* Chips */
#im-ao-app .chips{display:flex;flex-wrap:wrap;gap:8px}
#im-ao-app .chip{
  font-size:12px; color:#0b1220; background:linear-gradient(180deg, var(--brand), var(--brand-700));
  border:0; border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:700;
  box-shadow:0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent);
}
#im-ao-app[data-theme="dark"] .chip{ color:#001022 }

/* Table */
#im-ao-app .table-wrap{width:100%;overflow:auto; -webkit-overflow-scrolling:touch}
#im-ao-app .table-wrap table{min-width:980px}

#im-ao-app table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid var(--line); border-radius:18px; background:var(--card);
  box-shadow:var(--shadow); table-layout:fixed;
}
#im-ao-app {
  background: none !important;
}
#im-ao-app thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg, var(--thead), color-mix(in srgb, var(--thead) 70%, transparent));
  color:var(--text); font-weight:800; font-size:12.5px; padding:12px 10px; text-align:center;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 2px 0 0 var(--line), 0 6px 12px rgba(2,6,23,.05);
  text-transform:uppercase; letter-spacing:.4px;
}
#im-ao-app[data-theme="dark"] thead th{ color:#d5def0 }

#im-ao-app tbody tr{ background:var(--card); }
#im-ao-app tbody tr+tr td{ border-top:1px solid var(--line); }
#im-ao-app tbody tr:nth-child(even){ background:color-mix(in srgb, var(--card) 92%, var(--bg-soft) 8%); }
#im-ao-app tbody tr:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
#im-ao-app[data-theme="dark"] tbody tr:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); }

#im-ao-app td{ padding:12px 10px; vertical-align:middle; font-size:14px }
#im-ao-app td.t-left{text-align:left}
#im-ao-app td.t-center{text-align:center}

#im-ao-app .cell.desig{
  max-height:10em; overflow:auto; line-height:1.28; padding-right:4px; white-space:pre-wrap;
  scrollbar-width:thin;
}
#im-ao-app .cell.desig::-webkit-scrollbar{height:6px;width:6px}
#im-ao-app .cell.desig::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px}
#im-ao-app .cell.desig::-webkit-scrollbar-track{background:transparent}

/* Stats / helpers */
#im-ao-app .stat{color:var(--muted);font-size:13px}
#im-ao-app .muted{color:var(--muted)}
#im-ao-app .footer-space{height:90px}
#im-ao-app .error{color:#fecaca}
#im-ao-app .positive{color:#00ad09;font-weight:700}
#im-ao-app .negative{color:#e01600;font-weight:700}
#im-ao-app mark{background:color-mix(in srgb, var(--accent) 30%, transparent); color:inherit; border-radius:6px; padding:0 2px}
#im-ao-app[data-theme="dark"] mark{ color:#e7f0ff; }

/* Inputs group */
#im-ao-app .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Focus accessibility */
#im-ao-app :focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:12px}

/* Small screens */
@media (max-width:640px){
  #im-ao-app .wrap{padding:0 12px}
}