:root{--canvas:#f8f4ed;--paper:#fffdfa;--paper-2:#f5f0e8;--ink:#211914;--ink-2:#544a43;--muted:#958a81;--line:#e2d9cf;--mark:#c45134;--mark-soft:#fce9e3;--green:#3f8f5d;--green-soft:#e7f4eb;--amber:#ad7414;--amber-soft:#fbf0d5;--red:#c84943;--red-soft:#fbe8e6;--shadow:0 14px 45px rgba(75,56,39,.08);--font:"IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;--display:"Tajawal",system-ui,sans-serif}
.demo-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
*{box-sizing:border-box}html{direction:rtl}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-variant-numeric:tabular-nums;line-height:1.55}button,a{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none}.demo-ribbon{position:fixed;inset:0 0 auto;z-index:100;height:42px;padding:0 28px;background:#211914;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:12px}.demo-ribbon>div{display:flex;align-items:center;gap:9px}.demo-ribbon>div>span:last-child{color:#c9beb5}.demo-ribbon-dot{width:7px;height:7px;border-radius:50%;background:#ff896f;box-shadow:0 0 0 4px rgba(255,137,111,.15)}.demo-ribbon a{color:#ffd0c4;font-weight:700}.demo-app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;padding-top:42px}.demo-sidebar{position:sticky;top:42px;height:calc(100vh - 42px);border-inline-start:1px solid var(--line);padding:28px 24px 22px;display:flex;flex-direction:column;background:rgba(248,244,237,.96)}.demo-brand{display:block;padding:0 8px 20px;border-bottom:1px solid var(--line)}.demo-brand img{display:block;width:110px;height:auto}.demo-brand>span{display:block;color:var(--muted);font-size:10px;letter-spacing:.16em;margin-top:-7px}.demo-nav{display:grid;gap:2px;padding:18px 0;flex:1}.demo-nav-item{position:relative;width:100%;border:0;background:transparent;border-radius:8px;padding:9px 11px;display:grid;grid-template-columns:20px 22px 1fr;gap:10px;align-items:center;text-align:right;color:var(--ink-2)}.demo-nav-item:hover{background:rgba(255,255,255,.55)}.demo-nav-item.is-active{background:var(--mark-soft);color:var(--ink);font-weight:700}.demo-nav-item.is-active:after{content:"";position:absolute;inset-inline-end:-24px;width:3px;height:22px;border-radius:5px;background:var(--mark)}.nav-number{font:10px "IBM Plex Mono",monospace;color:#aea39a}.nav-icon{font-size:17px;color:#83776f}.demo-profile{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,253,250,.65)}.demo-avatar{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eadff3;color:#63407b;font-weight:800}.demo-profile strong,.demo-profile span{display:block}.demo-profile strong{font-size:13px}.demo-profile div span{font-size:10px;color:var(--muted)}.profile-arrow{color:#b0a69f}.demo-subscribe{margin-top:9px;border-radius:10px;background:var(--ink);color:white;text-align:center;padding:10px;font-size:12px;font-weight:700}.demo-legal{display:flex;gap:7px;justify-content:center;margin-top:12px;color:var(--muted);font-size:10px}.demo-main{min-width:0;padding:0 46px 64px}.demo-topbar{min-height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:22px}.demo-topbar>div:first-child span{display:block}.demo-date{font-size:11px;color:var(--muted)}.demo-greeting{font-size:14px;font-weight:700;margin-top:2px}.demo-quick{display:flex;align-items:center;gap:22px}.demo-quick>span{padding-inline-start:22px;border-inline-start:1px solid var(--line)}.demo-quick small,.demo-quick b{display:block}.demo-quick small{font-size:9px;color:var(--muted)}.demo-quick b{font-size:12px}.demo-quick button{position:relative;border:1px solid var(--line);background:var(--paper);width:36px;height:36px;border-radius:10px}.demo-quick i{position:absolute;top:-5px;inset-inline-start:-5px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:var(--mark);color:#fff;font-size:9px;font-style:normal}.demo-content{max-width:1300px;margin:0 auto;padding-top:34px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}.page-kicker{color:var(--mark);font-size:10px;font-weight:700;letter-spacing:.08em}.page-head h1{font:800 clamp(34px,5vw,66px)/1 var(--display);letter-spacing:-.045em;margin:5px 0 9px}.page-head p{margin:0;color:var(--muted);font-size:12px}.btn{border-radius:10px;padding:10px 15px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:12px}.btn-primary{background:var(--mark);border-color:var(--mark);color:#fff}.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}.alert-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid #efb3a4;background:#fff0eb;border-radius:14px;margin-bottom:18px}.alert-icon{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--mark);color:#fff;font-weight:800}.alert-card div:nth-child(2){flex:1}.alert-card strong,.alert-card span{display:block}.alert-card strong{font-size:13px}.alert-card span{font-size:10px;color:#7f685f;margin-top:2px}.summary-grid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:12px;margin-bottom:28px}.summary-card{min-height:138px;padding:18px;border:1px solid var(--line);border-radius:15px;background:rgba(255,253,250,.76)}.summary-card small{color:var(--muted);font-size:10px}.summary-card b{display:block;font:800 27px var(--display);margin:14px 0 3px}.summary-card.hero-metric{background:var(--ink);color:white;border-color:var(--ink);position:relative;overflow:hidden}.summary-card.hero-metric:after{content:"";position:absolute;width:120px;height:120px;border:28px solid rgba(255,255,255,.05);border-radius:50%;left:-42px;bottom:-48px}.summary-card.hero-metric small{color:#cbbfb6}.summary-card.hero-metric b{font-size:36px}.metric-note{font-size:10px;color:var(--muted)}.mini-progress,.progress{height:5px;background:#e9e1d8;border-radius:10px;overflow:hidden}.mini-progress{margin-top:15px}.mini-progress i,.progress i{display:block;height:100%;background:var(--mark);border-radius:inherit}.section-title{display:flex;justify-content:space-between;align-items:center;margin:28px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}.section-title h2{font:700 19px var(--display);margin:0}.section-title span{font-size:10px;color:var(--muted)}.payment-list{display:grid}.payment-row{display:grid;grid-template-columns:56px minmax(180px,1fr) 140px 110px auto;gap:18px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--line)}.payment-date b,.payment-date small{display:block}.payment-date b{font:800 24px var(--display)}.payment-date small,.payment-main span{color:var(--muted);font-size:10px}.payment-main strong,.payment-main span{display:block}.payment-main strong{font-size:13px}.payment-amount{font-weight:800}.status{display:inline-flex;width:max-content;border-radius:30px;padding:4px 9px;font-size:10px;font-weight:700}.status.late{background:var(--red-soft);color:var(--red)}.status.soon{background:var(--amber-soft);color:var(--amber)}.status.done{background:var(--green-soft);color:var(--green)}.row-action{border:1px solid var(--line);background:transparent;border-radius:8px;padding:7px 11px;font-size:10px}.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.obligation-card,.plan-card,.debt-card,.advisor-card,.chart-card,.calendar-card{border:1px solid var(--line);border-radius:16px;background:rgba(255,253,250,.82);padding:19px}.obligation-card{position:relative;overflow:hidden}.obligation-card:before{content:"";position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;background:var(--mark)}.card-top{display:flex;justify-content:space-between;gap:12px}.card-icon{width:42px;height:42px;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;font-size:19px}.card-top h3{margin:7px 0 1px;font-size:14px}.card-top p{margin:0;color:var(--muted);font-size:10px}.progress{margin:20px 0 12px}.card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.card-stats>div+div{border-inline-start:1px solid var(--line);padding-inline-start:10px}.card-stats small,.card-stats b{display:block}.card-stats small{font-size:9px;color:var(--muted)}.card-stats b{font-size:12px;margin-top:3px}.card-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.debt-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.debt-summary .summary-card{min-height:110px}.debt-list{display:grid;gap:8px}.debt-row{display:grid;grid-template-columns:45px 1fr auto auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.debt-row .demo-avatar{width:38px;height:38px}.debt-row small{display:block;color:var(--muted);font-size:9px}.debt-row b{font-size:13px}.chart-card{min-height:330px}.bars{height:210px;display:flex;align-items:flex-end;gap:12px;padding-top:25px;border-bottom:1px solid var(--line)}.bar{flex:1;min-width:18px;height:var(--h);background:#e1d9d0;border-radius:7px 7px 0 0;position:relative}.bar.hot{background:var(--mark)}.bar span{position:absolute;top:calc(100% + 8px);inset-inline:0;text-align:center;color:var(--muted);font-size:9px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:13px;overflow:hidden}.calendar-day{min-height:82px;padding:8px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px}.calendar-day:nth-child(7n){border-inline-start:0}.calendar-day.muted{color:#c1b8b0}.calendar-day.today{background:var(--mark-soft);color:var(--mark);font-weight:800}.calendar-event{display:block;margin-top:9px;padding:3px;border-radius:4px;background:var(--amber-soft);color:var(--amber);font-size:8px}.advisor-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px}.advisor-card h2{font-size:18px;margin:0 0 7px}.advisor-card p{color:var(--muted);font-size:11px;margin:0 0 17px}.question-list{display:grid;gap:7px}.question-list button{border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:11px;text-align:right;font-size:11px}.chat-window{min-height:360px;display:flex;flex-direction:column}.chat-bubble{max-width:83%;padding:13px 15px;border-radius:14px;font-size:12px;line-height:1.8}.chat-bubble.user{align-self:flex-start;background:var(--mark);color:#fff;border-bottom-left-radius:4px}.chat-bubble.ai{align-self:flex-end;background:var(--paper-2);border:1px solid var(--line);border-bottom-right-radius:4px;margin-top:12px}.chat-bubble b{color:var(--green)}.chat-input{margin-top:auto;display:flex;gap:8px;padding-top:20px}.chat-input input{flex:1;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:11px 13px;font:inherit}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.plan-card{display:flex;flex-direction:column;min-height:270px}.plan-card .card-icon{margin-bottom:15px}.plan-card h3{margin:0;font-size:15px}.plan-card>p{color:var(--muted);font-size:10px}.plan-card .progress{margin-top:auto}.plan-progress{display:flex;justify-content:space-between;font-size:11px}.plan-foot{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.plan-foot small,.plan-foot b{display:block}.plan-foot small{color:var(--muted);font-size:8px}.plan-foot b{font-size:11px}.empty-note{text-align:center;color:var(--muted);padding:80px 20px}.demo-toast{position:fixed;z-index:200;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;border-radius:30px;padding:10px 17px;font-size:11px;opacity:0;pointer-events:none;transition:.2s}.demo-toast.is-visible{opacity:1;transform:translate(-50%,0)}.demo-mobile-nav{display:none}
.filter-chips,.debt-tabs,.debt-tools,.stats-controls{display:flex;align-items:center;gap:6px;margin-bottom:18px}.filter-chips button,.debt-tabs button,.debt-tools button,.stats-controls>button{border:1px solid var(--line);background:transparent;border-radius:30px;padding:7px 12px;font-size:10px;color:var(--muted)}.filter-chips button.is-active,.debt-tabs button.is-active,.debt-tools button.is-active,.stats-controls button.is-active{background:var(--paper);color:var(--ink);font-weight:700}.stats-controls{justify-content:flex-end}.obligation-group-title{display:flex;align-items:center;gap:8px;margin:22px 0 4px;padding:0 4px 9px;border-bottom:1px solid var(--line);color:var(--mark)}.obligation-group-title span{min-width:20px;height:20px;border-radius:20px;display:grid;place-items:center;background:var(--mark-soft);font-size:9px}.obligation-list{display:grid}.obligation-row{display:grid;grid-template-columns:48px minmax(240px,1fr) 110px 120px 120px 145px;gap:14px;align-items:center;padding:17px 4px;border-bottom:1px solid var(--line)}.obligation-id>div{display:flex;gap:6px;align-items:center}.obligation-id strong{font-size:13px;margin-inline-end:4px}.obligation-id>small,.obligation-id>em{display:block;color:var(--muted);font-size:9px;font-style:normal}.obligation-id .progress{height:4px;margin:10px 0 4px}.obligation-number{padding-inline-start:13px;border-inline-start:1px solid var(--line)}.obligation-number small,.obligation-number b{display:block}.obligation-number small{color:var(--muted);font-size:8px}.obligation-number b{font-size:11px;margin-top:4px}.obligation-actions{display:flex;gap:7px;justify-content:flex-end}.obligation-actions .btn{padding:8px 10px}.debt-notice{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:11px;margin-bottom:18px}.debt-notice span{color:var(--muted)}.debt-tabs{border-bottom:1px solid var(--line)}.debt-tabs button{border:0;border-radius:0;padding:10px 2px;margin-inline-end:20px;font-size:15px}.debt-tabs button.is-active{background:transparent;border-bottom:2px solid var(--mark)}.debt-tabs button b{color:var(--mark);font-size:10px}.debt-tools{margin-bottom:10px}.debt-ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.debt-ledger>section{border:1px solid var(--line);border-radius:16px;background:rgba(255,253,250,.78);overflow:hidden}.debt-ledger>section:first-child{border-top:3px solid var(--green)}.debt-ledger>section:last-child{border-top:3px solid var(--red)}.debt-ledger>section>header{display:flex;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}.debt-ledger header strong,.debt-ledger header small{display:block}.debt-ledger header small{font-size:9px;color:var(--muted)}.debt-entry{display:grid;grid-template-columns:40px 1fr auto auto;gap:10px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}.debt-entry:last-child{border-bottom:0}.debt-entry small{display:block;font-size:9px;color:var(--muted)}.debt-entry strong{font-size:11px}.advisor-balance{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:var(--ink);color:#fff;border-radius:14px;margin-bottom:12px}.advisor-balance small,.advisor-balance b{display:block}.advisor-balance small{color:#c8beb6;font-size:9px}.advisor-balance b{font-size:22px}.advisor-balance>span{font-size:10px;color:#c8beb6}.advisor-vitals{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-bottom:24px}.advisor-vitals>div{padding:14px;border-inline-start:1px solid var(--line)}.advisor-vitals>div:last-child{border:0}.advisor-vitals small,.advisor-vitals b{display:block}.advisor-vitals small{font-size:8px;color:var(--muted)}.advisor-vitals b{font-size:13px;margin-top:5px}.advisor-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.advisor-tools>button{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:13px;display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;text-align:right}.advisor-tools>button.is-active{border-color:#e49a87;background:var(--mark-soft)}.advisor-tools i{width:32px;height:32px;border-radius:9px;background:var(--paper-2);display:grid;place-items:center;font-style:normal}.advisor-tools b,.advisor-tools small{display:block}.advisor-tools b{font-size:11px}.advisor-tools small{font-size:8px;color:var(--muted)}.advisor-tools em{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;font-style:normal;font-size:8px}.advisor-tool-preview{display:grid;grid-template-columns:42px 1fr;gap:13px;margin-top:12px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.advisor-tool-number{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--mark);color:#fff;font-weight:800}.advisor-tool-preview h2{font-size:16px;margin:0 0 5px}.advisor-tool-preview p{font-size:10px;color:var(--muted);margin:0 0 14px}
@media(max-width:1050px){.demo-main{padding-inline:28px}.summary-grid{grid-template-columns:repeat(2,1fr)}.plans-grid{grid-template-columns:repeat(2,1fr)}.payment-row{grid-template-columns:48px 1fr 110px auto}.payment-row .status{display:none}.obligation-row{grid-template-columns:44px minmax(200px,1fr) 100px 110px 135px}.obligation-number:nth-of-type(4){display:none}.advisor-tools{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){body{padding-bottom:74px}.demo-ribbon{height:38px;padding-inline:14px}.demo-ribbon>div>span:last-child{display:none}.demo-app{display:block;padding-top:38px}.demo-sidebar{display:none}.demo-main{padding:0 15px 30px}.demo-topbar{min-height:66px}.demo-greeting{font-size:13px}.demo-quick>span{display:none}.demo-content{padding-top:22px}.page-head{align-items:flex-start;margin-bottom:20px}.page-head h1{font-size:38px}.page-head .btn{width:42px;height:42px;font-size:0;padding:0}.page-head .btn:after{content:"+";font-size:22px}.alert-card{align-items:flex-start;padding:13px}.alert-card .btn{display:none}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.summary-card{min-height:120px;padding:14px}.summary-card.hero-metric{grid-column:1/-1}.summary-card b{font-size:22px}.payment-row{grid-template-columns:42px 1fr auto;gap:10px;padding:13px 2px}.payment-amount{font-size:11px}.payment-row .row-action{display:none}.cards-grid,.debt-summary,.advisor-layout,.plans-grid{grid-template-columns:1fr}.card-stats{gap:4px}.advisor-layout{display:flex;flex-direction:column}.advisor-layout>.advisor-card:first-child{order:2}.chat-window{min-height:390px}.calendar-card{padding:10px}.calendar-day{min-height:58px;padding:5px}.calendar-event{font-size:0;width:6px;height:6px;border-radius:50%;padding:0}.bars{gap:7px}.demo-mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);inset:auto 0 0;z-index:90;height:70px;padding:6px 4px max(6px,env(safe-area-inset-bottom));background:rgba(255,253,250,.97);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(50,35,25,.06)}.demo-mobile-nav button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;align-content:center;gap:2px;font-size:9px}.demo-mobile-nav button span{font-size:18px;line-height:1}.demo-mobile-nav button.is-active{color:var(--mark);font-weight:700}.demo-toast{bottom:84px}}
@media(max-width:390px){.summary-grid{grid-template-columns:1fr}.summary-card.hero-metric{grid-column:auto}.page-head h1{font-size:34px}.card-stats{grid-template-columns:1fr 1fr}.card-stats>div:nth-child(3){display:none}}
@media(max-width:760px){.obligation-row{grid-template-columns:42px 1fr auto;padding:14px 2px}.obligation-number{display:none}.obligation-actions .row-action{display:none}.obligation-actions .btn{font-size:0;width:38px;height:38px;padding:0}.obligation-actions .btn:after{content:"✓";font-size:14px}.filter-chips,.stats-controls{overflow:auto;padding-bottom:5px}.debt-ledger{grid-template-columns:1fr}.debt-entry{grid-template-columns:38px 1fr auto}.debt-entry .row-action{display:none}.advisor-vitals{grid-template-columns:repeat(2,1fr)}.advisor-vitals>div{border-bottom:1px solid var(--line)}.advisor-tools{grid-template-columns:1fr 1fr}.advisor-tools>button{grid-template-columns:28px 1fr auto;padding:10px}}