/* lino-classic-v7-miniapp: visual language shared with the Lino subscription page */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --page: #f7fbff;
  --surface: rgba(255,255,255,.92);
  --surface-2: #f6f9fc;
  --surface-3: #eef7ff;
  --text: #173454;
  --muted: #72869a;
  --line: #dce6ef;
  --primary: #147fe4;
  --primary-2: #0d5eaf;
  --green: #20aa6b;
  --amber: #b67b08;
  --hero: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,247,255,.97));
  --card: rgba(255,255,255,.94);
  --card-primary: linear-gradient(145deg, #edf7ff, #ffffff);
  --trial: linear-gradient(105deg, #fff7e6, #eef7ff 82%);
  --nav: rgba(255,255,255,.94);
  --dialog: #ffffff;
  --backdrop: rgba(23,52,84,.38);
  --toast-bg: #e8f7ee;
  --toast-text: #15553a;
  --shadow: 0 18px 55px rgba(35,79,120,.08);
  --shadow-2: 0 7px 24px rgba(35,79,120,.055);
  --warm-glow: rgba(255,229,184,.57);
  --cool-glow: rgba(184,219,255,.65);
  --bottom-pad: 98px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b131b;
  --surface: rgba(15,24,33,.95);
  --surface-2: #111d28;
  --surface-3: #10283d;
  --text: #e7f0f8;
  --muted: #9aafc0;
  --line: rgba(181,205,226,.14);
  --primary: #55b3ff;
  --primary-2: #9bd5ff;
  --green: #68d9a1;
  --amber: #eac36b;
  --hero: linear-gradient(135deg, #111e29, #10283d 78%);
  --card: rgba(15,24,33,.95);
  --card-primary: linear-gradient(145deg, #10283d, #111d28);
  --trial: linear-gradient(105deg, #2b2415, #122539 82%);
  --nav: rgba(11,19,27,.95);
  --dialog: #101e2a;
  --backdrop: rgba(0,0,0,.64);
  --toast-bg: #e8f3fb;
  --toast-text: #173454;
  --shadow: 0 18px 55px rgba(0,0,0,.24);
  --shadow-2: 0 7px 24px rgba(0,0,0,.16);
  --warm-glow: rgba(110,79,24,.23);
  --cool-glow: rgba(20,74,120,.30);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(620px 330px at 1% 8%, var(--warm-glow), transparent 73%),
    radial-gradient(620px 360px at 100% 9%, var(--cool-glow), transparent 73%),
    radial-gradient(720px 390px at 50% 100%, rgba(214,237,255,.30), transparent 74%),
    var(--page);
  font: 14px/1.75 'Vazirmatn', Tahoma, Arial, sans-serif;
  transition: background-color .2s ease, color .2s ease;
}
:root[data-theme="dark"] body { background: radial-gradient(620px 330px at 1% 8%,var(--warm-glow),transparent 73%),radial-gradient(620px 360px at 100% 9%,var(--cool-glow),transparent 73%),linear-gradient(180deg,#0b1117 0%,#0d1720 56%,#0b131b 100%); }
button { font: inherit; }
.app-shell { width: min(100%, 560px); margin: 0 auto; min-height: 100vh; padding: calc(13px + env(safe-area-inset-top)) 16px calc(var(--bottom-pad) + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; gap:10px; margin:2px 1px 19px; direction:rtl; }
.brand-mark { width:46px; height:46px; flex:0 0 46px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(145deg,#4aa8f3,#147fe4); border:1px solid rgba(13,94,175,.10); box-shadow:0 8px 22px rgba(20,127,228,.19); color:#fff; font-size:25px; font-weight:800; }
.brand-copy { display:flex; flex-direction:column; gap:1px; min-width:0; }
.brand-copy strong { font-size:17px; line-height:1.5; letter-spacing:-.4px; font-weight:800; }
.brand-copy span { color:var(--muted); font-size:10px; line-height:1.7; }
.header-actions { display:flex; align-items:center; gap:7px; margin-right:auto; }
.theme-toggle { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; color:var(--primary-2); background:var(--surface); box-shadow:var(--shadow-2); cursor:pointer; font-size:18px; transition:transform .15s, background .2s; }
.theme-toggle:active { transform:scale(.94); }
.theme-toggle:focus-visible,.action-card:focus-visible,.trial-card:focus-visible,.nav-item:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.secure-pill { border:1px solid rgba(32,170,107,.20); border-radius:999px; padding:5px 9px; color:var(--green); font-size:10px; font-weight:700; display:flex; align-items:center; gap:6px; background:rgba(32,170,107,.07); white-space:nowrap; }
.secure-pill i,.live-dot { display:block; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(32,170,107,.38); }
.welcome-card { position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--line); border-radius:24px; padding:21px 19px 17px; background:var(--hero); min-height:192px; box-shadow:var(--shadow); }
.welcome-card:before { content:""; position:absolute; z-index:-1; width:210px; height:210px; left:-92px; top:-112px; border-radius:50%; background:var(--cool-glow); filter:blur(7px); }
.welcome-card:after { content:""; position:absolute; z-index:-1; width:132px; height:132px; right:-56px; bottom:-82px; border:1px solid rgba(20,127,228,.15); border-radius:50%; box-shadow:0 0 0 22px rgba(20,127,228,.035),0 0 0 44px rgba(20,127,228,.025); }
.eyebrow { position:relative; color:var(--primary-2); font-size:11px; display:flex; align-items:center; gap:6px; font-weight:800; }
.sparkle { color:var(--amber); font-size:16px; }
.welcome-card h1 { position:relative; margin:10px 0 6px; font-size:21px; line-height:1.75; letter-spacing:-.45px; font-weight:800; max-width:95%; }
.welcome-card p { position:relative; margin:0; color:var(--muted); font-size:11px; line-height:2; }
.welcome-footer { display:flex; align-items:center; gap:7px; position:relative; margin-top:14px; color:var(--muted); font-size:10px; }
.orbit { display:none; }
.welcome-card.authenticated { border-color:rgba(32,170,107,.25); }
.section-heading { margin:22px 2px 11px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.section-kicker { font-size:10px; color:var(--primary-2); font-weight:800; }
.section-heading h2 { font-size:17px; margin:1px 0 0; font-weight:800; letter-spacing:-.3px; }
.section-symbol { color:var(--primary); font-size:22px; }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.action-card { min-width:0; width:100%; font:inherit; text-align:right; color:var(--text); position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:146px; padding:14px 13px 13px; border-radius:18px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-2); cursor:pointer; transition:transform .15s,border-color .15s,background .2s; appearance:none; -webkit-appearance:none; }
.action-card:active { transform:scale(.985); }
.primary-action { background:var(--card-primary); border-color:rgba(20,127,228,.22); }
.action-icon { width:35px; height:35px; border-radius:12px; background:rgba(20,127,228,.09); color:var(--primary); border:1px solid rgba(20,127,228,.08); display:grid; place-items:center; font-size:21px; font-weight:600; margin-bottom:9px; }
.icon-blue { color:#2086d6; background:rgba(72,169,240,.10); }
.icon-purple { color:#8465c8; background:rgba(132,101,200,.10); }
.icon-orange { color:var(--amber); background:rgba(182,123,8,.10); }
:root[data-theme="dark"] .icon-blue { color:#7ecaff; }
:root[data-theme="dark"] .icon-purple { color:#c5b4ff; }
:root[data-theme="dark"] .icon-orange { color:#f0ca6f; }
.action-title { font-weight:800; font-size:12px; margin-bottom:3px; }
.action-desc { color:var(--muted); font-size:10px; line-height:1.8; }
.action-arrow { position:absolute; left:12px; bottom:10px; color:var(--primary); font-size:16px; }
.trial-card { width:100%; display:flex; align-items:center; gap:11px; margin-top:12px; padding:13px; border:1px solid rgba(182,123,8,.20); border-radius:17px; background:var(--trial); color:var(--text); text-align:right; cursor:pointer; box-shadow:var(--shadow-2); transition:transform .15s,border-color .15s; }
.trial-card:active { transform:scale(.99); }
.trial-icon { width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; border-radius:13px; color:var(--amber); background:rgba(182,123,8,.11); font-size:22px; }
.trial-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.trial-copy strong { font-size:13px; font-weight:800; }
.trial-copy small { color:var(--muted); font-size:10px; line-height:1.8; }
.trial-arrow { color:var(--primary); font-size:19px; }
.notice-card { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:13px 12px; margin-top:12px; box-shadow:var(--shadow-2); }
.notice-icon { flex:0 0 31px; height:31px; border-radius:11px; background:rgba(20,127,228,.09); color:var(--primary); display:grid; place-items:center; }
.notice-card strong { font-size:12px; font-weight:800; }
.notice-card p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.95; }
.footer-note { text-align:center; color:var(--muted); font-size:10px; margin:17px 0 0; }
.footer-note span { padding:0 5px; color:var(--primary); }
.bottom-nav { position:fixed; z-index:5; bottom:0; left:0; right:0; width:min(100%,560px); margin:0 auto; padding:9px 13px calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); background:var(--nav); border:1px solid var(--line); border-bottom:0; border-radius:17px 17px 0 0; box-shadow:0 -6px 26px rgba(31,66,98,.06); backdrop-filter:blur(22px); }
.nav-item { border:0; border-radius:11px; background:transparent; color:var(--muted); font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; cursor:pointer; transition:background .18s,color .18s; }
.nav-item span { font-size:22px; line-height:1.15; }
.nav-item small { font-family:inherit; font-size:9px; }
.nav-item.active { color:var(--primary-2); background:rgba(20,127,228,.075); }
:root[data-theme="dark"] .nav-item.active { color:#8ecbff; background:rgba(85,179,255,.10); }
.toast { position:fixed; z-index:20; bottom:calc(84px + env(safe-area-inset-bottom)); right:18px; left:18px; max-width:520px; margin:auto; padding:11px 14px; border-radius:13px; background:var(--toast-bg); color:var(--toast-text); border:1px solid var(--line); font-size:12px; line-height:1.8; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translateY(0); }
.info-dialog { width:calc(100% - 34px); max-width:390px; border:1px solid var(--line); border-radius:21px; background:var(--dialog); color:var(--text); padding:22px; text-align:center; font-family:inherit; box-shadow:var(--shadow); }
.info-dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(3px); }
.dialog-mark { width:42px; height:42px; margin:0 auto 10px; border-radius:13px; display:grid; place-items:center; background:rgba(20,127,228,.10); color:var(--primary); font-size:22px; }
.info-dialog h3 { margin:0 0 8px; font-size:16px; font-weight:800; }
.info-dialog p { margin:0; color:var(--muted); font-size:12px; line-height:2; }
.info-dialog button { width:100%; margin-top:17px; padding:11px; border:0; border-radius:12px; background:var(--primary); color:#fff; font-family:inherit; font-weight:800; cursor:pointer; }
@media (min-width:480px) { .app-shell { padding-top:20px; } .welcome-card { padding:24px 22px 19px; } .welcome-card h1 { font-size:23px; } .action-card { min-height:153px; padding:15px; } }
@media (max-width:380px) { .app-shell { padding-left:11px; padding-right:11px; } .topbar { gap:7px; } .brand-copy strong { font-size:15px; } .secure-pill { padding:5px 7px; } .action-grid { gap:7px; } .action-card { padding:12px 10px; min-height:143px; } .action-desc { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }