/* ماه سلامت | قاب گوشی، صفحه‌های اپ، داشبوردها
   صفحه‌های داخل گوشی همیشه روشن‌اند (اپ تم خودش را دارد)، جز صفحه قفل و تماس. */

/* ---------- قاب گوشی ---------- */
.phone{width:300px;flex:0 0 auto;position:relative;
  --a-bg:#F3F6F4;--a-sf:#FFFFFF;--a-sf2:#F6F9F7;--a-ink:#10201D;--a-ink2:#33443F;--a-mu:#6A7A75;--a-fa:#9AA8A4;--a-ln:#E5EBE7;
  --a-br:#0C7A6C;--a-br2:#12A08E;--a-soft:#E2F3EF;--a-soft2:#F0F8F6;
  --a-ok:#1E9A63;--a-oks:#E3F5EB;--a-wa:#C27C06;--a-was:#FCF2DC;--a-ur:#DB531F;--a-urs:#FDEBE2;--a-cr:#CC2B3B;--a-crs:#FCE6E8;--a-in:#2A6FB0;--a-ins:#E6EFF9}
.phone .frame{position:relative;border-radius:48px;padding:10px;
  background:linear-gradient(150deg,#3a4043 0%,#14181a 22%,#0b0d0e 60%,#23282b 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.10),inset 0 0 0 3px #050606,0 34px 60px -24px rgba(6,40,34,.55),0 14px 26px -14px rgba(0,0,0,.45)}
html[data-theme="dark"] .phone .frame{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 3px #050606,0 34px 60px -24px rgba(0,0,0,.85)}
.phone .frame::before{content:"";position:absolute;inset-inline-start:-3px;top:150px;width:3px;height:62px;border-radius:3px 0 0 3px;background:#22272a}
.phone .frame::after{content:"";position:absolute;inset-inline-start:-3px;top:228px;width:3px;height:40px;border-radius:3px 0 0 3px;background:#22272a}
.phone .screen{position:relative;height:624px;border-radius:38px;overflow:hidden;background:var(--a-bg);clip-path:inset(0 round 38px);
  color:var(--a-ink);font-size:13px;line-height:1.75;direction:rtl;text-align:right}
.phone .cam{position:absolute;top:11px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#060708;box-shadow:inset 0 0 0 2.5px #16191b;z-index:30}
.phone .gest{position:absolute;bottom:7px;left:50%;width:104px;height:4px;margin-left:-52px;border-radius:4px;background:rgba(16,32,29,.32);z-index:30}
.phone .dark-ui .gest,.phone .gest.lt{background:rgba(255,255,255,.55)}
.phone figcaption{margin-top:22px;text-align:center;padding:0 6px}
.phone figcaption .n{display:inline-grid;place-items:center;min-width:26px;padding:0 8px;height:26px;border-radius:8px;white-space:nowrap;background:var(--brand-soft);color:var(--brand-ink);font-weight:900;font-size:13px;margin-bottom:8px}
.phone figcaption b{display:block;font-size:16px;font-weight:850;color:var(--ink);line-height:1.6}
.phone figcaption span{display:block;font-size:13.5px;color:var(--muted);line-height:1.85;margin-top:4px}

/* نوار وضعیت */
.sb{position:absolute;top:0;inset-inline:0;height:36px;padding:9px 22px 0;display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;font-weight:700;z-index:25;color:var(--a-ink)}
.sb .ic{display:flex;gap:5px;align-items:center;direction:ltr}
.sb .ic svg{width:15px;height:15px}
.sb .bat{width:22px;height:11px;border:1.5px solid currentColor;border-radius:3.5px;position:relative;opacity:.9}
.sb .bat::before{content:"";position:absolute;inset:1.5px;width:68%;background:currentColor;border-radius:1.5px}
.sb .bat::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.sb.lt{color:#fff}

/* بدنه اپ */
.ap{position:absolute;inset:36px 0 0 0;display:flex;flex-direction:column}
.ap-body{flex:1;overflow:hidden;padding:6px 16px 0;position:relative}
.ap-top{display:flex;align-items:center;gap:10px;padding:8px 16px 10px}
.ap-top .t{font-size:18px;font-weight:850;line-height:1.4}
.ap-top .s{font-size:11.5px;color:var(--a-mu);line-height:1.5}
.ap-top .sp{margin-inline-start:auto}
.ap-iconbtn{width:36px;height:36px;border-radius:12px;background:var(--a-sf);display:grid;place-items:center;color:var(--a-ink2);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ap-iconbtn svg{width:18px;height:18px}
.ap-back{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--a-ink)}
.ap-back svg{width:20px;height:20px}

.ap-card{background:var(--a-sf);border-radius:20px;padding:14px;box-shadow:0 1px 2px rgba(10,40,34,.04),0 8px 22px -14px rgba(10,40,34,.22);margin-bottom:10px}
.ap-card.flat{box-shadow:none;border:1px solid var(--a-ln)}
.ap-card h5{margin:0;font-size:14px;font-weight:850;line-height:1.6;color:var(--a-ink)}
.ap-card p{margin:2px 0 0;font-size:12px;color:var(--a-mu);line-height:1.8}
.ap-sec{font-size:12px;font-weight:800;color:var(--a-mu);margin:12px 4px 8px;display:flex;align-items:center;justify-content:space-between}
.ap-sec a{color:var(--a-br);font-weight:800}

.ap-hero{border-radius:24px;padding:18px 16px;color:#fff;background:radial-gradient(160px 160px at 12% 0%,rgba(255,255,255,.18),transparent 70%),linear-gradient(150deg,#0A6B5F,#0C7A6C 50%,#14A592);
  box-shadow:0 14px 28px -16px rgba(12,122,108,.75);position:relative;overflow:hidden;margin-bottom:12px}
.ap-hero h5{font-size:17px;font-weight:850;margin:0;line-height:1.6;color:#fff}
.ap-hero p{font-size:12px;color:#D6F5EE;margin:4px 0 0;line-height:1.85}
.ap-hero .ring{position:absolute;inset-inline-end:-26px;top:-26px;width:120px;height:120px;opacity:.22}
.ap-hero .pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;margin-bottom:8px}

.ap-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:15px;background:var(--a-br);color:#fff;font-weight:800;font-size:13.5px;
  box-shadow:0 8px 18px -10px rgba(12,122,108,.9)}
.ap-btn svg{width:17px;height:17px}
.ap-btn.soft{background:var(--a-soft);color:var(--a-br);box-shadow:none}
.ap-btn.ghost{background:var(--a-sf);color:var(--a-ink);box-shadow:none;border:1px solid var(--a-ln)}
.ap-btn.sm{height:36px;border-radius:12px;font-size:12px;padding:0 14px}
.ap-btn.wh{background:#fff;color:var(--a-br);box-shadow:none}
.ap-dock{padding:10px 16px 26px;background:linear-gradient(180deg,rgba(243,246,244,0),var(--a-bg) 30%)}

.ap-row{display:flex;align-items:center;gap:11px;padding:9px 0}
.ap-row+.ap-row{border-top:1px solid var(--a-ln)}
.ap-row .tx{flex:1;min-width:0}
.ap-row .tt{font-size:13px;font-weight:750;line-height:1.55;color:var(--a-ink)}
.ap-row .mt{font-size:11px;color:var(--a-mu);line-height:1.6}
.ap-row .tr{flex:0 0 auto;font-size:11px;color:var(--a-mu)}

.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:850;font-size:13px;color:#fff;flex:0 0 auto}
.av.a1{background:linear-gradient(140deg,#0C7A6C,#16AE9A)} .av.a2{background:linear-gradient(140deg,#C46A2A,#E39A4B)}
.av.a3{background:linear-gradient(140deg,#3B5BA9,#6C8FD8)} .av.a4{background:linear-gradient(140deg,#B0457A,#DD7CAB)}
.av.sm{width:26px;height:26px;font-size:11px}
.avs{display:flex}.avs .av{border:2px solid #fff;margin-inline-start:-8px}.avs .av:first-child{margin-inline-start:0}

.ck{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;border:2px solid var(--a-ln);color:#fff}
.ck svg{width:13px;height:13px}
.ck.on{background:var(--a-ok);border-color:var(--a-ok)}
.ck.wait{border-color:var(--a-br2);border-style:dashed}
.ck.warn{background:var(--a-wa);border-color:var(--a-wa)}

.tg{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:750;padding:1px 8px;border-radius:99px;line-height:1.7;background:var(--a-sf2);color:var(--a-mu)}
.tg.free{background:var(--a-oks);color:var(--a-ok)} .tg.br{background:var(--a-soft);color:var(--a-br)}
.tg.wa{background:var(--a-was);color:var(--a-wa)} .tg.ur{background:var(--a-urs);color:var(--a-ur)} .tg.cr{background:var(--a-crs);color:var(--a-cr)}
.tg svg{width:11px;height:11px}

.ap-field{background:var(--a-sf);border:1.5px solid var(--a-ln);border-radius:15px;padding:8px 14px;margin-bottom:10px}
.ap-field label{display:block;font-size:10.5px;color:var(--a-mu);font-weight:700}
.ap-field .v{font-size:15px;font-weight:750;letter-spacing:1px;color:var(--a-ink)}
.ap-field.fo{border-color:var(--a-br);box-shadow:0 0 0 4px rgba(12,122,108,.12)}
.ap-field .caret{display:inline-block;width:1.5px;height:16px;background:var(--a-br);vertical-align:-3px;margin-inline-start:2px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.ap-tog{width:38px;height:22px;border-radius:99px;background:#D3DCD8;position:relative;flex:0 0 auto}
.ap-tog::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ap-tog.on{background:var(--a-br)} .ap-tog.on::after{right:auto;left:3px}

.ap-seg{display:flex;background:#E7EDEA;border-radius:12px;padding:3px;gap:3px;margin-bottom:12px}
.ap-seg span{flex:1;text-align:center;font-size:11.5px;font-weight:750;padding:5px 0;border-radius:9px;color:var(--a-mu)}
.ap-seg span.on{background:#fff;color:var(--a-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* نوار پایین */
.tabbar{position:absolute;bottom:0;inset-inline:0;height:74px;background:rgba(255,255,255,.94);border-top:1px solid var(--a-ln);display:flex;padding:7px 6px 18px;z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:700;color:var(--a-fa);line-height:1.4}
.tabbar a:hover{text-decoration:none}
.tabbar .tb{width:52px;height:28px;border-radius:99px;display:grid;place-items:center}
.tabbar svg{width:20px;height:20px}
.tabbar a.on{color:var(--a-br)} .tabbar a.on .tb{background:var(--a-soft)}
.ap.has-tabs .ap-body{padding-bottom:84px}

/* ماه‌ها */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mcell{background:var(--a-sf);border:1.5px solid var(--a-ln);border-radius:14px;padding:8px 8px 6px;text-align:center}
.mcell b{display:block;font-size:12.5px;font-weight:800;line-height:1.5}
.mcell i{font-style:normal;display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--a-mu)}
.mcell i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-ok)}
.mcell.mid i::before{background:var(--a-wa)} .mcell.busy i::before{background:var(--a-cr)}
.mcell.sel{border-color:var(--a-br);background:var(--a-soft);box-shadow:0 0 0 3px rgba(12,122,108,.12)}
.mcell.sel b{color:var(--a-br)}
.mcell.bd{position:relative}
.mcell.bd::after{content:"";position:absolute;top:6px;inset-inline-end:6px;width:6px;height:6px;border-radius:50%;background:#D98316}

/* گام‌ها */
.steps{position:relative;padding-inline-start:4px}
.st{display:grid;grid-template-columns:24px 1fr;gap:10px;position:relative;padding-bottom:14px}
.st::before{content:"";position:absolute;top:24px;bottom:0;inset-inline-start:11px;width:2px;background:var(--a-ln)}
.st:last-child::before{display:none}
.st.ok::before{background:var(--a-ok)}
.st .tt{font-size:12.5px;font-weight:800;line-height:1.6}
.st .mt{font-size:11px;color:var(--a-mu);line-height:1.7}

/* نوار اضطراری */
.sos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sos div{border-radius:14px;padding:8px 6px;text-align:center;background:var(--a-crs);color:var(--a-cr)}
.sos div b{display:block;font-size:17px;font-weight:900;line-height:1.3}
.sos div span{font-size:9.5px;font-weight:700;line-height:1.4;display:block}
.sos div.c2{background:var(--a-urs);color:var(--a-ur)} .sos div.c3{background:var(--a-ins);color:var(--a-in)}

.search{display:flex;align-items:center;gap:8px;background:var(--a-sf);border-radius:14px;padding:10px 12px;color:var(--a-fa);font-size:12px;margin-bottom:12px;border:1px solid var(--a-ln)}
.search svg{width:16px;height:16px}

/* حلقه پیشرفت */
.pring{width:58px;height:58px;flex:0 0 auto;position:relative}
.pring svg{width:58px;height:58px;transform:rotate(-90deg)}
.pring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:900}

/* ---------- صفحه قفل ---------- */
.lock{position:absolute;inset:0;background:radial-gradient(420px 360px at 80% 10%,#1c8b7a 0%,transparent 60%),radial-gradient(400px 420px at 10% 90%,#0a3c55 0%,transparent 60%),linear-gradient(170deg,#06221f,#0b2f3a 60%,#071a20);color:#fff}
.lock .clk{text-align:center;margin-top:74px}
.lock .clk .d{font-size:13px;font-weight:600;opacity:.85}
.lock .clk .t{font-size:72px;font-weight:300;line-height:1.15;letter-spacing:1px;font-feature-settings:"tnum"}
.nt{margin:10px 12px;border-radius:22px;padding:12px 14px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12)}
.nt .h{display:flex;align-items:center;gap:7px;font-size:11px;opacity:.85}
.nt .h .lg{width:20px;height:20px;border-radius:6px;background:#fff;display:grid;place-items:center}
.nt .h .lg svg{width:15px;height:15px}
.nt .h .tm{margin-inline-start:auto}
.nt .b{margin-top:6px;font-size:13px;line-height:1.75}
.nt .b b{display:block;font-size:13.5px}
.nt .acts{display:flex;gap:8px;margin-top:10px}
.nt .acts span{flex:1;text-align:center;font-size:11.5px;font-weight:750;padding:6px 0;border-radius:12px;background:rgba(255,255,255,.16)}
.lock .bottom{position:absolute;bottom:34px;inset-inline:0;display:flex;justify-content:space-between;padding:0 34px}
.lock .bottom span{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.lock .bottom svg{width:20px;height:20px}

/* ---------- پیامک ---------- */
.msg{position:absolute;inset:36px 0 0 0;background:#fff;display:flex;flex-direction:column}
.msg .mh{display:flex;align-items:center;gap:10px;padding:8px 14px 10px;border-bottom:1px solid #EEF1EF}
.msg .mh .nm{font-weight:850;font-size:14px;line-height:1.4}
.msg .mh .sub{font-size:10.5px;color:var(--a-mu)}
.msg .mh .lg{width:36px;height:36px;border-radius:50%;background:var(--a-soft);display:grid;place-items:center}
.msg .mh .lg svg{width:24px;height:24px}
.msg .mb{flex:1;padding:12px 12px 0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.msg .day{align-self:center;font-size:10.5px;color:var(--a-mu);margin:4px 0}
.bub{max-width:84%;padding:9px 12px;border-radius:18px;font-size:12.5px;line-height:1.85}
.bub.in{align-self:flex-start;background:#EEF2F0;border-start-start-radius:6px}
.bub.out{align-self:flex-end;background:var(--a-br);color:#fff;border-start-end-radius:6px}
.bub .tm{display:block;font-size:9.5px;opacity:.6;margin-top:2px}
.bub b{font-weight:800}
.qr{display:flex;gap:6px;flex-wrap:wrap;padding:6px 12px}
.qr span{font-size:11.5px;font-weight:750;color:var(--a-br);border:1.5px solid #CFE6E0;border-radius:99px;padding:4px 11px}
.msg .comp{display:flex;align-items:center;gap:8px;padding:8px 12px 26px}
.msg .comp .bx{flex:1;background:#F1F4F2;border-radius:99px;padding:9px 14px;font-size:12px;color:var(--a-fa)}
.msg .comp .snd{width:38px;height:38px;border-radius:50%;background:var(--a-br);display:grid;place-items:center;color:#fff}
.msg .comp svg{width:17px;height:17px}

/* ---------- تماس ---------- */
.call{position:absolute;inset:0;background:radial-gradient(380px 300px at 50% 18%,rgba(46,196,174,.35),transparent 70%),linear-gradient(180deg,#0B2925,#081A18 70%,#050F0E);color:#fff;text-align:center}
.call .who{margin-top:86px}
.call .who .lg{width:88px;height:88px;border-radius:50%;margin:0 auto 16px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.035)}
.call .who .lg svg{width:58px;height:58px}
.call .who .k{font-size:12px;opacity:.75}
.call .who .n{font-size:22px;font-weight:800;line-height:1.5;margin-top:4px}
.call .who .r{font-size:12.5px;opacity:.85;margin-top:4px;line-height:1.8;padding:0 30px}
.call .note{margin:26px 22px 0;border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.08);font-size:12px;line-height:1.85;text-align:right}
.call .note b{display:block;font-size:11px;opacity:.7;margin-bottom:2px}
.call .btns{position:absolute;bottom:46px;inset-inline:0;display:flex;justify-content:space-around;padding:0 30px}
.call .btns div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;opacity:.95}
.call .btns span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center}
.call .btns .ok{background:#22B573;box-shadow:0 0 0 8px rgba(34,181,115,.18)}
.call .btns .no{background:#E5484D}
.call .btns svg{width:26px;height:26px}
.call .btns .no svg{transform:rotate(135deg)}

/* ---------- ردیف و گالری گوشی‌ها ---------- */
.screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));justify-items:center;gap:56px 28px;margin-top:20px}
.screens.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1300px){.screens.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .screens,.screens.four{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:6px 16px 22px;margin-inline:-16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .screens::-webkit-scrollbar{display:none}
  .screens .phone{scroll-snap-align:center}
  .swipe-hint{display:flex!important}
}
.swipe-hint{display:none;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:4px}
.swipe-hint svg{width:16px;height:16px}

.fan{position:relative;height:700px;display:flex;justify-content:center;align-items:flex-start;perspective:1600px}
.fan .phone{position:absolute;top:20px;transition:transform .6s ease}
.fan .p1{transform:translateX(0) translateZ(60px);z-index:3}
.fan .p2{transform:translateX(-250px) translateZ(-80px) rotateY(18deg) scale(.88);z-index:2;opacity:.96}
.fan .p3{transform:translateX(250px) translateZ(-80px) rotateY(-18deg) scale(.88);z-index:2;opacity:.96}
.fan figcaption{display:none}
@media (max-width:860px){.fan .p2{transform:translateX(-150px) scale(.8) rotateY(16deg)}.fan .p3{transform:translateX(150px) scale(.8) rotateY(-16deg)}}
@media (max-width:560px){.fan{height:660px}.fan .p2,.fan .p3{display:none}}
@media (max-width:340px){.phone{transform:scale(.9);transform-origin:top center;margin-bottom:-60px}.fan .p1{transform:scale(.9)}}

/* ---------- اصول ---------- */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pr{display:grid;grid-template-columns:52px 1fr;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.pr .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.pr .ic svg{width:26px;height:26px}
.pr h4{font-size:17px;margin:2px 0 6px}
.pr p{font-size:14.5px;color:var(--ink-2);line-height:1.95;margin:0}
.pr .ev{display:block;margin-top:10px;font-size:13px;color:var(--muted);line-height:1.8;border-top:1px dashed var(--line-2);padding-top:8px}
@media (max-width:760px){.principles{grid-template-columns:1fr}.pr{grid-template-columns:44px 1fr;padding:16px}.pr .ic{width:44px;height:44px}}

/* ---------- تجربه‌های جهانی ---------- */
.prec{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.pc .where{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--muted)}
.pc .where i{font-style:normal;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:1px 8px;color:var(--ink-2)}
.pc h4{font-size:17px;margin:10px 0 4px;line-height:1.6}
.pc .fig{font-size:36px;font-weight:900;color:var(--brand);line-height:1.25;margin:10px 0 2px}
.pc .fig small{font-size:15px;font-weight:700;color:var(--muted)}
.pc .fl{font-size:14px;color:var(--ink-2);line-height:1.85}
.pc .les{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.pc .les b{color:var(--brand-ink)}
.pc .fl+.les{margin-top:14px}
@media (max-width:980px){.prec{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.prec{grid-template-columns:1fr}}

/* ---------- حلقه سال ---------- */
.year{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:40px;align-items:center}
.year svg{width:100%;height:auto}
.year .yr-list{display:grid;gap:10px}
.yr{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.yr .m{font-weight:900;color:var(--brand-ink);font-size:14.5px}
.yr p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.yr.quiet{background:transparent;border-style:dashed}
.yr.quiet .m{color:var(--muted)}
@media (max-width:900px){.year{grid-template-columns:1fr}.year svg{max-width:420px;margin:0 auto;display:block}}

/* ---------- نردبان پیگیری ---------- */
.ladder{display:grid;gap:14px}
.lv{display:grid;grid-template-columns:210px 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.lv .lh{padding:18px;border-inline-end:1px solid var(--line);background:var(--surface-2);position:relative}
.lv .lh::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:var(--lc)}
.lv .lh .k{font-size:12px;font-weight:800;color:var(--lc)}
.lv .lh h4{font-size:18px;margin:2px 0 6px}
.lv .lh p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}
.lv .track{padding:18px 18px 14px;display:flex;gap:0;align-items:stretch;overflow-x:auto}
.lv .stp{flex:1 0 128px;position:relative;padding-inline-end:16px}
.lv .stp::after{content:"";position:absolute;top:19px;inset-inline-start:40px;inset-inline-end:0;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px)}
.lv .stp:last-child::after{display:none}
.lv .stp .ch{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--lc) 13%,var(--surface));color:var(--lc);position:relative;z-index:1}
.lv .stp .ch svg{width:20px;height:20px}
.lv .stp .w{font-size:12px;font-weight:800;color:var(--muted);margin-top:8px}
.lv .stp .d{font-size:13.5px;font-weight:750;line-height:1.7;color:var(--ink)}
.lv .stp .x{font-size:12px;color:var(--muted);line-height:1.7}
.lv .none{padding:18px;font-size:15px;color:var(--muted);display:flex;align-items:center;gap:10px}
.lv.l0{--lc:var(--faint)} .lv.l1{--lc:var(--brand)} .lv.l2{--lc:var(--warn)} .lv.l3{--lc:var(--urgent)} .lv.l4{--lc:var(--crit)}
@media (max-width:860px){.lv{grid-template-columns:1fr}.lv .lh{border-inline-end:0;border-bottom:1px solid var(--line)}
  .lv .track{flex-direction:column;gap:12px}.lv .stp{flex:none;display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:0}
  .lv .stp .w,.lv .stp .d,.lv .stp .x{grid-column:2}.lv .stp .w{margin-top:0}.lv .stp .ch{grid-row:1/4}
  .lv .stp::after{top:44px;bottom:-12px;inset-inline-start:19px;inset-inline-end:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 11px)}}

.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.rule{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.85}
.rule svg{width:20px;height:20px;color:var(--brand);flex:0 0 auto;margin-top:4px}
.rule b{display:block;color:var(--ink);font-size:15px}
@media (max-width:980px){.rules{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.rules{grid-template-columns:1fr}}

/* ---------- قاب مرورگر و داشبورد ---------- */
.browser{border-radius:18px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);overflow:hidden;margin-top:12px}
.browser .bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.browser .dots{display:flex;gap:6px;direction:ltr}
.browser .dots i{width:11px;height:11px;border-radius:50%;background:#E5484D}
.browser .dots i:nth-child(2){background:#F2B33D} .browser .dots i:nth-child(3){background:#2EBD6B}
.browser .url{flex:1;max-width:460px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 12px;font-size:12.5px;color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.browser .url svg{width:13px;height:13px}

.db{display:grid;grid-template-columns:220px 1fr;min-height:560px;background:var(--bg);font-size:14px}
.db-side{background:#0B3B35;color:#CFE8E2;padding:18px 14px;display:flex;flex-direction:column;gap:4px}
html[data-theme="dark"] .db-side{background:#07211E}
.db-side .lgo{display:flex;align-items:center;gap:8px;font-weight:900;color:#fff;font-size:15px;margin-bottom:16px}
.db-side .lgo svg{width:28px;height:28px}
.db-side a{display:flex;align-items:center;gap:10px;color:#BFDCD5;padding:8px 10px;border-radius:10px;font-size:13.5px;font-weight:600}
.db-side a:hover{text-decoration:none;background:rgba(255,255,255,.06)}
.db-side a.on{background:rgba(255,255,255,.12);color:#fff}
.db-side a svg{width:17px;height:17px}
.db-side .who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.06);font-size:12.5px;line-height:1.6}
.db-main{padding:20px 22px;min-width:0}
.db-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.db-h h4{font-size:19px;margin:0}
.db-h .s{font-size:13px;color:var(--muted)}
.db-h .sp{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.db-sel{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px 12px;color:var(--ink-2)}
.db-sel svg{width:14px;height:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.kpi .k{font-size:12.5px;color:var(--muted);font-weight:700;line-height:1.6}
.kpi .v{font-size:26px;font-weight:900;line-height:1.35;margin-top:2px}
.kpi .d{font-size:12px;font-weight:700;line-height:1.6}
.kpi .d.up{color:var(--ok)} .kpi .d.dn{color:var(--crit)}
.kpi svg.spark{width:100%;height:30px;margin-top:6px;display:block}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.panel h5{font-size:14.5px;font-weight:850;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.panel h5 .chip{margin-inline-start:auto}
.db-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:12px}
.db-grid.eq{grid-template-columns:1fr 1fr}
.wl{width:100%;border-collapse:collapse;font-size:13px}
.wl th{font-size:11.5px;color:var(--muted);font-weight:800;text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.wl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.6}
.wl tr:last-child td{border-bottom:0}
.wl .nm{font-weight:800}
.wl .mt{display:block;font-size:11.5px;color:var(--muted)}
.wl .act{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);padding:4px 10px;border-radius:9px;white-space:nowrap}
.wl .act svg{width:13px;height:13px}
.lvdot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;white-space:nowrap}
.lvdot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.lvdot.l2{color:var(--warn)} .lvdot.l3{color:var(--urgent)} .lvdot.l1{color:var(--brand)}
.mbar{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:150px;padding-top:8px}
.mbar div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.mbar i{display:block;width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:var(--brand-2);height:var(--h)}
.mbar i.pk{background:var(--accent)}
.mbar span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.cap-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.cap-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}

.tmap{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;direction:rtl}
.tmap span{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff;line-height:1.2;text-align:center;padding:2px;background:var(--c);overflow:hidden;min-width:0;word-break:break-word}
@media (max-width:560px){.tmap{gap:3px}.tmap span{font-size:7px;border-radius:5px;padding:1px}}
.tmap span.e{background:transparent}
.tmap-l{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:10px}
.tmap-l b{display:block;height:8px;flex:1;max-width:160px;border-radius:4px;background:linear-gradient(90deg,#E8B04A,#7FC4A6,#0C7A6C)}

.efun{display:grid;gap:8px}
.ef{display:grid;grid-template-columns:120px 1fr 48px;gap:10px;align-items:center;font-size:13px}
.ef .t{height:24px;border-radius:7px;background:var(--surface-3);overflow:hidden}
.ef .t i{display:block;height:100%;width:var(--w);border-radius:7px;background:var(--c,var(--brand))}
.ef b{font-weight:900;text-align:left;direction:ltr}

.demo-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--accent-ink);background:var(--accent-soft);border-radius:8px;padding:3px 10px}
.demo-badge svg{width:14px;height:14px}

@media (max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}.db-grid,.db-grid.eq{grid-template-columns:1fr}}
@media (max-width:760px){.db{grid-template-columns:1fr}.db-side{display:none}.db-main{padding:14px}
  .wl .hide-m{display:none}.browser .url{font-size:11px}}

/* ---------- معماری ---------- */
.arch{display:grid;gap:12px}
.ab{border-radius:var(--r);padding:18px 20px;border:1px solid var(--line);background:var(--surface);display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center}
.ab .h b{display:block;font-size:16.5px;font-weight:900}
.ab .h span{font-size:13px;color:var(--muted);line-height:1.7;display:block}
.ab .items{display:flex;gap:8px;flex-wrap:wrap}
.ab .it{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.ab .it svg{width:16px;height:16px;color:var(--brand)}
.ab.core{background:linear-gradient(140deg,var(--brand-softer),var(--surface));border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.ab.core .it{background:var(--surface)}
.ab.nat .it svg{color:var(--info)}
.arch .link{display:flex;justify-content:center;color:var(--faint);margin:-4px 0}
.arch .link svg{width:22px;height:22px}
@media (max-width:760px){.ab{grid-template-columns:1fr;gap:10px}}

/* ---------- نقشه اجرا ---------- */
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:ph}
.ph{counter-increment:ph;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;position:relative}
.ph::before{content:"فاز " counter(ph,persian);display:inline-block;font-size:12px;font-weight:900;color:var(--brand-ink);background:var(--brand-soft);padding:2px 10px;border-radius:8px}
.ph h4{font-size:17px;margin:10px 0 4px}
.ph .when{font-size:13px;color:var(--muted);font-weight:700}
.ph ul{margin:10px 0 0;padding-inline-start:18px;font-size:14px;line-height:1.95;color:var(--ink-2)}
.ph .out{margin-top:12px;font-size:13px;line-height:1.8;padding-top:10px;border-top:1px dashed var(--line-2);color:var(--ink-2)}
.ph .out b{color:var(--ink)}
@media (max-width:1060px){.road{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.road{grid-template-columns:1fr}}

.kpi-tbl td:nth-child(2),.kpi-tbl td:nth-child(3){white-space:nowrap;font-weight:800}

/* ---------- قهرمان صفحه اپ ---------- */
.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center}
.hero-split h1{font-size:clamp(34px,4.6vw,56px)}
.hero-split h1 em{display:inline-block;font-size:.62em;font-weight:800;margin-top:6px;color:var(--brand)}
.hero-facts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-facts div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;min-width:130px;box-shadow:var(--shadow-sm)}
.hero-facts b{display:block;font-size:22px;font-weight:900;color:var(--brand);line-height:1.4}
.hero-facts span{font-size:13px;color:var(--muted)}
.hero-split .fan{height:690px}
.hero-split .fan .p2{transform:translateX(-170px) translateZ(-80px) rotateY(16deg) scale(.84)}
.hero-split .fan .p3{transform:translateX(170px) translateZ(-80px) rotateY(-16deg) scale(.84)}
@media (max-width:1100px){.hero-split{grid-template-columns:1fr}.hero-split .fan{margin-top:20px}}
@media (max-width:560px){.hero-split .fan{height:670px}.hero-facts div{min-width:0;flex:1}}

/* ---------- ورود ---------- */
.ob{display:flex;flex-direction:column;padding-top:14px}
.ob-logo{width:74px;height:74px;margin:6px auto 6px}
.ob-t{text-align:center;font-size:21px;font-weight:900;line-height:1.5}
.ob-s{text-align:center;font-size:12px;color:var(--a-mu);margin-bottom:12px}
.vp{display:grid;gap:6px;margin-bottom:14px}
.vp span{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--a-ink2);background:var(--a-sf);border-radius:12px;padding:7px 10px}
.vp svg{width:15px;height:15px;color:var(--a-br)}
.ob-n{font-size:10.5px;color:var(--a-mu);line-height:1.7;margin:-2px 2px 10px}
.ob-f{display:flex;gap:6px;align-items:flex-start;font-size:10px;color:var(--a-mu);line-height:1.7;margin-top:10px}
.ob-f svg{width:12px;height:12px;flex:0 0 auto;margin-top:3px}

/* کاشی‌ها */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--a-sf);border-radius:16px;padding:12px;font-size:11.5px;font-weight:800;display:flex;flex-direction:column;gap:8px;color:var(--a-ink);box-shadow:0 1px 2px rgba(10,40,34,.04)}
.tile svg{width:20px;height:20px;color:var(--a-br)}

/* روزها و ساعت‌ها */
.dchips{display:flex;gap:6px;margin:2px 0 10px}
.dchip{flex:1;text-align:center;background:var(--a-sf);border:1.5px solid var(--a-ln);border-radius:14px;padding:6px 0;font-size:10.5px;color:var(--a-mu);font-weight:700}
.dchip b{display:block;font-size:16px;color:var(--a-ink);font-weight:900;line-height:1.3}
.dchip.on{border-color:var(--a-br);background:var(--a-soft);color:var(--a-br)} .dchip.on b{color:var(--a-br)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.slot{background:var(--a-sf);border:1.5px solid var(--a-ln);border-radius:12px;padding:6px 0 5px;text-align:center;font-size:13px;font-weight:800;line-height:1.4}
.slot i{display:block;font-style:normal;font-size:9px;font-weight:700;color:var(--a-br)}
.slot.on{background:var(--a-br);border-color:var(--a-br);color:#fff} .slot.on i{color:#D6F5EE}
.slot.off{color:var(--a-fa);text-decoration:line-through;background:var(--a-sf2)}

/* ردیف جواب */
.res{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.res+.res{border-top:1px solid var(--a-ln)}
.res .nm{font-size:12.5px;font-weight:800}
.res .ex{font-size:10.5px;color:var(--a-mu);line-height:1.6}
.res .vl{font-size:17px;font-weight:900;white-space:nowrap;color:var(--a-ink)}
.res .vl small{font-size:10px;font-weight:700;color:var(--a-mu);margin-inline-start:3px}
.res .vl.wa{color:var(--a-wa)} .res .vl.ok{color:var(--a-ok);font-size:14px}

/* خط زمانی کوچک پیگیری */
.mtl{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.mtl span{font-size:9.5px;color:var(--a-mu);text-align:center;background:var(--a-sf2);border-radius:10px;padding:5px 2px;line-height:1.5}
.mtl b{display:block;font-size:10.5px;color:var(--a-ink);font-weight:800}

/* پیش‌نمایش پیام همراه */
.pv{background:#EEF2F0;border-radius:16px;border-start-start-radius:5px;padding:10px 12px;font-size:12px;line-height:1.85;color:var(--a-ink)}

/* پایان */
.done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 26px 40px;
  background:radial-gradient(260px 260px at 50% 30%,#E3F4EF,transparent 70%)}
.done-ring{width:132px;height:132px}
.done .chk{width:40px;height:40px;border-radius:50%;background:var(--a-ok);color:#fff;display:grid;place-items:center;margin-top:-30px;margin-inline-start:96px;border:4px solid #fff;box-shadow:0 6px 16px -6px rgba(30,154,99,.7)}
.done .chk svg{width:20px;height:20px;stroke-width:3}
.done h5{font-size:19px;font-weight:900;margin:14px 0 6px;color:var(--a-ink)}
.done p{font-size:12.5px;color:var(--a-ink2);line-height:1.9;margin:0}
.done p.dq{margin-top:12px;font-size:12px;color:var(--a-br);font-weight:800}
.done-stats{display:flex;gap:8px;margin-top:14px}
.done-stats span{background:#fff;border-radius:14px;padding:6px 12px;font-size:10.5px;color:var(--a-mu);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.done-stats b{display:block;font-size:17px;color:var(--a-ink);font-weight:900}

/* حلقه سال */
.yr-seg{fill:none;stroke-width:30}
.yr-seg.off{stroke:var(--surface-3)}
.yr-seg.on{stroke:var(--accent)}
.yr-seg.half{stroke:color-mix(in srgb,var(--brand-2) 55%,var(--surface-3))}
.yr-seg.dot{stroke:color-mix(in srgb,var(--brand-2) 30%,var(--surface-3))}
.yr-seg.soft{stroke:color-mix(in srgb,var(--accent) 30%,var(--surface-3))}
.yr-lb{font-family:"Vazirmatn",sans-serif;font-size:14px;fill:var(--muted);text-anchor:middle;font-weight:600}
.yr-lb.on{fill:var(--accent-ink);font-weight:900;font-size:15px}
html[data-theme="dark"] .yr-lb.on{fill:var(--accent)}
.yr-c1,.yr-c2{font-family:"Vazirmatn",sans-serif;text-anchor:middle}
.yr-c1{font-size:17px;font-weight:900;fill:var(--ink)}
.yr-c2{font-size:14px;font-weight:700;fill:var(--accent-ink)}
html[data-theme="dark"] .yr-c2{fill:var(--accent)}

/* ردیف چهارتایی گوشی‌های نردبان */
@media (min-width:1400px){.screens.four{grid-template-columns:repeat(4,300px);justify-content:center;gap:56px 26px;margin-inline:-80px}}

/* ایده‌ها */
.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.idea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;position:relative;overflow:hidden}
.idea .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);margin-bottom:12px}
.idea .ic svg{width:22px;height:22px}
.idea h4{font-size:16.5px;margin:0 0 6px}
.idea p{font-size:14.5px;color:var(--ink-2);line-height:1.9;margin:0}
.idea .src{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.75}
@media (max-width:980px){.ideas{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ideas{grid-template-columns:1fr}}