/* تصاميم المظهر (2026-10-29) — نفس الصفحات والبيانات، والتصميم من html[data-design] (core.js: App.DESIGNS).
   «دفتر» هو style.css نفسه بلا إضافة. كل تصميم: رموز ألوانه للفاتح ثم للداكن (.dark)، ثم ما يغيّره من شكل.
   «نيون» داكن دائمًا (core.js يفرض .dark). لا شيء هنا يغيّر سلوكًا أو بيانات. */

/* ================================================================================== سحاب */
/* خفيف مثل السماء: سماء زرقاء فاتحة في أعلى الصفحة، بطاقات بيضاء بزوايا كبيرة وظل أزرق ناعم،
   أرقام كبيرة داكنة، أزرار وشرائط على شكل كبسولة، والقائمة السفلية عائمة. */
html[data-design="sahab"] {
  --bg: #dfeaf7;
  --bg-2: #f3f7fc;
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --field: #eef3f9;
  --ink: #0d1b2e;
  --ink-2: #405571;
  --hint: #7d8ea6;
  --line: rgba(13, 27, 46, .06);
  --line-2: rgba(13, 27, 46, .12);
  --accent: #1a73e8;
  --accent-2: #1259c3;
  --accent-ink: #ffffff;
  --accent-soft: rgba(26, 115, 232, .09);
  --accent-soft-2: rgba(26, 115, 232, .15);
  --green: #0f9d63;
  --red: #e2483d;
  --amber: #c97a06;
  --violet: #7a5af5;
  --teal: #0b97a8;
  --blue: #1a73e8;
  --green-soft: rgba(15, 157, 99, .1);
  --red-soft: rgba(226, 72, 61, .09);
  --amber-soft: rgba(201, 122, 6, .11);
  --violet-soft: rgba(122, 90, 245, .1);
  --teal-soft: rgba(11, 151, 168, .1);
  --gray-soft: rgba(64, 85, 113, .08);
  --hero-ink: #0d1b2e;
  --hero-hint: #6f819c;
  --shadow: 0 1px 1px rgba(13, 27, 46, .03), 0 12px 28px -16px rgba(26, 72, 140, .24);
  --shadow-up: 0 12px 34px -12px rgba(26, 72, 140, .3);
  --radius: 24px;
  --radius-sm: 16px;
  --btn-radius: 999px;
  --ico-radius: 50%;
  --font: "Alexandria", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}
html[data-design="sahab"].dark {
  --bg: #0c1828;
  --bg-2: #09111c;
  --surface: #111d2e;
  --surface-2: #152338;
  --field: #18283e;
  --ink: #e9f2ff;
  --ink-2: #b4c4dc;
  --hint: #7f93b0;
  --line: rgba(233, 242, 255, .06);
  --line-2: rgba(233, 242, 255, .12);
  --accent: #4da3ff;
  --accent-2: #2f8cf0;
  --accent-ink: #04172e;
  --accent-soft: rgba(77, 163, 255, .12);
  --accent-soft-2: rgba(77, 163, 255, .2);
  --green: #3ccf8e;
  --red: #ff6b61;
  --amber: #f3b94a;
  --violet: #a993ff;
  --teal: #46c9d6;
  --blue: #4da3ff;
  --green-soft: rgba(60, 207, 142, .12);
  --red-soft: rgba(255, 107, 97, .12);
  --amber-soft: rgba(243, 185, 74, .13);
  --violet-soft: rgba(169, 147, 255, .13);
  --teal-soft: rgba(70, 201, 214, .13);
  --gray-soft: rgba(180, 196, 220, .09);
  --hero-ink: #e9f2ff;
  --hero-hint: #93a7c4;
  --shadow: 0 0 0 1px rgba(233, 242, 255, .05), 0 14px 30px -18px rgba(0, 0, 0, .7);
  --shadow-up: 0 0 0 1px rgba(233, 242, 255, .06), 0 14px 34px -12px rgba(0, 0, 0, .7);
}
html[data-design="sahab"] body { background: linear-gradient(180deg, var(--bg) 0, var(--bg-2) 460px) no-repeat, var(--bg-2); }
html[data-design="sahab"] #topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 62px; }
html[data-design="sahab"] #topbar.scrolled {
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
html[data-design="sahab"] #topbar h1 { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
html[data-design="sahab"] #top-back, html[data-design="sahab"] .top-btn, html[data-design="sahab"] .avatar { width: 40px; height: 40px; border-radius: 50%; }
html[data-design="sahab"] .avatar { background: linear-gradient(140deg, #4da3ff, #1a73e8); color: #fff; font-weight: 600; }
html[data-design="sahab"] .card, html[data-design="sahab"] .kpi, html[data-design="sahab"] .qa,
html[data-design="sahab"] .tile, html[data-design="sahab"] .wchip, html[data-design="sahab"] .menu-list { border-color: transparent; }
html[data-design="sahab"] .hero {
  color: var(--hero-ink); border: none; padding: 20px 20px 18px;
  background:
    radial-gradient(120% 95% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(90% 90% at 0% 100%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
}
html[data-design="sahab"] .hero::after { inset: -70px auto auto -50px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 62%); }
html[data-design="sahab"].dark .hero::after { background: radial-gradient(circle, rgba(77, 163, 255, .1), transparent 62%); }
html[data-design="sahab"] .hero-top { flex-direction: column; gap: 8px; }
html[data-design="sahab"] .hero-value { font-size: 40px; font-weight: 600; letter-spacing: -1.6px; }
html[data-design="sahab"] .hero .delta { background: var(--gray-soft); color: var(--ink-2); }
html[data-design="sahab"] .hero .delta.pos { background: var(--green-soft); color: var(--green); }
html[data-design="sahab"] .hero .delta.neg { background: var(--red-soft); color: var(--red); }
html[data-design="sahab"] .hero .ico { background: var(--accent-soft); color: var(--accent); }
html[data-design="sahab"] .hero-spark i { background: color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 6px 6px 2px 2px; }
html[data-design="sahab"] .hero-spark i.today { background: var(--accent); }
html[data-design="sahab"] .hero-spark i.neg { background: color-mix(in srgb, var(--red) 45%, transparent); }
html[data-design="sahab"] .hero.soft::before { display: none; }
html[data-design="sahab"] #bottom-nav {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  max-width: calc(var(--app-max) - 24px); padding: 7px 6px; border: none; border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-up);
}
html[data-design="sahab"] #view { padding-bottom: calc(var(--nav-h) + 44px + env(safe-area-inset-bottom)); }
html[data-design="sahab"] #bottom-nav .nav-icon { width: 46px; }
html[data-design="sahab"] #bottom-nav button.fab .nav-icon {
  width: 54px; height: 54px; border-radius: 50%; margin-top: -26px;
  background: linear-gradient(150deg, #4da3ff, #1a73e8); color: #fff;
  box-shadow: 0 12px 22px -8px rgba(26, 115, 232, .7), 0 0 0 6px var(--surface);
}
html[data-design="sahab"] .save-bar { bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); border-radius: 30px; padding: 8px; }
html[data-design="sahab"] button.btn { font-weight: 600; }
html[data-design="sahab"] button.btn:not(.secondary):not(.danger):not(.ghost) {
  background: linear-gradient(150deg, #3b8bf0, var(--accent)); box-shadow: 0 10px 20px -12px rgba(26, 115, 232, .8);
}
html[data-design="sahab"].dark button.btn:not(.secondary):not(.danger):not(.ghost) { background: var(--accent); }
html[data-design="sahab"] .tabs button { border-color: transparent; background: var(--surface); box-shadow: var(--shadow); }
html[data-design="sahab"] .tabs button.active { background: var(--accent); color: var(--accent-ink); }
html[data-design="sahab"] .card .tabs button { box-shadow: none; }
html[data-design="sahab"] .seg { border-radius: 999px; }
html[data-design="sahab"] .seg button { border-radius: 999px; }
html[data-design="sahab"] input:not([type="checkbox"]):not([type="radio"]), html[data-design="sahab"] select, html[data-design="sahab"] textarea { border-radius: 16px; }
html[data-design="sahab"] .search-box input { border-color: transparent; border-radius: 999px; }
html[data-design="sahab"] .filter-btn { border-color: transparent; border-radius: 50%; }
html[data-design="sahab"] .list-item { border-bottom-color: transparent; padding: 11px 2px; }
html[data-design="sahab"] .card.list { padding: 4px 12px; }
html[data-design="sahab"] .kv { border-bottom-color: var(--line); }
html[data-design="sahab"] .attn { border-radius: 20px; border: none; }
html[data-design="sahab"] .wchip { border-radius: 20px; min-width: 144px; }
html[data-design="sahab"] .modal { border-radius: 30px 30px 0 0; background: var(--bg-2); }
html[data-design="sahab"] .modal-close { border-radius: 50%; }
html[data-design="sahab"] .toast { border-radius: 999px; padding: 11px 20px; }
html[data-design="sahab"] .day-head { color: var(--hint); }

/* ================================================================================== نيون */
/* ليلي دائمًا: أسود مزرق وتوهج سماوي ووردي، بطاقات زجاجية شفافة بحد رفيع، أرقام بتدرّج مضيء،
   وخط Changa التقني. يليق بمتجر ألعاب. */
html[data-design="neon"] {
  --bg: #07070d;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .07);
  --field: rgba(255, 255, 255, .055);
  --ink: #f1f3ff;
  --ink-2: #b9bfdc;
  --hint: #7f86aa;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .14);
  --accent: #2ee6ff;
  --accent-2: #19b8d1;
  --accent-ink: #05050c;
  --accent-soft: rgba(46, 230, 255, .12);
  --accent-soft-2: rgba(46, 230, 255, .2);
  --green: #39f2a0;
  --red: #ff4f8b;
  --amber: #ffcf3d;
  --violet: #b07cff;
  --teal: #2ee6ff;
  --blue: #5b9cff;
  --green-soft: rgba(57, 242, 160, .11);
  --red-soft: rgba(255, 79, 139, .13);
  --amber-soft: rgba(255, 207, 61, .11);
  --violet-soft: rgba(176, 124, 255, .14);
  --teal-soft: rgba(46, 230, 255, .12);
  --gray-soft: rgba(185, 191, 220, .1);
  --hero-ink: #f6f7ff;
  --hero-hint: rgba(220, 226, 255, .66);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-up: 0 -1px 0 rgba(255, 255, 255, .06);
  --radius: 18px;
  --radius-sm: 12px;
  --btn-radius: 13px;
  --ico-radius: 12px;
  --font: "Changa", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  color-scheme: dark;
}
html[data-design="neon"] body {
  background:
    radial-gradient(900px 520px at 110% -8%, rgba(255, 61, 213, .17), transparent 60%),
    radial-gradient(800px 560px at -25% 18%, rgba(46, 230, 255, .11), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
html[data-design="neon"] #topbar, html[data-design="neon"] #topbar.scrolled { background: rgba(7, 7, 13, .72); }
html[data-design="neon"] #topbar.scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
html[data-design="neon"] #topbar h1 { font-weight: 700; letter-spacing: 0; }
html[data-design="neon"] .avatar { background: linear-gradient(135deg, #2ee6ff, #ff3dd5); color: #07070d; }
html[data-design="neon"] .card, html[data-design="neon"] .kpi, html[data-design="neon"] .qa, html[data-design="neon"] .tile,
html[data-design="neon"] .wchip, html[data-design="neon"] .menu-list, html[data-design="neon"] .dz-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .022));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-design="neon"] .dz-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px -6px rgba(46, 230, 255, .6); }
html[data-design="neon"] .hero {
  border: 1px solid transparent;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 61, 213, .24), transparent 55%) padding-box,
    radial-gradient(120% 120% at 100% 100%, rgba(46, 230, 255, .2), transparent 55%) padding-box,
    linear-gradient(#0c0c1a, #0c0c1a) padding-box,
    linear-gradient(120deg, #2ee6ff, #8b5cff 50%, #ff3dd5) border-box;
  box-shadow: 0 20px 50px -24px rgba(255, 61, 213, .55), 0 12px 40px -22px rgba(46, 230, 255, .6);
}
html[data-design="neon"] .hero::after { background: radial-gradient(circle, rgba(46, 230, 255, .16), transparent 65%); }
html[data-design="neon"] .hero-value, html[data-design="neon"] .hero.soft .hero-value {
  background: linear-gradient(95deg, #7af3ff, #c99bff 55%, #ff8ce6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
html[data-design="neon"] .hero-value small { -webkit-text-fill-color: var(--hero-hint); }
html[data-design="neon"] .hero.soft .hero-value.neg { background: none; -webkit-text-fill-color: var(--red); }
html[data-design="neon"] .hero .delta { background: rgba(255, 255, 255, .06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
html[data-design="neon"] .hero .delta.pos { background: rgba(57, 242, 160, .12); color: #7dffc6; box-shadow: inset 0 0 0 1px rgba(57, 242, 160, .4); }
html[data-design="neon"] .hero .delta.neg { background: rgba(255, 79, 139, .12); color: #ff9dbf; box-shadow: inset 0 0 0 1px rgba(255, 79, 139, .4); }
html[data-design="neon"] .hero-spark i { background: rgba(46, 230, 255, .32); box-shadow: 0 0 8px rgba(46, 230, 255, .25); }
html[data-design="neon"] .hero-spark i.today { background: #ff3dd5; box-shadow: 0 0 14px rgba(255, 61, 213, .85); }
html[data-design="neon"] .hero-spark i.neg { background: rgba(255, 79, 139, .6); }
html[data-design="neon"] .hero.soft { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); }
html[data-design="neon"] .hero.soft::before { background: linear-gradient(90deg, #2ee6ff, #8b5cff, #ff3dd5); }
html[data-design="neon"] .ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }
html[data-design="neon"] button.btn:not(.secondary):not(.danger):not(.ghost) {
  background: linear-gradient(115deg, #2ee6ff, #8f8cff 55%, #ff6be0); color: #07070d;
  box-shadow: 0 10px 26px -12px rgba(46, 230, 255, .7), 0 10px 26px -14px rgba(255, 61, 213, .7);
}
html[data-design="neon"] button.btn.secondary, html[data-design="neon"] .card button.btn.secondary,
html[data-design="neon"] .modal button.btn.secondary {
  background: rgba(255, 255, 255, .045); color: var(--ink); border: 1px solid rgba(255, 255, 255, .14);
}
html[data-design="neon"] button.btn.danger { background: linear-gradient(115deg, #ff4f8b, #ff3d6e); color: #fff; }
html[data-design="neon"] #bottom-nav { background: rgba(8, 8, 16, .88); border-top: 1px solid rgba(255, 255, 255, .06); box-shadow: none; }
html[data-design="neon"] #bottom-nav button.active { color: var(--accent); text-shadow: 0 0 10px rgba(46, 230, 255, .55); }
html[data-design="neon"] #bottom-nav button.active .nav-icon { background: rgba(46, 230, 255, .1); box-shadow: inset 0 0 0 1px rgba(46, 230, 255, .3); }
html[data-design="neon"] #bottom-nav button.fab .nav-icon {
  background: linear-gradient(135deg, #2ee6ff, #9a6bff 55%, #ff3dd5); color: #07070d;
  box-shadow: 0 0 0 5px var(--bg), 0 0 22px rgba(46, 230, 255, .55), 0 0 36px rgba(255, 61, 213, .35);
}
html[data-design="neon"] .tabs button { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); color: var(--ink-2); }
html[data-design="neon"] .tabs button.active, html[data-design="neon"] .card .tabs button.active {
  background: linear-gradient(115deg, #2ee6ff, #a77bff); color: #07070d; border-color: transparent;
  box-shadow: 0 0 18px -6px rgba(46, 230, 255, .7);
}
html[data-design="neon"] .seg { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
html[data-design="neon"] .seg button.active { background: rgba(46, 230, 255, .14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(46, 230, 255, .4); }
html[data-design="neon"] .badge { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 70%, transparent); }
html[data-design="neon"] .list-item .amount.pos, html[data-design="neon"] .row-end .sub.pos { text-shadow: 0 0 12px rgba(57, 242, 160, .35); }
html[data-design="neon"] .list-item .amount.neg { text-shadow: 0 0 12px rgba(255, 79, 139, .3); }
html[data-design="neon"] input:not([type="checkbox"]):not([type="radio"]), html[data-design="neon"] select, html[data-design="neon"] textarea {
  background-color: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
html[data-design="neon"] input:not([type="checkbox"]):not([type="radio"]):focus, html[data-design="neon"] select:focus, html[data-design="neon"] textarea:focus {
  border-color: var(--accent); background-color: rgba(46, 230, 255, .05);
  box-shadow: 0 0 0 3px rgba(46, 230, 255, .14), 0 0 20px -6px rgba(46, 230, 255, .55);
}
html[data-design="neon"] select option { background: #10111f; color: var(--ink); }
html[data-design="neon"] .switch-line, html[data-design="neon"] .step-box { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
html[data-design="neon"] .switch-line input:checked { background: linear-gradient(115deg, #2ee6ff, #a77bff); }
html[data-design="neon"] #modal-root:not(:empty) { background: rgba(2, 2, 8, .66); }
html[data-design="neon"] .modal { background: #0a0a14; box-shadow: 0 -1px 0 rgba(46, 230, 255, .35), 0 -24px 60px -24px rgba(46, 230, 255, .3); }
html[data-design="neon"] .toast { background: #14152b; color: var(--ink); box-shadow: 0 0 0 1px rgba(46, 230, 255, .35), 0 12px 30px rgba(0, 0, 0, .6); }
html[data-design="neon"] .toast.error { background: #3a0d1f; box-shadow: 0 0 0 1px rgba(255, 79, 139, .5); }
html[data-design="neon"] .save-bar { background: rgba(12, 12, 24, .9); border-color: rgba(255, 255, 255, .1); }
html[data-design="neon"] .attn { background: rgba(255, 207, 61, .07); border-color: rgba(255, 207, 61, .35); }
html[data-design="neon"] .attn.red { background: rgba(255, 79, 139, .07); border-color: rgba(255, 79, 139, .4); }
html[data-design="neon"] .attn .ico { background: rgba(255, 255, 255, .05); }
html[data-design="neon"] .notice { background: rgba(255, 207, 61, .08); box-shadow: inset 0 0 0 1px rgba(255, 207, 61, .25); }
html[data-design="neon"] .notice.info { background: rgba(46, 230, 255, .07); box-shadow: inset 0 0 0 1px rgba(46, 230, 255, .25); }
html[data-design="neon"] .big-profit { background: rgba(46, 230, 255, .08); box-shadow: inset 0 0 0 1px rgba(46, 230, 255, .25); }

/* ================================================================================== إيصال */
/* ورق دافئ منقّط مثل ورق الحسابات، خط النسخ للنصوص وخط آلة كاتبة للأرقام، حبر أزرق وأحمر،
   خطوط متقطعة بين الأسطر، البطاقة الرئيسية إيصال بحافة مسننة، وحقول للكتابة على السطر. */
html[data-design="iysal"] {
  --bg: #e9e1d1;
  --surface: #fbf7ee;
  --surface-2: #f4eee1;
  --field: #f1eadb;
  --ink: #23201a;
  --ink-2: #4e483c;
  --hint: #877d69;
  --line: rgba(35, 32, 26, .13);
  --line-2: rgba(35, 32, 26, .27);
  --accent: #23479b;
  --accent-2: #183674;
  --accent-ink: #fbf7ee;
  --accent-soft: rgba(35, 71, 155, .09);
  --accent-soft-2: rgba(35, 71, 155, .15);
  --green: #2c7a33;
  --red: #b3261e;
  --amber: #9a5d08;
  --violet: #6a3c9c;
  --teal: #1b6c70;
  --blue: #23479b;
  --green-soft: rgba(44, 122, 51, .1);
  --red-soft: rgba(179, 38, 30, .09);
  --amber-soft: rgba(154, 93, 8, .11);
  --violet-soft: rgba(106, 60, 156, .1);
  --teal-soft: rgba(27, 108, 112, .1);
  --gray-soft: rgba(78, 72, 60, .08);
  --hero-ink: #23201a;
  --hero-hint: #877d69;
  --dots: rgba(35, 32, 26, .05);
  --shadow: 0 1px 0 rgba(35, 32, 26, .06), 0 8px 18px -14px rgba(70, 50, 20, .4);
  --shadow-up: 0 -1px 0 rgba(35, 32, 26, .1);
  --radius: 4px;
  --radius-sm: 4px;
  --btn-radius: 4px;
  --ico-radius: 50%;
  --font: "Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif;
  --font-num: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
}
html[data-design="iysal"].dark {
  --bg: #14120e;
  --surface: #1e1b16;
  --surface-2: #24211b;
  --field: #27231c;
  --ink: #efe6d3;
  --ink-2: #cfc3ab;
  --hint: #978c75;
  --line: rgba(239, 230, 211, .11);
  --line-2: rgba(239, 230, 211, .23);
  --accent: #8fb0f0;
  --accent-2: #7397df;
  --accent-ink: #14120e;
  --accent-soft: rgba(143, 176, 240, .11);
  --accent-soft-2: rgba(143, 176, 240, .18);
  --green: #84c784;
  --red: #f08a7c;
  --amber: #e3ad55;
  --violet: #b99be6;
  --teal: #6cc2c2;
  --blue: #8fb0f0;
  --green-soft: rgba(132, 199, 132, .12);
  --red-soft: rgba(240, 138, 124, .12);
  --amber-soft: rgba(227, 173, 85, .13);
  --violet-soft: rgba(185, 155, 230, .13);
  --teal-soft: rgba(108, 194, 194, .12);
  --gray-soft: rgba(207, 195, 171, .09);
  --hero-ink: #efe6d3;
  --hero-hint: #978c75;
  --dots: rgba(239, 230, 211, .035);
  --shadow: 0 1px 0 rgba(0, 0, 0, .45);
  --shadow-up: 0 -1px 0 rgba(239, 230, 211, .08);
}
html[data-design="iysal"] body { background-image: radial-gradient(var(--dots) 1px, transparent 1.2px); background-size: 5px 5px; line-height: 1.6; }
html[data-design="iysal"] #topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: 0; }
html[data-design="iysal"] #topbar.scrolled { box-shadow: 0 2px 0 -1px var(--line-2); }
html[data-design="iysal"] #top-back, html[data-design="iysal"] .top-btn { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface); }
html[data-design="iysal"] .avatar { border-radius: 50%; background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); font-family: var(--font-num); font-size: 13px; }
html[data-design="iysal"] .card, html[data-design="iysal"] .kpi, html[data-design="iysal"] .tile, html[data-design="iysal"] .menu-list { border: 1px solid var(--line); }
html[data-design="iysal"] .card h3 { font-size: 16px; }
html[data-design="iysal"] label.fld > span:first-child, html[data-design="iysal"] label.fld span.pay-label { font-size: 14px; }
html[data-design="iysal"] .list-item .sub, html[data-design="iysal"] .muted, html[data-design="iysal"] .kpi .kpi-top { font-size: 13px; }
html[data-design="iysal"] .qa, html[data-design="iysal"] .hero-meta { font-size: 13.5px; }
html[data-design="iysal"] .ico.txt { font-size: 10.5px; font-family: var(--font-num); }
html[data-design="iysal"] .list-item { border-bottom: 1px dashed var(--line-2); }
html[data-design="iysal"] .list-item .title { font-size: 15px; }
html[data-design="iysal"] .kv { border-bottom: 1px dashed var(--line-2); }
html[data-design="iysal"] .day-head { border-bottom: 3px double var(--line-2); padding: 0 2px 5px; margin-inline: 2px; font-size: 14px; }
html[data-design="iysal"] .day-head .day-sum { font-family: var(--font-num); }
html[data-design="iysal"] .section-title { font-size: 14px; color: var(--ink); }
/* البطاقة الرئيسية: إيصال مطبوع بحافة مسننة في أسفله */
html[data-design="iysal"] .hero {
  overflow: visible; text-align: center; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: 3px 3px 0 0;
  padding: 18px 18px 14px; margin-bottom: 24px; box-shadow: 0 8px 14px -12px rgba(70, 50, 20, .35);
}
html[data-design="iysal"] .hero::after {
  content: ""; position: absolute; inset: auto -1px -9px -1px; width: auto; height: 9px; border-radius: 0;
  background: conic-gradient(from -45deg at bottom, var(--surface) 90deg, transparent 0) 50% 0 / 14px 100%;
}
html[data-design="iysal"] .hero::before { display: none; }
html[data-design="iysal"] .hero-top { flex-direction: column; align-items: center; gap: 6px; }
html[data-design="iysal"] .hero-label { justify-content: center; color: var(--hint); font-size: 14px; }
html[data-design="iysal"] .hero-value { font-size: 34px; font-weight: 600; letter-spacing: -1px; }
html[data-design="iysal"] .hero-value small, html[data-design="iysal"] .hero-meta, html[data-design="iysal"] .hero-foot { color: var(--hint); }
html[data-design="iysal"] .hero-value small { font-family: var(--font); }
html[data-design="iysal"] .hero-meta { justify-content: center; border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2); padding: 7px 0; margin-top: 12px; }
html[data-design="iysal"] .hero-meta b { color: var(--ink); font-family: var(--font-num); }
html[data-design="iysal"] .hero .delta {
  background: transparent; border: 1.5px solid currentColor; border-radius: 3px; transform: rotate(-4deg);
  font-family: var(--font-num); font-size: 12px; padding: 2px 8px; color: var(--ink-2);
}
html[data-design="iysal"] .hero .delta.pos { color: var(--green); background: transparent; }
html[data-design="iysal"] .hero .delta.neg { color: var(--red); background: transparent; }
html[data-design="iysal"] .hero .ico { background: transparent; color: var(--accent); }
html[data-design="iysal"] .hero-spark i { background: color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 0; }
html[data-design="iysal"] .hero-spark i.today { background: var(--accent); }
html[data-design="iysal"] .hero-spark i.neg { background: color-mix(in srgb, var(--red) 45%, transparent); }
html[data-design="iysal"] .hero.soft { text-align: right; }
html[data-design="iysal"] .hero.soft .hero-label, html[data-design="iysal"] .hero.soft .hero-meta { justify-content: flex-start; }
html[data-design="iysal"] .ico { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent); }
html[data-design="iysal"] .badge { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; font-size: 11.5px; }
html[data-design="iysal"] .delta { border-radius: 3px; }
html[data-design="iysal"] button.btn { box-shadow: 0 2px 0 var(--accent-2); font-size: 16px; }
html[data-design="iysal"] button.btn.secondary, html[data-design="iysal"] .card button.btn.secondary,
html[data-design="iysal"] .modal button.btn.secondary { background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none; }
html[data-design="iysal"] button.btn.danger { box-shadow: 0 2px 0 #7d1a14; }
html[data-design="iysal"] button.btn.ghost { box-shadow: none; }
html[data-design="iysal"] .tabs button { border-radius: 3px; background: transparent; border-color: var(--line-2); }
html[data-design="iysal"] .tabs button.active { background: var(--ink); color: var(--surface); }
html[data-design="iysal"] .seg { background: transparent; border: 1px solid var(--line-2); border-radius: 4px; }
html[data-design="iysal"] .seg button { border-radius: 2px; }
html[data-design="iysal"] .seg button.active, html[data-design="iysal"].dark .seg button.active { background: var(--ink); color: var(--surface); box-shadow: none; }
/* الحقول: كتابة على السطر مثل استمارة ورقية */
html[data-design="iysal"] input:not([type="checkbox"]):not([type="radio"]), html[data-design="iysal"] select, html[data-design="iysal"] textarea {
  background-color: transparent; border: none; border-bottom: 1.5px solid var(--line-2); border-radius: 0; padding-inline: 4px;
}
html[data-design="iysal"] select { padding-left: 28px; background-position: left 4px center; }
html[data-design="iysal"] textarea { border: 1.5px dashed var(--line-2); border-radius: 3px; }
html[data-design="iysal"] input:not([type="checkbox"]):not([type="radio"]):focus, html[data-design="iysal"] select:focus, html[data-design="iysal"] textarea:focus {
  background-color: transparent; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent);
}
html[data-design="iysal"] input:disabled { border-bottom-style: dashed; background: transparent; }
html[data-design="iysal"] input[type="number"] { font-family: var(--font-num); }
html[data-design="iysal"] .search-box input { border: 1px solid var(--line-2); border-radius: 3px; background-color: var(--surface); }
html[data-design="iysal"] .filter-btn { border-radius: 3px; border-color: var(--line-2); box-shadow: none; }
html[data-design="iysal"] .switch-line { background: transparent; border: 1px dashed var(--line-2); }
html[data-design="iysal"] .qa { border: 1px dashed var(--line-2); box-shadow: none; border-radius: 4px; }
html[data-design="iysal"] .wchip { border: 1px solid var(--line); border-radius: 3px; }
html[data-design="iysal"] .attn { border-radius: 3px; border: 1.5px dashed color-mix(in srgb, var(--amber) 55%, transparent); }
html[data-design="iysal"] .attn.red { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
html[data-design="iysal"] .step-box { border-radius: 3px; }
html[data-design="iysal"] #bottom-nav { background: var(--surface); border-top: 3px double var(--line-2); box-shadow: none; }
html[data-design="iysal"] #bottom-nav button { font-size: 12px; }
html[data-design="iysal"] #bottom-nav button.active .nav-icon { background: transparent; }
html[data-design="iysal"] #bottom-nav button.active > span:last-child { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
html[data-design="iysal"] #bottom-nav button.fab .nav-icon {
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--bg);
  outline: 1.5px dashed var(--accent); outline-offset: 3px;
}
html[data-design="iysal"] .modal { border-radius: 4px 4px 0 0; }
html[data-design="iysal"] .modal::before { height: 0; border-top: 2px dashed var(--line-2); background: none; width: 56px; }
html[data-design="iysal"] .modal-close { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-design="iysal"] .toast { border-radius: 3px; background: var(--ink); color: var(--surface); }
html[data-design="iysal"] .save-bar { border-radius: 4px; border: 1px solid var(--line-2); }
html[data-design="iysal"] .notice { border-radius: 3px; }
html[data-design="iysal"] .big-profit { border-radius: 3px; background: transparent; border: 1.5px dashed var(--line-2); }

/* ================================================================================== اشحن */
/* هوية المتجر: تدرّج الشعار الأزرق البنفسجي في البطاقة الرئيسية وعليها صاعقة الشعار الذهبية،
   زر «＋» ذهبي، مربعات أيقونات ملوّنة كاملة، وخط Cairo العريض كما في واجهة المتجر. */
html[data-design="ich7an"] {
  --bg: #f2f3fa;
  --surface: #ffffff;
  --surface-2: #f7f8fd;
  --field: #eff1f9;
  --ink: #0a0c16;
  --ink-2: #3d4570;
  --hint: #7c84ab;
  --line: rgba(10, 12, 22, .07);
  --line-2: rgba(10, 12, 22, .13);
  --accent: #5b5cec;
  --accent-2: #7443ea;
  --accent-ink: #ffffff;
  --accent-soft: rgba(91, 92, 236, .1);
  --accent-soft-2: rgba(91, 92, 236, .17);
  --green: #0f9f66;
  --red: #e5484d;
  --amber: #e8651c;
  --violet: #7443ea;
  --teal: #0e9fb3;
  --blue: #5470ee;
  --green-soft: rgba(15, 159, 102, .1);
  --red-soft: rgba(229, 72, 77, .09);
  --amber-soft: rgba(232, 101, 28, .11);
  --violet-soft: rgba(116, 67, 234, .1);
  --teal-soft: rgba(14, 159, 179, .1);
  --gray-soft: rgba(61, 69, 112, .08);
  --hero-ink: #ffffff;
  --hero-hint: rgba(255, 255, 255, .76);
  --brand: linear-gradient(135deg, #5470ee, #7443ea);
  --gold: linear-gradient(135deg, #ffdc90, #ffb25c);
  --shadow: 0 1px 2px rgba(20, 22, 60, .05), 0 10px 26px -16px rgba(60, 50, 170, .3);
  --shadow-up: 0 -8px 28px -14px rgba(60, 50, 170, .32);
  --radius: 20px;
  --radius-sm: 14px;
  --btn-radius: 14px;
  --ico-radius: 14px;
  --font: "Cairo", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}
html[data-design="ich7an"].dark {
  --bg: #0a0c16;
  --surface: #12152a;
  --surface-2: #171b33;
  --field: #1a1f3a;
  --ink: #ecf0ff;
  --ink-2: #b9c0e4;
  --hint: #9aa3c8;
  --line: rgba(236, 240, 255, .07);
  --line-2: rgba(236, 240, 255, .13);
  --accent: #8a93ff;
  --accent-2: #a37cff;
  --accent-ink: #0a0c16;
  --accent-soft: rgba(138, 147, 255, .13);
  --accent-soft-2: rgba(138, 147, 255, .21);
  --green: #3ad69b;
  --red: #ff6b70;
  --amber: #ffa45c;
  --violet: #a37cff;
  --teal: #3fd0e0;
  --blue: #7d95ff;
  --green-soft: rgba(58, 214, 155, .12);
  --red-soft: rgba(255, 107, 112, .12);
  --amber-soft: rgba(255, 164, 92, .13);
  --violet-soft: rgba(163, 124, 255, .14);
  --teal-soft: rgba(63, 208, 224, .12);
  --gray-soft: rgba(185, 192, 228, .09);
  --shadow: 0 0 0 1px rgba(236, 240, 255, .04);
  --shadow-up: 0 -1px 0 rgba(236, 240, 255, .06);
}
html[data-design="ich7an"] #topbar h1, html[data-design="ich7an"] .card h3, html[data-design="ich7an"] .tile b,
html[data-design="ich7an"] .hero-value, html[data-design="ich7an"] .kpi-val { font-weight: 800; }
html[data-design="ich7an"] #topbar h1 { font-size: 21px; letter-spacing: 0; }
html[data-design="ich7an"] .avatar { background: var(--brand); color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #ffb25c; }
html[data-design="ich7an"] .card, html[data-design="ich7an"] .kpi, html[data-design="ich7an"] .qa, html[data-design="ich7an"] .tile,
html[data-design="ich7an"] .wchip, html[data-design="ich7an"] .menu-list { border-color: transparent; }
html[data-design="ich7an"].dark .card, html[data-design="ich7an"].dark .kpi, html[data-design="ich7an"].dark .qa,
html[data-design="ich7an"].dark .tile, html[data-design="ich7an"].dark .wchip, html[data-design="ich7an"].dark .menu-list { border-color: var(--line); }
html[data-design="ich7an"] .hero {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 73'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffdc90'/%3E%3Cstop offset='1' stop-color='%23ffb25c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 0L56 0L56 14L38.5 33L49 33L13 73L22.5 42.5L11.5 42.5L37.5 14L0 14Z'/%3E%3C/svg%3E") no-repeat left 18px top 16px / 54px auto,
    radial-gradient(130% 120% at 100% 0%, rgba(255, 255, 255, .2), transparent 52%),
    var(--brand);
  box-shadow: 0 18px 34px -20px rgba(84, 72, 234, .85);
}
html[data-design="ich7an"] .hero::after { inset: auto auto -90px -60px; width: 230px; height: 230px; background: radial-gradient(circle, rgba(255, 178, 92, .24), transparent 64%); }
html[data-design="ich7an"] .hero-top { flex-direction: column; gap: 8px; }
html[data-design="ich7an"] .hero-value { font-size: 36px; letter-spacing: -.5px; }
html[data-design="ich7an"] .hero .delta { background: rgba(255, 255, 255, .16); }
html[data-design="ich7an"] .hero .delta.pos, html[data-design="ich7an"] .hero .delta.neg { background: var(--gold); color: #3a2105; }
html[data-design="ich7an"] .hero-spark i { background: rgba(255, 255, 255, .26); }
html[data-design="ich7an"] .hero-spark i.today { background: #ffc870; }
html[data-design="ich7an"] .hero.soft { background: var(--surface); }
html[data-design="ich7an"] .hero.soft::before { background: linear-gradient(90deg, #5470ee, #7443ea, #ffb25c); }
html[data-design="ich7an"] .qa .ico, html[data-design="ich7an"] .tile .ico { background: var(--brand); color: #fff; }
html[data-design="ich7an"] .qa .ico.violet, html[data-design="ich7an"] .tile .ico.violet { background: linear-gradient(135deg, #9b6bff, #6a35e0); }
html[data-design="ich7an"] .qa .ico.teal, html[data-design="ich7an"] .tile .ico.teal { background: linear-gradient(135deg, #2fd0e3, #0b8ea2); }
html[data-design="ich7an"] .qa .ico.red, html[data-design="ich7an"] .tile .ico.red { background: linear-gradient(135deg, #ff7b7f, #e5484d); }
html[data-design="ich7an"] .qa .ico.amber, html[data-design="ich7an"] .tile .ico.amber { background: linear-gradient(135deg, #ffb25c, #e8651c); }
html[data-design="ich7an"] .qa .ico.green, html[data-design="ich7an"] .tile .ico.green { background: linear-gradient(135deg, #3fe0a4, #0f9f66); }
html[data-design="ich7an"] .qa { font-weight: 700; }
html[data-design="ich7an"] button.btn:not(.secondary):not(.danger):not(.ghost) {
  background: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px rgba(84, 72, 234, .85);
}
html[data-design="ich7an"] .tabs button.active, html[data-design="ich7an"] .card .tabs button.active { background: var(--brand); color: #fff; border-color: transparent; }
html[data-design="ich7an"] .seg button.active { color: var(--accent); }
html[data-design="ich7an"] #bottom-nav button.fab .nav-icon {
  border-radius: 18px; background: var(--gold); color: #0a0c16;
  box-shadow: 0 12px 22px -8px rgba(255, 150, 60, .75), 0 0 0 5px var(--bg);
}
html[data-design="ich7an"] #bottom-nav button.active .nav-icon { background: var(--accent-soft); }
html[data-design="ich7an"] .switch-line input:checked { background: var(--brand); }
html[data-design="ich7an"] .wchip { border-radius: 18px; }
html[data-design="ich7an"] .day-head { color: var(--ink); }

/* ================================================================================== برو */
/* مكثّف ومهني: مسافات أصغر وخط Readex Pro الواضح، حدود رفيعة بلا ظلال، زوايا صغيرة، مؤشر خطي تحت
   الصفحة الحالية، وأزرار الإدخال السريع أفقية — أسطر وأرقام أكثر في الشاشة الواحدة. */
html[data-design="pro"] {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --field: #f4f6f9;
  --ink: #0f172a;
  --ink-2: #334155;
  --hint: #64748b;
  --line: #e3e8ef;
  --line-2: #cfd7e2;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(37, 99, 235, .08);
  --accent-soft-2: rgba(37, 99, 235, .14);
  --green: #15803d;
  --red: #dc2626;
  --amber: #b45309;
  --violet: #6d28d9;
  --teal: #0e7490;
  --blue: #2563eb;
  --green-soft: rgba(21, 128, 61, .09);
  --red-soft: rgba(220, 38, 38, .08);
  --amber-soft: rgba(180, 83, 9, .1);
  --violet-soft: rgba(109, 40, 217, .09);
  --teal-soft: rgba(14, 116, 144, .09);
  --gray-soft: rgba(51, 65, 85, .07);
  --hero-ink: #0f172a;
  --hero-hint: #64748b;
  --shadow: none;
  --shadow-up: 0 -1px 0 var(--line);
  --radius: 10px;
  --radius-sm: 8px;
  --btn-radius: 8px;
  --ico-radius: 8px;
  --nav-h: 58px;
  --header: var(--surface);   /* رأس تلجرام بلون الشريط العلوي الأبيض */
  --font: "Readex Pro", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}
html[data-design="pro"].dark {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2129;
  --field: #0d1117;
  --ink: #e6edf3;
  --ink-2: #c9d1d9;
  --hint: #8b949e;
  --line: #262c36;
  --line-2: #3d444d;
  --accent: #4493f8;
  --accent-2: #2f81f7;
  --accent-ink: #ffffff;
  --accent-soft: rgba(68, 147, 248, .12);
  --accent-soft-2: rgba(68, 147, 248, .2);
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --violet: #a371f7;
  --teal: #39c5cf;
  --blue: #4493f8;
  --green-soft: rgba(63, 185, 80, .13);
  --red-soft: rgba(248, 81, 73, .13);
  --amber-soft: rgba(210, 153, 34, .14);
  --violet-soft: rgba(163, 113, 247, .14);
  --teal-soft: rgba(57, 197, 207, .13);
  --gray-soft: rgba(201, 209, 217, .09);
  --hero-ink: #e6edf3;
  --hero-hint: #8b949e;
}
html[data-design="pro"] body { font-size: 14px; }
html[data-design="pro"] #topbar { min-height: 52px; padding: 7px 12px; background: var(--surface); box-shadow: 0 1px 0 var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-design="pro"] #topbar h1 { font-size: 17px; font-weight: 600; letter-spacing: 0; }
html[data-design="pro"] #page-sub { font-size: 11.5px; }
html[data-design="pro"] #top-back, html[data-design="pro"] .top-btn, html[data-design="pro"] .avatar { width: 34px; height: 34px; border-radius: 8px; }
html[data-design="pro"] #top-back, html[data-design="pro"] .top-btn { box-shadow: inset 0 0 0 1px var(--line); }
html[data-design="pro"] .avatar { font-size: 12.5px; }
html[data-design="pro"] #view { padding: 10px 10px calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); }
html[data-design="pro"] .card { padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); }
html[data-design="pro"] .card.list { padding: 0 12px; }
html[data-design="pro"] .card.list > .list-item:first-of-type { padding-top: 8px; }
html[data-design="pro"] .card.list > .list-item:last-child { padding-bottom: 8px; }
html[data-design="pro"] .card h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
html[data-design="pro"] .card-head { margin-bottom: 4px; }
html[data-design="pro"] .hero { color: var(--hero-ink); background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; box-shadow: none; }
html[data-design="pro"] .hero::after, html[data-design="pro"] .hero.soft::before { display: none; }
html[data-design="pro"] .hero-label { font-size: 12px; }
html[data-design="pro"] .hero-value { font-size: 28px; letter-spacing: -.8px; margin: 2px 0; }
html[data-design="pro"] .hero-meta { margin-top: 6px; font-size: 12px; }
html[data-design="pro"] .hero .delta { background: var(--gray-soft); color: var(--ink-2); border-radius: 4px; }
html[data-design="pro"] .hero .delta.pos { background: var(--green-soft); color: var(--green); }
html[data-design="pro"] .hero .delta.neg { background: var(--red-soft); color: var(--red); }
html[data-design="pro"] .hero .ico { background: var(--accent-soft); color: var(--accent); }
html[data-design="pro"] .hero-spark { height: 56px; margin-top: 12px; gap: 3px; }
html[data-design="pro"] .hero-spark i.sel { background: var(--accent); }
html[data-design="pro"] .hero-spark i.neg.sel { background: var(--red); }
html[data-design="pro"] .hero-foot { margin-top: 8px; font-size: 12px; color: var(--hint); }
html[data-design="pro"] .attn-x { width: 28px; height: 28px; border-radius: 6px; }
html[data-design="pro"] .hero-spark i { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 2px; }
html[data-design="pro"] .hero-spark i.today { background: var(--accent); }
html[data-design="pro"] .hero-spark i.neg { background: color-mix(in srgb, var(--red) 45%, transparent); }
html[data-design="pro"] .greet { display: none; }
html[data-design="pro"] .kpi-grid, html[data-design="pro"] .cards-grid { gap: 8px; margin-bottom: 10px; }
html[data-design="pro"] .kpi { padding: 9px 11px; gap: 4px; border: 1px solid var(--line); }
html[data-design="pro"] .kpi .kpi-val { font-size: 16px; }
html[data-design="pro"] .qa-grid { gap: 6px; margin-bottom: 10px; }
html[data-design="pro"] .qa { flex-direction: row; justify-content: flex-start; gap: 7px; padding: 7px 8px; font-size: 12px; font-weight: 600;
  border-radius: 8px; border: 1px solid var(--line); box-shadow: none; }
html[data-design="pro"] .qa .ico { width: 26px; height: 26px; border-radius: 7px; }
html[data-design="pro"] .qa .ico svg.ic { width: 15px; height: 15px; }
html[data-design="pro"] .ico { width: 32px; height: 32px; }
html[data-design="pro"] .ico svg.ic { width: 17px; height: 17px; }
html[data-design="pro"] .ico.txt { font-size: 9.5px; letter-spacing: -.2px; overflow: hidden; }
html[data-design="pro"] .list-item { padding: 8px 0; min-height: 44px; gap: 10px; }
html[data-design="pro"] .list-item .title { font-size: 13.5px; font-weight: 600; }
html[data-design="pro"] .list-item .sub { font-size: 11.5px; margin-top: 1px; }
html[data-design="pro"] .list-item .amount { font-size: 14px; }
html[data-design="pro"] .day-head { margin: 12px 4px 6px; font-size: 12px; }
html[data-design="pro"] .section-title { margin: 12px 4px 8px; font-size: 12.5px; }
html[data-design="pro"] .wchip { min-width: 124px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); }
html[data-design="pro"] .wchip b { font-size: 15px; }
html[data-design="pro"] .attn { border-radius: 8px; padding: 9px 12px; }
html[data-design="pro"] .attn .ico { width: 30px; height: 30px; }
html[data-design="pro"] button.btn { min-height: 42px; font-size: 14.5px; font-weight: 600; padding: 9px 14px; }
html[data-design="pro"] button.btn.small { min-height: 32px; font-size: 13px; }
html[data-design="pro"] button.btn.stack { min-height: 60px; }
html[data-design="pro"] .tabs { gap: 4px; margin-bottom: 10px; }
html[data-design="pro"] .tabs button { border-radius: 6px; min-height: 32px; padding: 5px 11px; font-size: 13px; }
html[data-design="pro"] .tabs button.active, html[data-design="pro"] .card .tabs button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-design="pro"] .seg { border-radius: 8px; padding: 3px; }
html[data-design="pro"] .seg button { border-radius: 6px; min-height: 34px; padding: 6px; font-size: 13px; }
html[data-design="pro"] label.fld { margin-bottom: 10px; }
html[data-design="pro"] input:not([type="checkbox"]):not([type="radio"]), html[data-design="pro"] select, html[data-design="pro"] textarea {
  min-height: 42px; padding: 9px 12px; border-radius: 8px; font-size: 15px; background-color: var(--surface); border: 1px solid var(--line-2);
}
html[data-design="pro"] input:not([type="checkbox"]):not([type="radio"]):focus, html[data-design="pro"] select:focus, html[data-design="pro"] textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft-2); }
html[data-design="pro"] .search-box input { box-shadow: none; }
html[data-design="pro"] .filter-btn { width: 42px; border-radius: 8px; box-shadow: none; }
html[data-design="pro"] .switch-line { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
html[data-design="pro"] .form-sec { margin: 12px 2px 8px; }
html[data-design="pro"] #bottom-nav { padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); box-shadow: none; background: var(--surface); }
html[data-design="pro"] #bottom-nav button { position: relative; font-size: 10.5px; }
html[data-design="pro"] #bottom-nav .nav-icon { width: 40px; height: 26px; border-radius: 6px; }
html[data-design="pro"] #bottom-nav button.active .nav-icon { background: transparent; }
html[data-design="pro"] #bottom-nav button.active:not(.fab)::before {
  content: ""; position: absolute; top: -6px; left: 26%; right: 26%; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent);
}
html[data-design="pro"] #bottom-nav button.fab .nav-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-top: -18px; background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--bg);
}
html[data-design="pro"] .save-bar { bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom)); border-radius: 12px; padding: 8px; }
html[data-design="pro"] .modal { border-radius: 14px 14px 0 0; padding-inline: 12px; }
html[data-design="pro"] .modal > h3 { font-size: 16px; }
html[data-design="pro"] .modal-close { border-radius: 8px; }
html[data-design="pro"] .badge { border-radius: 4px; padding: 3px 7px; font-size: 11px; }
html[data-design="pro"] .toast { border-radius: 8px; }
html[data-design="pro"] .tile { min-height: 96px; padding: 12px; border: 1px solid var(--line); }
html[data-design="pro"] .menu-list { border-radius: 10px; }
html[data-design="pro"] .menu-list button { padding: 10px 2px; font-size: 14px; }
html[data-design="pro"] .kv { padding: 9px 2px; font-size: 13.5px; }
html[data-design="pro"] .chart-box { height: 180px; }