@import url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/css/kalameh.css');

:root{
  --bg:#f7f5f2;--bg-2:#fff;--bg-3:#faf7f4;
  --surface:#fff;--surface-2:#f4efea;--surface-3:#e9e2db;
  --line:#e8e1da;--line-strong:#d8cfc6;
  --white:#292522;--muted:#625e5a;--muted-2:#77716b;
  --red:#c84736;--red-2:#ad3529;--red-3:#9b392e;
  --red-glow:rgba(200,71,54,.22);--red-soft:rgba(200,71,54,.09);
  --amber:#93620d;--amber-soft:rgba(202,145,35,.12);
  --success:#168458;--success-soft:rgba(22,132,88,.1);
  --radius-xs:10px;--radius-sm:14px;--radius:20px;--radius-lg:26px;
}

html,body{min-height:100%;background:var(--bg);color:var(--white);font-family:'Kalameh',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif!important}
button,input,select,textarea{font:inherit!important}
body{background:radial-gradient(500px 340px at 95% 0%,rgba(200,71,54,.07),transparent 68%),var(--bg);user-select:text;overscroll-behavior-y:auto}
#app{max-width:560px;background:transparent}
header.top{background:rgba(247,245,242,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(216,207,198,.55);padding:12px 18px 10px}
.brand{font-size:18px;letter-spacing:.1px;color:#292522}
.brand .dot{background:var(--red);box-shadow:0 0 12px var(--red-glow)}
.ble-pill{min-height:42px;padding:7px 13px;background:#fff;border-color:var(--line);color:#625e5a;font-size:13px}
.ble-pill.connected{color:#146b48;background:#e8f4ee;border-color:#c8e5d5}
.ble-pill.connecting{color:#80560c;background:#faf1df;border-color:#ead9ae}
main{padding:10px 18px 28px}
.home-intro{position:relative;overflow:hidden;margin:8px 0 18px;padding:20px 19px;border:1px solid #eadbd4;border-radius:24px;background:linear-gradient(125deg,#fff 15%,#fbf0eb 100%);box-shadow:0 16px 36px -30px rgba(95,50,37,.36)}
.home-intro::after{content:"";position:absolute;inset-inline-end:-28px;top:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(200,71,54,.15),transparent 70%);pointer-events:none}
.home-intro h1{position:relative;margin:0 0 5px;font-size:21px;line-height:1.45;font-weight:800;letter-spacing:-.02em}
.home-intro p{position:relative;margin:0;color:#625e5a;font-size:13px;line-height:1.8}
.tabs{gap:8px;padding:4px 0 14px}
.tab{min-height:44px;padding:8px 15px;background:#fff;border-color:var(--line);color:#625e5a;font-size:13px}
.tab.active{background:#b94333;border-color:#b94333;color:#fff;box-shadow:0 7px 18px -9px rgba(173,53,41,.6)}
.grid{gap:9px}
.card{min-height:78px;padding:7px 4px;background:#fff;border-color:var(--line);border-radius:17px;box-shadow:0 7px 22px -20px rgba(49,36,25,.45);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.card:hover{background:#fff;border-color:#d6b5ad;box-shadow:0 12px 22px -19px rgba(98,51,38,.4)}
.card:active{transform:scale(.97)}
.card.preview{background:#fff7f4;border-color:#c84736;box-shadow:0 0 0 2px rgba(200,71,54,.08)}
.card .icon{width:34px;height:34px;border-radius:12px;background:#f8ece8;color:#a83b30}
.card.preview .icon{background:#bd4a39;color:#fff}
.card .label{font-size:11px;line-height:1.45;color:#514b46}
.card.preview .label{color:#292522}
@media(min-width:420px){.grid{gap:11px}.card{gap:8px;padding:11px 7px;border-radius:19px}.card .icon{width:42px;height:42px;border-radius:14px}.card .icon svg{width:23px;height:23px}.card .label{font-size:12px;line-height:1.5}}
.preview-panel{min-height:96px;padding:16px 17px;margin-bottom:13px;background:#fff;border-color:var(--line);box-shadow:0 9px 28px -24px rgba(49,36,25,.35)}
.preview-panel.empty{border-style:dashed;color:#77716b;background:#faf8f5}
.preview-panel h3,.card .info h3{color:#292522}
.preview-panel p,.card .info p{color:#625e5a}
.preview-meta span{background:#f8f5f1;border-color:var(--line);color:#625e5a}
.preview-meta span b{color:#a83b30}
.preview-cta{min-height:46px;background:linear-gradient(135deg,#cf5947,#ad3529);font-size:14px}
.detail-hero{background:linear-gradient(145deg,#fff 10%,#fbf0eb 100%);border-color:#eadbd4;box-shadow:0 14px 34px -28px rgba(94,49,36,.38)}
.detail-hero h1,.back-row h2,.done-wrap h2{color:#292522}
.detail-hero p{color:#625e5a}
.detail-hero .icon svg{color:#aa3b30}
.evidence{color:#80560c;background:#faf1df}
.param-box,.chan-pill{background:#fff;border-color:var(--line);box-shadow:0 8px 24px -22px rgba(49,36,25,.38)}
.param-label,.param-row{color:#393430}
.param-value{color:#a83b30}
input[type=range]{height:7px;background:#e5ddd5;touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{width:24px;height:24px;background:#b94333;border:3px solid #fff;box-shadow:0 2px 8px rgba(120,48,37,.32)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#b94333;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(120,48,37,.32)}
.mini-info,.safety-note{color:#625e5a}
.mini-info b,.safety-note b{color:#292522}
.safety-note{background:#fff;border-color:#d8cfc6}
.btn{min-height:50px;padding:14px 16px;border-radius:15px;font-size:15px;touch-action:manipulation}
.btn-primary{background:linear-gradient(135deg,#cf5947,#ad3529);box-shadow:0 10px 24px -10px rgba(173,53,41,.42)}
.btn-ghost{background:#fff;color:#393430;border-color:var(--line-strong)}
.btn:focus-visible,.tab:focus-visible,.card:focus-visible,.ble-pill:focus-visible,.icon-btn:focus-visible{outline:3px solid #bd4a39;outline-offset:3px}
.icon-btn{width:44px;height:44px;background:#fff;border-color:var(--line);color:#393430}
.session-wrap{padding-top:24px}
.session-title,.ring-sub,.chan-pill .l{color:#625e5a}
.session-name{color:#292522}
.ring-bg{stroke:#e9e2db}
.ring-fg{stroke:url(#gradRed)}
.chan-pill .v{color:#292522}
.session-actions .btn{font-size:13px}
.done-check{background:#e8f4ee;border-color:#92c9aa;color:#168458}
.done-wrap p{color:#625e5a}
.toast{background:#292522;border-color:#403a35;color:#fff;box-shadow:0 12px 30px -12px rgba(49,36,25,.34)}
.disclaimer-box{background:#fff;border-color:var(--line);color:#625e5a}
.disclaimer-box b{color:#292522}
.install-banner{background:#fff;border-color:var(--line);color:#514b46}
.install-banner button{min-height:42px;background:#b94333}
.compat-note,.foot{color:#77716b}
::selection{background:#d96753;color:#fff}
@media(max-width:360px){main{padding-inline:14px}.grid{gap:6px}.card .label{font-size:10.5px}.card{padding-inline:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}