/* =====================================================================================
 *  INVOICE PWA  ::  css/style.css   (v2 — "Aurora" design system, 2026)
 *  -----------------------------------------------------------------------------------
 *  A modern, native-feeling design language with real depth and buttery motion.
 *
 *  PERFORMANCE DESIGN PRINCIPLES (why this version is smooth)
 *    - Frosted glass (backdrop-filter) is EXPENSIVE. It is now used ONLY on the three
 *      chrome bars (top toolbar, sidebar, bottom nav) — never on cards/sheets/toasts —
 *      and those layers are GPU-promoted with translateZ(0).
 *    - All motion animates ONLY transform + opacity (compositor-only) so it runs at the
 *      display's full refresh rate (120Hz on ProMotion). No animating width/blur/color
 *      on hot paths.
 *    - Interactive lift-shadows fade via a ::after pseudo-element's OPACITY (composited)
 *      instead of transitioning box-shadow (which forces repaints).
 *    - Long lists use content-visibility:auto so off-screen rows aren't painted.
 *    - `contain` isolates layout/paint for cards + rows.
 *    - Everything degrades under prefers-reduced-motion.
 *
 *  TYPE: Plus Jakarta Sans (UI) with tabular figures for money. Loaded in index.html.
 *  ACCENT: an indigo->violet aurora (#6C63FF -> #8B5CF6) matching the app icon.
 * =================================================================================== */

/* ============================ 1 · DESIGN TOKENS ================================== */
:root {
  /* canvas + layered surfaces (light) */
  --bg: #eef0f6;
  --bg-grad-1: #f4f5fb;
  --bg-grad-2: #e9ebf5;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef0f7;
  --glass: rgba(255,255,255,0.68);

  --text: #12131a;
  --text-2: #3d3f4d;
  --muted: #71748a;
  --faint: #9a9db2;

  --border: rgba(18,19,26,0.07);
  --border-2: rgba(18,19,26,0.12);
  --fill: rgba(120,122,150,0.10);
  --fill-2: rgba(120,122,150,0.18);

  /* aurora accent + gradient */
  --accent: #6C63FF;
  --accent-2: #8B5CF6;
  --accent-grad: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%);
  --accent-weak: rgba(108,99,255,0.12);
  --accent-ring: rgba(108,99,255,0.28);

  --green: #10b981; --green-weak: rgba(16,185,129,0.14);
  --amber: #f59e0b; --amber-weak: rgba(245,158,11,0.16);
  --red: #ef4444;   --red-weak: rgba(239,68,68,0.14);
  --purple: #a855f7;

  /* elevation (soft, layered, slightly tinted) */
  --sh-1: 0 1px 2px rgba(18,19,40,0.05), 0 2px 6px rgba(18,19,40,0.05);
  --sh-2: 0 4px 12px rgba(18,19,40,0.08), 0 8px 28px rgba(18,19,40,0.07);
  --sh-3: 0 12px 32px rgba(18,19,40,0.14), 0 24px 64px rgba(18,19,40,0.12);
  --sh-accent: 0 8px 22px rgba(108,99,255,0.35);
  --sh-hover: 0 10px 30px rgba(18,19,40,0.14);

  --r-xs: 10px; --r-sm: 14px; --r: 18px; --r-lg: 24px; --r-xl: 30px; --r-pill: 999px;

  /* motion — springy, native */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur: 180ms; --dur-2: 280ms;

  --sidebar-w: 268px; --sidebar-w-min: 78px;
  --topbar-h: 64px; --ticker-h: 36px; --bottomnav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  color-scheme: light;
}

/* dark palette — forced */
:root[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-grad-1: #101018;
  --bg-grad-2: #08080d;
  --surface: #16171f;
  --surface-2: #1c1d27;
  --surface-3: #23242f;
  --glass: rgba(22,23,31,0.66);

  --text: #f3f4fb;
  --text-2: #c9cbdb;
  --muted: #8b8ea6;
  --faint: #63667e;

  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --fill: rgba(140,142,170,0.14);
  --fill-2: rgba(140,142,170,0.22);

  --accent: #7d75ff;
  --accent-2: #a78bfa;
  --accent-grad: linear-gradient(135deg, #7d75ff 0%, #a78bfa 100%);
  --accent-weak: rgba(125,117,255,0.18);
  --accent-ring: rgba(125,117,255,0.34);

  --green:#34d399; --green-weak:rgba(52,211,153,0.16);
  --amber:#fbbf24; --amber-weak:rgba(251,191,36,0.18);
  --red:#f87171;   --red-weak:rgba(248,113,113,0.18);

  --sh-1: 0 1px 2px rgba(0,0,0,0.5);
  --sh-2: 0 6px 18px rgba(0,0,0,0.55);
  --sh-3: 0 18px 50px rgba(0,0,0,0.66);
  --sh-hover: 0 10px 30px rgba(0,0,0,0.6);
  color-scheme: dark;
}

/* dark palette — follow OS when theme is auto */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
  --bg: #0a0a0f;
  --bg-grad-1: #101018;
  --bg-grad-2: #08080d;
  --surface: #16171f;
  --surface-2: #1c1d27;
  --surface-3: #23242f;
  --glass: rgba(22,23,31,0.66);

  --text: #f3f4fb;
  --text-2: #c9cbdb;
  --muted: #8b8ea6;
  --faint: #63667e;

  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --fill: rgba(140,142,170,0.14);
  --fill-2: rgba(140,142,170,0.22);

  --accent: #7d75ff;
  --accent-2: #a78bfa;
  --accent-grad: linear-gradient(135deg, #7d75ff 0%, #a78bfa 100%);
  --accent-weak: rgba(125,117,255,0.18);
  --accent-ring: rgba(125,117,255,0.34);

  --green:#34d399; --green-weak:rgba(52,211,153,0.16);
  --amber:#fbbf24; --amber-weak:rgba(251,191,36,0.18);
  --red:#f87171;   --red-weak:rgba(248,113,113,0.18);

  --sh-1: 0 1px 2px rgba(0,0,0,0.5);
  --sh-2: 0 6px 18px rgba(0,0,0,0.55);
  --sh-3: 0 18px 50px rgba(0,0,0,0.66);
  --sh-hover: 0 10px 30px rgba(0,0,0,0.6);
  color-scheme: dark;
  }
}

/* ============================ 2 · BASE ========================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(900px 600px at 12% -8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 108% 4%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
}
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }

/* tabular figures for money/numbers */
.ip-kpi-value, .ip-row-amount, code, .ip-badge { font-variant-numeric: tabular-nums; }

/* native hidden scrollbars on internal scroll regions */
.ip-view-root, .ip-nav, .ip-sheet-body, .ip-combobox-menu, .ip-hide-scroll {
  scrollbar-width: none; -ms-overflow-style: none;
}
.ip-view-root::-webkit-scrollbar, .ip-nav::-webkit-scrollbar,
.ip-sheet-body::-webkit-scrollbar, .ip-combobox-menu::-webkit-scrollbar { width:0; height:0; display:none; }

.ip-visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ip-mobile-only { display:none; }
[hidden] { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ============================ 3 · BUTTONS ======================================= */
.ip-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border:1px solid transparent; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:600; line-height:1; cursor:pointer;
  background:var(--fill); color:var(--text);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
  user-select:none; white-space:nowrap;
}
.ip-btn:hover { background:var(--fill-2); }
.ip-btn:active { transform:scale(.96); }
.ip-btn:disabled { opacity:.5; pointer-events:none; }
.ip-btn-primary { background:var(--accent-grad); color:#fff; box-shadow:var(--sh-accent); }
.ip-btn-primary:hover { filter:brightness(1.05); background:var(--accent-grad); }
.ip-btn-tint { background:var(--accent-weak); color:var(--accent); }
.ip-btn-danger { background:var(--red-weak); color:var(--red); }
.ip-btn-ghost { background:transparent; }
.ip-btn-ghost:hover { background:var(--fill); }
.ip-btn-block { width:100%; }
.ip-btn-sm { padding:8px 13px; font-size:13px; border-radius:var(--r-xs); }

.ip-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:none; border-radius:var(--r-sm);
  background:transparent; color:var(--muted); font-size:18px; cursor:pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ip-icon-btn:hover { background:var(--fill); color:var(--text); }
.ip-icon-btn:active { transform:scale(.9); }
.ip-link { background:none; border:none; padding:0; color:var(--accent); font-weight:600; font-size:inherit; cursor:pointer; }
.ip-link:hover { text-decoration:underline; }

.ip-spinner { width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; display:inline-block; will-change:transform; }
.ip-btn-tint .ip-spinner, .ip-btn-ghost .ip-spinner { border-color:var(--fill-2); border-top-color:var(--accent); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================ 4 · FIELDS / PILLS / BADGES ======================= */
.ip-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.ip-field label { font-size:13px; font-weight:600; color:var(--muted); padding-left:2px; }
.ip-field input, .ip-field select, .ip-field textarea, .ip-input {
  width:100%; padding:13px 15px; font-size:15px; font-family:inherit; color:var(--text);
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--r-sm);
  outline:none; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ip-field input::placeholder, .ip-input::placeholder { color:var(--faint); }
.ip-field input:focus, .ip-field select:focus, .ip-field textarea:focus, .ip-input:focus {
  background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring);
}
.ip-field textarea { resize:vertical; min-height:100px; line-height:1.55; }

.ip-status-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:700; background:var(--fill); color:var(--muted); }
.ip-status-pill[data-state="online"]  { color:var(--green); background:var(--green-weak); }
.ip-status-pill[data-state="offline"] { color:var(--amber); background:var(--amber-weak); }
.ip-status-pill[data-state="syncing"] { color:var(--accent); background:var(--accent-weak); }
.ip-status-pill[data-state="syncing"] i { animation:spin .9s linear infinite; }

.ip-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:700; white-space:nowrap; background:var(--fill); color:var(--muted); }
.ip-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.ip-badge[data-status="Paid"]{color:var(--green);background:var(--green-weak);}
.ip-badge[data-status="Due"]{color:var(--accent);background:var(--accent-weak);}
.ip-badge[data-status="Partially Paid"]{color:var(--purple);background:rgba(168,85,247,.14);}
.ip-badge[data-status="Overdue"]{color:var(--red);background:var(--red-weak);}
.ip-badge[data-status="Pre-invoice"]{color:var(--faint);background:var(--fill);}
.ip-badge[data-status="Cancelled"]{color:var(--faint);background:var(--fill);text-decoration:line-through;}

.ip-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-pill); background:var(--fill); color:var(--text-2); font-size:13px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ip-chip:active { transform:scale(.95); }
.ip-chip.is-active { background:var(--accent-grad); color:#fff; box-shadow:var(--sh-accent); }
.ip-chip:hover:not(.is-active){ background:var(--fill-2); }

/* ============================ 5 · BOOT + AUTH =================================== */
#boot-splash { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:var(--bg); transition:opacity var(--dur-2) var(--ease); }
#boot-splash img { width:84px; height:84px; border-radius:22px; box-shadow:var(--sh-3); animation:floaty 3s var(--ease) infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
:root[data-app-ready="true"] #boot-splash { opacity:0; pointer-events:none; }

#auth-view { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
#auth-view[hidden]{display:none;}
#auth-view::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(600px 400px at 22% 18%, var(--accent-weak), transparent 62%),
    radial-gradient(560px 420px at 82% 82%, rgba(168,85,247,.12), transparent 60%);
}
.ip-auth-card { width:100%; max-width:410px; padding:40px 34px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-3); animation:rise var(--dur-2) var(--ease-spring) both; }
@keyframes rise { from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
.ip-auth-head { text-align:center; margin-bottom:26px; }
.ip-auth-logo { width:66px; height:66px; border-radius:18px; margin:0 auto 16px; box-shadow:var(--sh-2); }
.ip-auth-title { font-size:26px; font-weight:800; }
.ip-auth-sub { color:var(--muted); font-size:14.5px; margin-top:6px; }
.ip-auth-form .ip-btn-primary { width:100%; margin-top:8px; padding:14px; }
.ip-auth-error { color:var(--red); font-size:13px; font-weight:600; margin:4px 0 10px; padding:11px 13px; background:var(--red-weak); border-radius:var(--r-xs); }

/* ============================ 6 · APP SHELL ===================================== */
#app-shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
#app-shell[hidden]{display:none;}
#app-shell:has(.ip-sidebar[data-collapsed="true"]) { grid-template-columns:var(--sidebar-w-min) 1fr; }

/* sidebar — glass chrome (GPU promoted) */
.ip-sidebar {
  position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border-right:1px solid var(--border); transition:width var(--dur-2) var(--ease); overflow:hidden;
  transform:translateZ(0); will-change:width;
}
.ip-sidebar-brand { display:flex; align-items:center; gap:12px; padding:20px 18px 14px; }
.ip-brand-logo { width:38px; height:38px; border-radius:12px; box-shadow:var(--sh-1); flex:0 0 auto; }
.ip-brand-name { font-size:19px; font-weight:800; letter-spacing:-.02em; flex:1; white-space:nowrap; }
.ip-sidebar-toggle { margin-left:auto; }
.ip-nav { display:flex; flex-direction:column; gap:4px; padding:10px 12px; flex:1; overflow-y:auto; }
.ip-nav-item { position:relative; display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:var(--r-sm); color:var(--text-2); font-weight:600; font-size:14.5px; white-space:nowrap; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ip-nav-item i { font-size:19px; width:22px; text-align:center; flex:0 0 auto; color:var(--muted); transition:color var(--dur) var(--ease); }
.ip-nav-item:hover { background:var(--fill); color:var(--text); }
.ip-nav-item:active { transform:scale(.97); }
.ip-nav-item.is-active { background:var(--accent-weak); color:var(--accent); }
.ip-nav-item.is-active i { color:var(--accent); }
.ip-nav-item.is-active::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:4px; height:20px; border-radius:0 4px 4px 0; background:var(--accent-grad); }
.ip-sidebar-footer { display:flex; align-items:center; gap:8px; padding:12px; border-top:1px solid var(--border); }
.ip-user-chip { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.ip-avatar { width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--accent-grad); color:#fff; font-weight:800; font-size:14px; text-transform:uppercase; box-shadow:var(--sh-1); }
.ip-user-meta { display:flex; flex-direction:column; min-width:0; }
.ip-user-name { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-user-role { font-size:12px; color:var(--muted); }
.ip-sidebar[data-collapsed="true"] .ip-brand-name,
.ip-sidebar[data-collapsed="true"] .ip-nav-item span,
.ip-sidebar[data-collapsed="true"] .ip-user-meta { display:none; }
.ip-sidebar[data-collapsed="true"] .ip-nav-item { justify-content:center; padding:12px; }
.ip-sidebar[data-collapsed="true"] .ip-sidebar-brand,
.ip-sidebar[data-collapsed="true"] .ip-sidebar-footer { justify-content:center; }

.ip-main { display:flex; flex-direction:column; min-width:0; min-height:100vh; }

/* top toolbar — glass chrome */
.ip-topbar {
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  height:var(--topbar-h); padding:0 22px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border); transform:translateZ(0);
}
.ip-view-title { font-size:20px; font-weight:800; white-space:nowrap; }
.ip-topbar-search { display:flex; align-items:center; gap:8px; flex:1; max-width:440px; margin-left:10px; padding:9px 15px; background:var(--fill); border-radius:var(--r-pill); color:var(--muted); transition:box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.ip-topbar-search:focus-within { background:var(--surface); box-shadow:0 0 0 4px var(--accent-ring); }
.ip-topbar-search input { flex:1; border:none; background:transparent; outline:none; color:var(--text); font-size:14px; font-family:inherit; }
.ip-topbar-search input::placeholder { color:var(--faint); }
.ip-topbar-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }

.ip-ticker { display:flex; align-items:center; gap:10px; height:var(--ticker-h); padding:0 22px; overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--border); color:var(--muted); font-size:13px; }
.ip-ticker > i { color:var(--accent); flex:0 0 auto; }
.ip-ticker-track { display:flex; gap:28px; white-space:nowrap; animation:ticker 28s linear infinite; will-change:transform; }
.ip-ticker:hover .ip-ticker-track { animation-play-state:paused; }
.ip-ticker-item { display:inline-flex; align-items:center; gap:6px; }
@keyframes ticker { from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

.ip-view-root { flex:1; padding:24px; overflow-y:auto; outline:none; animation:viewin var(--dur-2) var(--ease); }
@keyframes viewin { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ============================ 7 · SURFACES ===================================== */
.ip-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-1); contain:layout paint; }
.ip-card-glass { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-1); }
.ip-card-pad { padding:20px; }

.ip-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:22px; }
.ip-kpi { position:relative; padding:20px 22px; border-radius:var(--r); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1); contain:layout paint; transition:transform var(--dur) var(--ease); overflow:hidden; }
.ip-kpi::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--sh-hover); opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none; }
.ip-kpi:hover { transform:translateY(-3px); }
.ip-kpi:hover::after { opacity:1; }
.ip-kpi::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-grad); opacity:.9; }
.ip-kpi-label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted); }
.ip-kpi-label i { color:var(--accent); }
.ip-kpi-value { font-size:30px; font-weight:800; letter-spacing:-.03em; margin-top:10px; }
.ip-kpi-trend { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12px; font-weight:700; }
.ip-kpi-trend.up { color:var(--green); } .ip-kpi-trend.down { color:var(--red); }

.ip-section-head { display:flex; align-items:center; gap:12px; margin:10px 0 16px; }
.ip-section-head h3 { font-size:17px; font-weight:800; }
.ip-section-head .ip-spacer, .ip-grow { flex:1; }

.ip-list { display:flex; flex-direction:column; gap:10px; }
.ip-row { position:relative; display:flex; align-items:center; gap:14px; padding:15px 17px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--sh-1); cursor:pointer; contain:layout paint; content-visibility:auto; contain-intrinsic-size:auto 74px; transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ip-row::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--sh-hover); opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none; }
.ip-row:hover { transform:translateY(-2px); border-color:var(--border-2); }
.ip-row:hover::after { opacity:1; }
.ip-row:active { transform:scale(.99); }
.ip-row.is-selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.ip-row-main { flex:1; min-width:0; }
.ip-row-title { font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-row-sub { font-size:13px; color:var(--muted); margin-top:2px; }
.ip-row-amount { font-weight:800; font-size:16px; letter-spacing:-.02em; }

.ip-split { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:18px; align-items:start; }
.ip-split .ip-detail { position:sticky; top:calc(var(--topbar-h) + var(--ticker-h) + 24px); }

.ip-chart { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-1); padding:20px; min-height:260px; position:relative; }
.ip-chart-canvas { width:100%; height:240px; }
.ip-bar { will-change:opacity; }

.ip-combobox { position:relative; }
.ip-combobox-control { display:flex; align-items:center; gap:8px; padding:11px 13px; background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--r-sm); cursor:text; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ip-combobox-control:focus-within { background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.ip-combobox-control input { flex:1; border:none; background:transparent; outline:none; font-size:15px; color:var(--text); font-family:inherit; }
.ip-combobox-add { flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-xs); display:inline-flex; align-items:center; justify-content:center; background:var(--accent-grad); color:#fff; border:none; cursor:pointer; transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.ip-combobox-add:hover { filter:brightness(1.06); } .ip-combobox-add:active { transform:scale(.9); }
.ip-combobox-menu { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; max-height:264px; overflow-y:auto; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--sh-3); animation:pop var(--dur) var(--ease-spring); }
@keyframes pop { from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none} }
.ip-combobox-menu[hidden]{display:none;}
.ip-combobox-option { padding:11px 13px; border-radius:var(--r-xs); cursor:pointer; font-size:14px; }
.ip-combobox-option:hover, .ip-combobox-option.is-active { background:var(--accent-weak); color:var(--accent); }
.ip-combobox-option small { display:block; color:var(--muted); font-size:12px; }

/* ============================ 8 · MOBILE NAV + FAB ============================= */
.ip-bottom-nav { display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; height:calc(var(--bottomnav-h) + var(--safe-b)); padding:0 8px var(--safe-b); align-items:center; justify-content:space-around; background:var(--glass); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border-top:1px solid var(--border); transform:translateZ(0); }
.ip-bnav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1; height:100%; color:var(--muted); font-size:10px; font-weight:700; transition:color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ip-bnav-item i { font-size:22px; }
.ip-bnav-item.is-active { color:var(--accent); }
.ip-bnav-item:active { transform:scale(.88); }
.ip-fab { flex:0 0 auto; width:60px; height:60px; margin-top:-24px; border:none; border-radius:50%; background:var(--accent-grad); color:#fff; font-size:25px; box-shadow:var(--sh-accent); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:transform var(--dur) var(--ease-spring), filter var(--dur) var(--ease); }
.ip-fab:hover { filter:brightness(1.06); } .ip-fab:active { transform:scale(.9); }

/* ============================ 9 · SHEETS / MODALS ============================== */
.ip-modal-root { position:fixed; inset:0; z-index:200; pointer-events:none; }
.ip-modal-root:empty { display:none; }
.ip-sheet-backdrop { position:fixed; inset:0; z-index:200; pointer-events:auto; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,8,16,.42); animation:fade var(--dur) var(--ease); }
@keyframes fade { from{opacity:0} to{opacity:1} }
.ip-sheet-backdrop.is-closing { animation:fadeout var(--dur) var(--ease) both; }
@keyframes fadeout { to{opacity:0} }
.ip-sheet { width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden; animation:sheetin var(--dur-2) var(--ease-spring); }
@keyframes sheetin { from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
.ip-sheet-micro { max-width:410px; }
.ip-sheet-head { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.ip-sheet-title { font-size:18px; font-weight:800; flex:1; }
.ip-sheet-body { padding:20px; overflow-y:auto; }
.ip-sheet-foot { display:flex; gap:10px; justify-content:flex-end; padding:15px 20px; border-top:1px solid var(--border); }
.ip-sheet.is-closing { animation:sheetout var(--dur) var(--ease) both; }
@keyframes sheetout { to{opacity:0; transform:translateY(12px) scale(.98)} }

/* ============================ 10 · TOASTS ===================================== */
.ip-toast-root { position:fixed; top:calc(18px + var(--safe-t)); right:18px; z-index:300; display:flex; flex-direction:column; gap:10px; pointer-events:none; max-width:380px; }
.ip-toast { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; pointer-events:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--sh-3); animation:toastin var(--dur) var(--ease-spring); }
@keyframes toastin { from{opacity:0; transform:translateX(28px)} to{opacity:1; transform:none} }
.ip-toast.is-closing { animation:toastout var(--dur) var(--ease) both; }
@keyframes toastout { to{opacity:0; transform:translateX(28px)} }
.ip-toast-icon { font-size:18px; flex:0 0 auto; margin-top:1px; }
.ip-toast[data-kind="success"] .ip-toast-icon { color:var(--green); }
.ip-toast[data-kind="error"] .ip-toast-icon { color:var(--red); }
.ip-toast[data-kind="info"] .ip-toast-icon { color:var(--accent); }
.ip-toast[data-kind="warning"] .ip-toast-icon { color:var(--amber); }
.ip-toast-body { flex:1; min-width:0; }
.ip-toast-title { font-size:14px; font-weight:700; }
.ip-toast-msg { font-size:13px; color:var(--muted); margin-top:2px; }
.ip-toast-close { flex:0 0 auto; background:none; border:none; color:var(--faint); cursor:pointer; font-size:15px; }

/* ============================ 11 · SKELETON / EMPTY =========================== */
.ip-skel { position:relative; overflow:hidden; border-radius:var(--r-sm); background:var(--fill); }
.ip-skel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--fill-2), transparent); transform:translateX(-100%); animation:shimmer 1.4s infinite; will-change:transform; }
@keyframes shimmer { to{transform:translateX(100%)} }
.ip-skeleton-page { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.ip-skel-kpi { height:118px; } .ip-skel-chart { height:260px; grid-column:1/-1; }
.ip-skel-list { display:flex; flex-direction:column; gap:10px; } .ip-skel-row { height:70px; }

.ip-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 24px; gap:6px; }
.ip-empty-glyph { width:78px; height:78px; border-radius:50%; margin-bottom:12px; display:flex; align-items:center; justify-content:center; background:var(--accent-weak); color:var(--accent); font-size:32px; }
.ip-empty-title { font-size:18px; font-weight:800; }
.ip-empty-sub { color:var(--muted); font-size:14px; max-width:320px; }
.ip-empty .ip-btn { margin-top:16px; }

/* ============================ 12 · RESPONSIVE ================================= */
@media (max-width:900px) {
  #app-shell, #app-shell:has(.ip-sidebar[data-collapsed="true"]) { grid-template-columns:1fr; }
  .ip-mobile-only { display:inline-flex; }
  .ip-quick-new span, .ip-topbar-search { display:none; }
  .ip-sidebar { position:fixed; top:0; left:0; z-index:80; width:min(84vw,300px); height:100vh; transform:translateX(-102%); transition:transform var(--dur-2) var(--ease); box-shadow:var(--sh-3); }
  .ip-sidebar.is-open { transform:translateX(0); }
  .ip-sidebar[data-collapsed="true"] .ip-brand-name,
  .ip-sidebar[data-collapsed="true"] .ip-nav-item span,
  .ip-sidebar[data-collapsed="true"] .ip-user-meta { display:initial; }
  .ip-sidebar-toggle { display:none; }
  .ip-scrim { position:fixed; inset:0; z-index:70; background:rgba(8,8,16,.42); animation:fade var(--dur) var(--ease); }
  .ip-bottom-nav { display:flex; }
  .ip-view-root { padding:16px 16px calc(var(--bottomnav-h) + var(--safe-b) + 22px); }
  .ip-split { grid-template-columns:1fr; }
  .ip-split .ip-detail { position:static; }
  .ip-sheet-backdrop { padding:0; align-items:stretch; }
  .ip-sheet, .ip-sheet-micro { max-width:none; width:100%; max-height:none; height:100%; border-radius:0; border:none; padding-bottom:var(--safe-b); animation:sheetup var(--dur-2) var(--ease); }
  @keyframes sheetup { from{transform:translateY(100%)} to{transform:none} }
  .ip-toast-root { left:12px; right:12px; max-width:none; top:calc(12px + var(--safe-t)); }
}
@media (max-width:560px) {
  .ip-kpi-grid { grid-template-columns:1fr 1fr; }
  .ip-kpi-value { font-size:23px; }
  .ip-view-title { font-size:18px; }
}

/* ============================ 13 · UTILITIES ================================= */
.ip-mt-0{margin-top:0}.ip-mt-1{margin-top:8px}.ip-mt-2{margin-top:16px}.ip-mt-3{margin-top:24px}
.ip-mb-0{margin-bottom:0}.ip-mb-1{margin-bottom:8px}.ip-mb-2{margin-bottom:16px}.ip-mb-3{margin-bottom:24px}
.ip-flex{display:flex}.ip-items-center{align-items:center}.ip-justify-between{justify-content:space-between}
.ip-gap-1{gap:8px}.ip-gap-2{gap:16px}
.ip-muted{color:var(--muted)}.ip-text-tint{color:var(--accent)}.ip-text-red{color:var(--red)}.ip-text-green{color:var(--green)}
.ip-right{text-align:right}.ip-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}