:root {
  color-scheme: dark;
  --bg: #0a0712;
  --panel: rgba(25, 20, 42, .78);
  --panel-strong: #1b152d;
  --stroke: rgba(255, 255, 255, .085);
  --text: #faf8ff;
  --muted: #9d96af;
  --purple: #8b6cff;
  --purple-2: #6b4df5;
  --pink: #f15bb5;
  --cyan: #5de4c7;
  --danger: #ff647c;
  --warning: #ffbf69;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.ambient { position: fixed; z-index: 0; border-radius: 999px; filter: blur(90px); opacity: .22; pointer-events: none; }
.ambient-one { width: 310px; height: 310px; background: var(--purple); top: -130px; right: -120px; }
.ambient-two { width: 260px; height: 260px; background: var(--pink); bottom: 10%; left: -160px; opacity: .12; }

.splash { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; position: relative; z-index: 2; }
.brand-orb { width: 82px; height: 82px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(145deg, #a68cff, #6545eb 62%, #ec5eae); box-shadow: 0 22px 60px rgba(112, 75, 245, .45), inset 0 1px 0 rgba(255,255,255,.4); transform: rotate(-6deg); }
.brand-orb span { font-weight: 900; font-size: 38px; transform: rotate(6deg); }
.splash-title { font-size: 29px; font-weight: 850; letter-spacing: -.04em; margin-top: 12px; }
.splash-subtitle { color: var(--muted); font-size: 14px; }
.loader { display: flex; gap: 5px; margin-top: 18px; }
.loader i { width: 6px; height: 6px; border-radius: 99px; background: var(--purple); animation: pulse 1.1s infinite ease-in-out; }
.loader i:nth-child(2) { animation-delay: .14s; }.loader i:nth-child(3) { animation-delay: .28s; }
@keyframes pulse { 0%,70%,100%{opacity:.28;transform:translateY(0)} 35%{opacity:1;transform:translateY(-5px)} }

.app { position: relative; z-index: 1; max-width: 720px; min-height: 100vh; margin: 0 auto; padding-bottom: calc(92px + var(--safe-bottom)); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 13px; background: linear-gradient(180deg, rgba(10,7,18,.96) 65%, rgba(10,7,18,0)); backdrop-filter: blur(18px); }
.topbar h1 { margin: 2px 0 0; font-size: 27px; line-height: 1.05; letter-spacing: -.04em; }
.eyebrow { color: var(--purple); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.avatar { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: linear-gradient(145deg, rgba(139,108,255,.92), rgba(241,91,181,.75)); font-size: 15px; font-weight: 850; box-shadow: 0 10px 28px rgba(111,72,244,.28); }
.content { padding: 10px 16px 26px; }

.hero { position: relative; overflow: hidden; padding: 22px; min-height: 180px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: radial-gradient(circle at 90% 10%, rgba(241,91,181,.28), transparent 36%), linear-gradient(145deg, rgba(120,85,255,.34), rgba(25,20,42,.88) 55%); box-shadow: var(--shadow); }
.hero:after { content:""; position:absolute; width:170px; height:170px; right:-55px; bottom:-75px; border:24px solid rgba(255,255,255,.04); border-radius:50%; }
.hero-label { color: #d5caff; font-size: 12px; font-weight: 750; }
.hero-value { font-size: 38px; font-weight: 900; letter-spacing: -.055em; margin: 8px 0 4px; }
.hero-copy { max-width: 260px; color: #c2bbd2; font-size: 13px; line-height: 1.45; }
.hero .button { margin-top: 18px; width: auto; }

.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 24px 3px 12px; }
.section-head h2 { margin:0; font-size:18px; letter-spacing:-.025em; }
.section-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.text-button { border:0; background:transparent; color:#bbaaff; padding:7px 0; font-weight:750; font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.metric { padding:17px; border:1px solid var(--stroke); border-radius:21px; background:var(--panel); backdrop-filter:blur(20px); }
.metric-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:rgba(139,108,255,.14); color:#c8bbff; margin-bottom:17px; }
.metric-value { font-size:22px; font-weight:850; letter-spacing:-.04em; }
.metric-label { margin-top:4px; color:var(--muted); font-size:12px; }
.finance-period { margin-top:14px; }
.finance-period .metric { padding:13px; background:rgba(255,255,255,.025); }
.status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.status-grid div { display:flex; flex-direction:column; gap:3px; }
.status-grid strong { font-size:20px; }
.status-grid span { color:var(--muted); font-size:11px; }
.client-finance { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin-top:15px; padding-top:14px; border-top:1px solid var(--stroke); }
.client-finance span { display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:10px; }
.client-finance strong { color:var(--text); font-size:13px; }

.card { border:1px solid var(--stroke); border-radius:22px; background:var(--panel); backdrop-filter:blur(20px); padding:17px; box-shadow:0 12px 35px rgba(0,0,0,.12); }
.card + .card { margin-top:10px; }
.card-row { display:flex; gap:13px; align-items:center; }
.card-main { min-width:0; flex:1; }
.card-title { font-size:15px; font-weight:790; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-sub { color:var(--muted); font-size:12px; line-height:1.45; margin-top:4px; }
.icon-box { width:43px; height:43px; flex:none; display:grid; place-items:center; border-radius:15px; font-size:18px; background:linear-gradient(145deg,rgba(139,108,255,.2),rgba(241,91,181,.09)); border:1px solid rgba(255,255,255,.07); }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:99px; background:rgba(93,228,199,.1); color:var(--cyan); font-size:10px; font-weight:800; }
.badge.off { background:rgba(255,100,124,.1); color:#ff8799; }
.badge.wait { background:rgba(255,191,105,.1); color:var(--warning); }
.dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

.button { min-height:46px; width:100%; border:0; border-radius:15px; padding:0 17px; background:linear-gradient(135deg,var(--purple),var(--purple-2)); font-weight:800; box-shadow:0 13px 30px rgba(107,77,245,.25); }
.button:disabled { opacity:.5; box-shadow:none; }
.button.secondary { background:rgba(255,255,255,.07); box-shadow:none; border:1px solid rgba(255,255,255,.08); }
.button.danger { color:#ff8fa0; background:rgba(255,100,124,.1); box-shadow:none; }
.button.small { min-height:36px; width:auto; padding:0 13px; border-radius:12px; font-size:12px; }
.fab { position:fixed; right:max(20px,calc((100vw - 690px)/2)); bottom:calc(90px + var(--safe-bottom)); z-index:21; width:54px; height:54px; border:0; border-radius:19px; background:linear-gradient(145deg,var(--pink),var(--purple)); font-size:27px; box-shadow:0 16px 45px rgba(211,75,176,.35); }

.form-card { padding:20px; border:1px solid var(--stroke); border-radius:25px; background:var(--panel); }
.field { margin-bottom:15px; }
.field label { display:block; color:#c9c2d6; font-size:12px; font-weight:700; margin:0 3px 8px; }
.input, .textarea, .select { width:100%; border:1px solid rgba(255,255,255,.09); outline:0; color:var(--text); background:rgba(5,3,12,.55); border-radius:15px; padding:13px 14px; transition:.2s border,.2s box-shadow; }
.input:focus, .textarea:focus, .select:focus { border-color:rgba(139,108,255,.7); box-shadow:0 0 0 4px rgba(139,108,255,.09); }
.textarea { resize:vertical; min-height:150px; line-height:1.5; }
.select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#9e95b2 50%),linear-gradient(135deg,#9e95b2 50%,transparent 50%); background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px; background-size:5px 5px; background-repeat:no-repeat; }
.range-line { display:grid; grid-template-columns:1fr 48px; gap:12px; align-items:center; }
.range-line input[type=range] { width:100%; accent-color:var(--purple); }
.checkbox { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:12px; line-height:1.45; }
.checkbox input { accent-color:var(--purple); margin-top:2px; }
.hint { color:var(--muted); font-size:11px; line-height:1.5; margin-top:7px; }
.helper-tools { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 10px; }
.helper-chip { min-height:31px; border:1px solid rgba(139,108,255,.24); border-radius:10px; padding:0 10px; background:rgba(139,108,255,.1); color:#d8ceff; font-size:11px; font-weight:720; }
.assignment-all { padding:11px; border:1px solid rgba(139,108,255,.2); border-radius:13px; background:rgba(139,108,255,.08); }
.assignment-list { display:grid; gap:8px; margin-top:9px; max-height:180px; overflow:auto; }
.assignment-option { padding:9px 11px; border:1px solid var(--stroke); border-radius:12px; background:rgba(255,255,255,.025); }
.assignment-option small { display:block; color:var(--muted); margin-top:2px; }

.segmented { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:5px; padding:5px; margin-bottom:15px; background:rgba(255,255,255,.045); border:1px solid var(--stroke); border-radius:17px; overflow:auto; }
.segment { min-width:max-content; border:0; border-radius:12px; padding:10px 12px; background:transparent; color:var(--muted); font-size:12px; font-weight:760; }
.segment.active { background:rgba(139,108,255,.18); color:#e9e3ff; box-shadow:inset 0 0 0 1px rgba(139,108,255,.16); }

.audio-result { margin-top:17px; padding:17px; border:1px solid rgba(93,228,199,.18); border-radius:21px; background:linear-gradient(145deg,rgba(93,228,199,.1),rgba(25,20,42,.8)); }
.audio-result audio { width:100%; margin:14px 0 8px; }
.wave { display:flex; gap:3px; align-items:center; height:28px; }
.wave i { width:3px; height:10px; border-radius:9px; background:var(--cyan); animation:wave .9s infinite ease-in-out; }
.wave i:nth-child(2n){height:22px;animation-delay:.1s}.wave i:nth-child(3n){height:16px;animation-delay:.2s}
@keyframes wave{50%{transform:scaleY(.45);opacity:.45}}

.empty { text-align:center; padding:38px 22px; border:1px dashed rgba(255,255,255,.11); border-radius:23px; color:var(--muted); }
.empty-icon { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 13px; border-radius:19px; background:rgba(139,108,255,.1); font-size:23px; }
.empty strong { display:block; color:var(--text); margin-bottom:5px; }
.skeleton { min-height:112px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.085),rgba(255,255,255,.04)); background-size:200% 100%; animation:shine 1.3s infinite; border-radius:22px; }
@keyframes shine{to{background-position:-200% 0}}

.bottom-nav { position:fixed; z-index:30; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,720px); display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:8px 10px calc(8px + var(--safe-bottom)); background:rgba(14,10,24,.93); border-top:1px solid rgba(255,255,255,.07); backdrop-filter:blur(25px); }
.nav-item { min-height:56px; border:0; border-radius:16px; display:grid; place-items:center; align-content:center; gap:4px; background:transparent; color:#817a91; font-size:10px; font-weight:760; }
.nav-icon { font-size:19px; line-height:1; }
.nav-item.active { color:#d9d0ff; background:rgba(139,108,255,.11); }

.modal-backdrop { position:fixed; z-index:100; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-top:50px; background:rgba(0,0,0,.62); backdrop-filter:blur(7px); animation:fade .18s ease; }
.modal { width:min(100%,720px); max-height:92vh; overflow:auto; padding:10px 18px calc(24px + var(--safe-bottom)); border-radius:28px 28px 0 0; background:#171222; border:1px solid rgba(255,255,255,.09); animation:sheet .25s ease; }
.modal-grip { width:42px; height:4px; border-radius:10px; background:rgba(255,255,255,.16); margin:2px auto 18px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modal-head h2 { margin:0; font-size:21px; letter-spacing:-.035em; }
.close { width:36px; height:36px; border:0; border-radius:12px; background:rgba(255,255,255,.07); color:var(--muted); }
@keyframes fade{from{opacity:0}} @keyframes sheet{from{transform:translateY(30px);opacity:.4}}

.toast-root { position:fixed; z-index:200; top:calc(14px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); width:min(calc(100% - 28px),680px); pointer-events:none; }
.toast { margin-bottom:8px; padding:13px 15px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(29,23,45,.96); box-shadow:var(--shadow); font-size:13px; animation:toast-in .2s ease; }
.toast.error { border-color:rgba(255,100,124,.25); color:#ffb1bd; }
@keyframes toast-in{from{transform:translateY(-12px);opacity:0}}
.spinner { width:19px; height:19px; display:inline-block; vertical-align:middle; border:2px solid rgba(255,255,255,.25); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}

@media (min-width:640px) {
  .content { padding-left:24px; padding-right:24px; }
  .metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .modal { border-radius:28px; margin:auto; max-height:86vh; }
  .modal-backdrop { align-items:center; padding:24px; }
}