/* ===== GiGPay Design System v1.0.4 ===== */

:root {
    --g-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --g-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --g-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --g-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --g-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --g-dark: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

    --bg: #0b1020;
    --bg-2: #121a33;
    --card: rgba(255,255,255,0.06);
    --card-solid: #16203c;
    --border: rgba(255,255,255,0.12);
    --text: #ffffff;
    --text-2: #a7b0c8;
    --text-3: #6b7590;
    --accent: #667eea;
    --accent-2: #f093fb;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
    --shadow-soft: 0 4px 14px rgba(0,0,0,0.25);
    --radius: 18px;
    --radius-lg: 26px;
}

[data-theme="light"] {
    --bg: #f4f6fc;
    --bg-2: #ffffff;
    --card: rgba(255,255,255,0.85);
    --card-solid: #ffffff;
    --border: rgba(30,40,90,0.10);
    --text: #17203c;
    --text-2: #5a6486;
    --text-3: #98a0b8;
    --shadow: 0 10px 30px rgba(80,90,160,0.15);
    --shadow-soft: 0 4px 14px rgba(80,90,160,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Vazirmatn',Tahoma,sans-serif; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; }
body { background:var(--bg); color:var(--text); min-height:100vh; transition:background .3s,color .3s; }
button { font-family:inherit; }
input,select,textarea { font-family:inherit; }

.app-shell { max-width:480px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:96px; background:var(--bg); }

/* ===== هدر ===== */
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 10px; }
.top-bar .brand { font-size:1.35rem; font-weight:800; background:var(--g-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.top-icons { display:flex; gap:14px; align-items:center; }
.icon-btn { width:42px; height:42px; border-radius:14px; border:1px solid var(--border); background:var(--card); color:var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:.25s; backdrop-filter:blur(8px); }
.icon-btn:active { transform:scale(.94); }
.icon-btn .badge { position:absolute; top:-4px; left:-4px; min-width:18px; height:18px; border-radius:9px; background:var(--g-pink); color:#fff; font-size:.65rem; display:flex; align-items:center; justify-content:center; padding:0 4px; font-weight:700; }
.avatar { width:42px; height:42px; border-radius:14px; background:var(--g-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer; box-shadow:var(--shadow-soft); }

/* ===== کارت موجودی ===== */
.balance-hero { margin:8px 20px 18px; border-radius:var(--radius-lg); padding:26px 22px; position:relative; overflow:hidden; background:var(--g-primary); color:#fff; box-shadow:var(--shadow); }
.balance-hero.pink { background:var(--g-pink); }
.balance-hero::after { content:'$'; position:absolute; left:-10px; bottom:-70px; font-size:200px; font-weight:900; opacity:.10; pointer-events:none; }
.balance-hero .lbl { font-size:.85rem; opacity:.9; display:flex; align-items:center; gap:8px; }
.balance-hero .amt { font-size:2.1rem; font-weight:900; margin:10px 0 4px; letter-spacing:-.5px; }
.balance-hero .sub { font-size:.9rem; opacity:.92; display:flex; align-items:center; gap:8px; }
.balance-hero .chip { background:rgba(255,255,255,.18); border-radius:20px; padding:5px 12px; font-size:.78rem; backdrop-filter:blur(6px); }
.eye-btn { background:none; border:none; color:#fff; opacity:.85; cursor:pointer; font-size:1rem; }

/* ===== گرید اکشن‌ها ===== */
.actions { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 20px 18px; }
.act { border:1px solid var(--border); background:var(--card); backdrop-filter:blur(10px); border-radius:var(--radius); padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; transition:.25s; }
.act:active { transform:scale(.95); }
.act .ic { width:46px; height:46px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; box-shadow:var(--shadow-soft); }
.act span { font-size:.72rem; color:var(--text-2); font-weight:600; }
.ic.g1{background:var(--g-blue)} .ic.g2{background:var(--g-pink)} .ic.g3{background:var(--g-primary)} .ic.g4{background:var(--g-orange)} .ic.g5{background:var(--g-green)} .ic.g6{background:var(--g-dark)}

/* ===== کارت‌ها و لیست‌ها ===== */
.card { margin:0 20px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); backdrop-filter:blur(10px); overflow:hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; }
.card-head h3 { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.card-head h3 i { color:var(--accent); }
.card-head .more { font-size:.78rem; color:var(--accent); cursor:pointer; font-weight:600; }
.list-item { display:flex; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--border); cursor:pointer; transition:.2s; }
.list-item:active { background:rgba(127,127,255,.06); }
.li-icon { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.li-icon.in { background:rgba(34,197,94,.15); color:var(--success); }
.li-icon.out { background:rgba(239,68,68,.15); color:var(--danger); }
.li-icon.pend { background:rgba(245,158,11,.15); color:var(--warning); }
.li-icon.info { background:rgba(102,126,234,.15); color:var(--accent); }
.li-body { flex:1; min-width:0; }
.li-title { font-size:.9rem; font-weight:600; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li-sub { font-size:.72rem; color:var(--text-3); display:flex; gap:6px; align-items:center; }
.li-end { text-align:left; flex-shrink:0; }
.li-amt { font-size:.92rem; font-weight:700; }
.li-amt.in { color:var(--success); } .li-amt.out { color:var(--danger); }
.li-date { font-size:.68rem; color:var(--text-3); margin-top:3px; }
.tag-chip { display:inline-block; background:rgba(102,126,234,.15); color:var(--accent); border-radius:8px; padding:1px 8px; font-size:.65rem; font-weight:600; }

/* ===== منوی پایین ===== */
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; display:flex; background:var(--bg-2); border-top:1px solid var(--border); padding:10px 6px calc(10px + env(safe-area-inset-bottom)); z-index:60; backdrop-filter:blur(16px); }
.bn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--text-3); cursor:pointer; border:none; background:none; padding:4px 0; transition:.25s; }
.bn-item i { font-size:1.25rem; transition:.25s; }
.bn-item span { font-size:.66rem; font-weight:600; }
.bn-item.active { color:var(--accent); }
.bn-item.active i { transform:translateY(-2px); text-shadow:0 6px 16px rgba(102,126,234,.6); }

/* ===== فرم‌ها ===== */
.field { margin-bottom:16px; }
.field label { display:block; font-size:.82rem; font-weight:600; color:var(--text-2); margin-bottom:8px; }
.inp-wrap { position:relative; }
.inp-wrap > i { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:.95rem; pointer-events:none; }
.inp { width:100%; background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:15px 44px 15px 16px; color:var(--text); font-size:.95rem; outline:none; transition:.25s; backdrop-filter:blur(8px); }
.inp:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(102,126,234,.15); }
.inp::placeholder { color:var(--text-3); }
select.inp { padding-right:16px; }
textarea.inp { padding-right:16px; resize:none; }

.btn { width:100%; border:none; border-radius:14px; padding:16px; font-size:.98rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:.25s; }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--g-primary); color:#fff; box-shadow:0 8px 20px rgba(102,126,234,.35); }
.btn-pink { background:var(--g-pink); color:#fff; box-shadow:0 8px 20px rgba(245,87,108,.3); }
.btn-ghost { background:var(--card); color:var(--text); border:1.5px solid var(--border); }
.btn-danger { background:rgba(239,68,68,.15); color:var(--danger); border:1.5px solid rgba(239,68,68,.3); }
.btn-sm { width:auto; padding:9px 16px; font-size:.8rem; border-radius:11px; }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* ===== باکس هشدار ===== */
.alert { margin:0 20px 14px; border-radius:14px; padding:13px 16px; font-size:.8rem; line-height:1.8; display:flex; gap:10px; align-items:flex-start; }
.alert i { margin-top:3px; }
.alert.warn { background:rgba(245,158,11,.12); color:var(--warning); border:1px solid rgba(245,158,11,.3); }
.alert.danger { background:rgba(239,68,68,.12); color:var(--danger); border:1px solid rgba(239,68,68,.3); }
.alert.info { background:rgba(102,126,234,.12); color:var(--accent); border:1px solid rgba(102,126,234,.3); }
.alert.ok { background:rgba(34,197,94,.12); color:var(--success); border:1px solid rgba(34,197,94,.3); }

/* ===== مودال پایین‌رو (Bottom Sheet) ===== */
.sheet-bg { position:fixed; inset:0; background:rgba(4,8,20,.66); backdrop-filter:blur(4px); z-index:90; display:none; align-items:flex-end; justify-content:center; }
.sheet-bg.open { display:flex; }
.sheet { width:100%; max-width:480px; background:var(--bg-2); border-radius:26px 26px 0 0; border-top:1px solid var(--border); padding:14px 20px calc(24px + env(safe-area-inset-bottom)); max-height:88vh; overflow-y:auto; animation:up .32s cubic-bezier(.16,1,.3,1); }
@keyframes up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.sheet-handle { width:44px; height:5px; border-radius:3px; background:var(--border); margin:0 auto 14px; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sheet-head h3 { font-size:1.1rem; font-weight:800; display:flex; gap:9px; align-items:center; }
.sheet-head h3 i { color:var(--accent); }
.close-x { width:34px; height:34px; border-radius:11px; border:1px solid var(--border); background:var(--card); color:var(--text-2); cursor:pointer; }

/* ===== صفحات احراز هویت ===== */
.auth-wrap { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:32px 24px; position:relative; overflow:hidden; }
.auth-wrap::before { content:''; position:absolute; top:-140px; right:-120px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(240,147,251,.28),transparent 70%); }
.auth-wrap::after { content:''; position:absolute; bottom:-160px; left:-120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(79,172,254,.25),transparent 70%); }
.auth-card { position:relative; z-index:1; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 24px; backdrop-filter:blur(18px); box-shadow:var(--shadow); }
.logo-big { text-align:center; font-size:2.9rem; font-weight:900; background:var(--g-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-1px; }
.slogan { text-align:center; margin:14px 0 6px; font-size:1.02rem; font-weight:700; color:var(--text); line-height:1.9; }
.slogan-2 { text-align:center; margin-bottom:26px; font-size:.85rem; color:var(--text-2); font-weight:500; }
.step-dots { display:flex; gap:8px; justify-content:center; margin-bottom:22px; }
.step-dots .dot { width:9px; height:9px; border-radius:50%; background:var(--border); transition:.3s; }
.step-dots .dot.on { background:var(--g-primary); width:26px; border-radius:5px; }
.seed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:16px 0; }
.seed-word { background:var(--card); border:1px solid var(--border); border-radius:11px; padding:10px 6px; text-align:center; font-size:.8rem; font-weight:600; color:var(--text); }
.seed-word b { color:var(--accent); margin-left:4px; }
.pin-box { display:flex; gap:10px; justify-content:center; direction:ltr; margin:10px 0 18px; }
.pin-box input { width:46px; height:54px; text-align:center; font-size:1.3rem; font-weight:800; background:var(--card); border:1.5px solid var(--border); border-radius:13px; color:var(--text); outline:none; transition:.2s; }
.pin-box input:focus { border-color:var(--accent); }
.auth-foot { text-align:center; margin-top:26px; color:var(--text-3); font-size:.78rem; line-height:2; position:relative; z-index:1; }
.auth-foot .ver { color:var(--accent); font-weight:700; }
.link-btn { background:none; border:none; color:var(--accent); font-size:.85rem; font-weight:600; cursor:pointer; width:100%; text-align:center; margin-top:14px; }

/* ===== QR ===== */
.qr-box { background:#fff; border-radius:18px; padding:18px; display:flex; align-items:center; justify-content:center; margin:14px auto; width:fit-content; box-shadow:var(--shadow-soft); }
.mono { font-family:'Courier New',monospace; direction:ltr; letter-spacing:1px; }
.copy-row { display:flex; align-items:center; gap:10px; background:var(--card); border:1px dashed var(--border); border-radius:13px; padding:12px 14px; margin:10px 0; }
.copy-row .val { flex:1; font-size:.85rem; font-weight:700; color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== صفحات عمومی ===== */
.page { display:none; }
.page.on { display:block; animation:fade .3s; }
@keyframes fade { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.sec-title { margin:6px 22px 12px; font-size:1.02rem; font-weight:800; display:flex; align-items:center; gap:9px; }
.sec-title i { color:var(--accent); }
.empty { text-align:center; padding:36px 20px; color:var(--text-3); }
.empty i { font-size:2.6rem; opacity:.35; display:block; margin-bottom:12px; }
.fab { position:fixed; bottom:110px; left:50%; transform:translateX(-50%); z-index:55; border:none; border-radius:30px; padding:15px 26px; background:var(--g-primary); color:#fff; font-weight:700; font-size:.9rem; display:flex; gap:9px; align-items:center; box-shadow:0 10px 26px rgba(102,126,234,.45); cursor:pointer; }
.search-row { margin:0 20px 14px; position:relative; }
.scan-frame { position:relative; border-radius:20px; overflow:hidden; background:#000; aspect-ratio:1; margin:10px 0; }
.scan-frame video { width:100%; height:100%; object-fit:cover; }
.scan-line { position:absolute; left:8%; right:8%; height:3px; background:var(--g-pink); border-radius:2px; animation:scan 2.2s infinite ease-in-out; box-shadow:0 0 14px rgba(245,87,108,.8); }
@keyframes scan { 0%,100%{top:10%} 50%{top:88%} }
.chart-box { padding:14px 16px; }
.stat-row { display:flex; gap:12px; margin:0 20px 14px; }
.stat-card { flex:1; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; backdrop-filter:blur(8px); }
.stat-card .v { font-size:1.15rem; font-weight:800; margin-top:6px; }
.stat-card .k { font-size:.7rem; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.toast { position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-80px); z-index:200; background:var(--bg-2); border:1px solid var(--border); border-radius:14px; padding:12px 20px; font-size:.85rem; font-weight:600; box-shadow:var(--shadow); transition:.35s; display:flex; gap:9px; align-items:center; max-width:90%; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.ok i{color:var(--success)} .toast.err i{color:var(--danger)}
::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.hidden{display:none!important}
.row-between{display:flex;align-items:center;justify-content:space-between}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb12{margin-bottom:12px}
.txt2{color:var(--text-2)} .txt3{color:var(--text-3)} .sm{font-size:.78rem}

/* ===== FAQ ===== */
.faq-item { border:1px solid var(--border); border-radius:14px; margin-bottom:10px; overflow:hidden; background:var(--card); }
.faq-q { width:100%; background:none; border:none; color:var(--text); padding:14px 16px; font-size:.88rem; font-weight:600; text-align:right; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.faq-q i { color:var(--accent); transition:.3s; font-size:.8rem; }
.faq-item.open .faq-q i { transform:rotate(180deg); }
.faq-a { display:none; padding:0 16px 14px; font-size:.82rem; color:var(--text-2); line-height:2; }
.faq-item.open .faq-a { display:block; }

/* ===== Ticket bubbles ===== */
.msg-row { display:flex; margin-bottom:10px; }
.msg-bubble { max-width:80%; padding:11px 14px; border-radius:16px; font-size:.84rem; line-height:1.9; white-space:pre-wrap; word-break:break-word; }
.msg-row.user { justify-content:flex-start; }
.msg-row.user .msg-bubble { background:var(--g-primary); color:#fff; border-bottom-right-radius:4px; }
.msg-row.admin { justify-content:flex-end; }
.msg-row.admin .msg-bubble { background:var(--card); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; }
.msg-time { font-size:.65rem; opacity:.75; margin-top:5px; display:block; }

/* ===== Select (منوی آبشاری) ===== */
select.inp {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--card-solid);
    color: var(--text);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667eea'><path d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 14px;
    padding-left: 38px;
}
[data-theme="light"] select.inp {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667eea'><path d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/></svg>");
}
select.inp option {
    background: #16203c !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-weight: 600;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}
[data-theme="light"] select.inp option {
    background: #ffffff !important;
    color: #17203c !important;
}
select.inp option:hover,
select.inp option:checked {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}