@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-style:normal; font-weight:700 900; font-display:swap; }
:root { --ink:#172033; --muted:#667085; --navy:#13213f; --blue:#2667ff; --line:#e7ebf3; --bg:#f5f7fb; --good:#077a4d; --bad:#be263b; --warn:#a46000; --sky:#eef5ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Vazirmatn, Tahoma, Arial, sans-serif; font-size:15px; line-height:1.7; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
.shell { width:min(1180px, calc(100% - 32px)); margin-inline:auto; }
.topbar { background:var(--navy); color:#fff; border-bottom:3px solid #3b82f6; }
.nav { min-height:68px; display:flex; gap:24px; align-items:center; justify-content:space-between; }
.brand { color:#fff; font-size:20px; font-weight:800; white-space:nowrap; } .brand:hover { text-decoration:none; }
.brand small { display:block; font-size:10px; font-weight:400; opacity:.68; margin-top:-5px; }
nav { display:flex; flex-wrap:wrap; gap:14px; } nav a { color:#dbeafe; font-weight:600; }
.mobile-menu-toggle { display:none; }
.account { display:flex; gap:10px; align-items:center; font-size:13px; } .account form { margin:0; }
.nav-wallet-balance { display:inline-flex; align-items:center; gap:4px; padding:7px 10px; border:1px solid rgba(255,255,255,.35); border-radius:8px; color:#fff; white-space:nowrap; }
.nav-wallet-balance:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.wallet-topup-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:18px; }
.wallet-topup-form button { min-width:150px; height:44px; }
.main { padding-block:30px 48px; }.footer { padding-block:20px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; }
h1 { font-size:25px; margin:0 0 8px; } h2 { font-size:19px; margin:0 0 14px; } h3 { font-size:16px; margin:0 0 8px; }
.page-head { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:22px; }.page-head p { margin:3px 0 0; color:var(--muted); }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 2px 10px rgba(20,35,65,.03); margin-bottom:18px; }
.grid { display:grid; gap:18px; }.grid.stats { grid-template-columns:repeat(4,1fr); }.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat { padding:18px; background:linear-gradient(145deg,#fff,#f7faff); border:1px solid var(--line); border-radius:14px; }.stat span { display:block; color:var(--muted); font-size:13px; }.stat strong { font-size:29px; }
.stat strong.money-stat { font-size:17px; line-height:1.8; }
.stat strong.cron-stat { font-size:14px; line-height:1.9; }
.button, button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; padding:9px 14px; background:var(--blue); color:#fff; cursor:pointer; font:inherit; font-weight:700; }.button:hover,button:hover { text-decoration:none; filter:brightness(.95); }.button.ghost,.ghost { background:transparent; border:1px solid rgba(255,255,255,.42); color:inherit; padding:7px 11px; }.button.light { background:#fff; color:var(--navy); }.button.secondary { background:#eaf0ff; color:#1749c7; }.button.danger { background:#b42338; }.button.warn { background:#b26a00; }
form { margin:0; }.form-grid { display:grid; gap:15px; grid-template-columns:repeat(2,minmax(0,1fr)); }.form-grid .full { grid-column:1/-1; } label { display:grid; gap:6px; color:#344054; font-size:13px; font-weight:700; } input,select,textarea { width:100%; padding:10px 11px; border:1px solid #ccd4e1; border-radius:8px; background:#fff; color:var(--ink); font:inherit; } textarea { min-height:88px; resize:vertical; } input:focus,select:focus,textarea:focus { outline:3px solid rgba(38,103,255,.13); border-color:#6492ff; }
.checkbox { display:flex; align-items:center; gap:8px; }.checkbox input { width:auto; }.help { color:var(--muted); font-size:12px; margin-top:4px; }
.table-wrap { overflow:auto; }.table { width:100%; border-collapse:collapse; white-space:nowrap; }.table th,.table td { padding:11px 10px; text-align:right; border-bottom:1px solid var(--line); vertical-align:middle; }.table th { color:var(--muted); background:#fafbfe; font-size:12px; }.table tr:last-child td { border-bottom:0; }.inline { display:inline-flex; gap:7px; align-items:center; }.inline form { display:inline; }
.badge { display:inline-flex; border-radius:999px; padding:2px 9px; background:#edf1f7; color:#344054; font-size:12px; font-weight:700; }.badge.active,.badge.paid,.badge.verified { color:var(--good); background:#e8f7ef; }.badge.overdue,.badge.suspended,.badge.rejected { color:var(--bad); background:#fff0f1; }.badge.unpaid,.badge.pending { color:var(--warn); background:#fff7e8; }
.flash { border-radius:9px; padding:11px 13px; margin-bottom:16px; border:1px solid; }.flash.success { color:var(--good); background:#effcf4; border-color:#a6e9c0; }.flash.error { color:#941b2f; background:#fff3f4; border-color:#ffc2ca; }
.auth-card { width:min(480px, 100%); margin:40px auto; }.auth-card .button { width:100%; }.empty-state { text-align:center; padding:70px 20px; }.muted { color:var(--muted); }.amount { font-weight:800; }.actions { display:flex; gap:8px; flex-wrap:wrap; }.notice { background:#f0f5ff; border-right:4px solid var(--blue); padding:13px; border-radius:8px; margin-bottom:15px; }
.ticket-meta { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding-block:13px; color:var(--muted); }.ticket-thread { display:grid; gap:12px; margin-bottom:18px; }.ticket-reply { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }.ticket-reply.staff { border-right:4px solid var(--blue); background:#f8fbff; }.ticket-reply.customer { border-right:4px solid #7b879d; }.ticket-reply header { display:flex; justify-content:space-between; align-items:center; gap:14px; }.ticket-reply header small { color:var(--muted); }.ticket-reply p { white-space:normal; margin:12px 0 0; }
.announcement.warning { background:#fff7e8; border-color:#f0c36d; }.announcement.critical { background:#fff0f1; border-color:#f4a9b3; color:#8e1a2c; }
.invoice-brand { display:flex; justify-content:space-between; align-items:center; font-size:18px; }.invoice-total { text-align:left; font-size:18px; font-weight:800; } @media print { .topbar,.footer,.print-hide,.flash { display:none!important; } body { background:#fff; } .main { padding:0; } .shell { width:100%; } .invoice-paper { border:0; box-shadow:none; } }
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#122447,#1d4d94); color:#fff; border-radius:22px; padding:clamp(32px,7vw,78px); margin-bottom:28px; }.hero:after { content:''; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(88,167,255,.18); left:-110px; top:-170px; }.hero-content { position:relative; max-width:720px; z-index:1; }.eyebrow { display:inline-flex; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:4px 11px; font-size:12px; }.hero h1 { font-size:clamp(28px,4vw,46px); line-height:1.35; margin:16px 0 12px; }.hero p { color:#dbeafe; max-width:620px; margin:0; font-size:17px; }.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }.hero .button.secondary { background:#dcecff; color:#173562; }.section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:36px 0 15px; }.section-head p { margin:0; color:var(--muted); }.product-grid,.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.product-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 8px 24px rgba(15,37,75,.05); display:flex; flex-direction:column; gap:12px; }.product-card h3 { font-size:18px; }.product-card p { color:var(--muted); margin:0; min-height:48px; }.product-card .price { color:var(--navy); font-size:21px; font-weight:800; }.product-card .button { margin-top:auto; }.feature { background:var(--sky); border:1px solid #d8e8ff; border-radius:15px; padding:19px; }.feature strong { display:block; margin-bottom:5px; }.feature p { color:var(--muted); margin:0; font-size:13px; }.home-empty { background:#fff; border:1px dashed #b9c5d8; border-radius:14px; text-align:center; padding:30px; color:var(--muted); }
@media (max-width:850px) { .nav { flex-wrap:wrap; padding-block:12px; gap:12px; }.grid.stats,.grid.three,.product-grid,.feature-grid { grid-template-columns:repeat(2,1fr); } .page-head { flex-direction:column; }.account { margin-right:auto; } }
@media (max-width:580px) { .shell { width:min(100% - 22px,1180px); }.grid.stats,.grid.two,.grid.three,.form-grid,.product-grid,.feature-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; }.wallet-topup-form { grid-template-columns:1fr; }.wallet-topup-form button { width:100%; }.nav { position:relative; align-items:center; }.mobile-menu-toggle { display:inline-flex; margin-inline-start:auto; flex-direction:column; gap:3px; align-items:center; justify-content:center; width:44px; height:42px; padding:5px; background:transparent; border:1px solid rgba(255,255,255,.4); border-radius:8px; }.mobile-menu-toggle span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; }.mobile-menu-toggle b { font-size:9px; font-weight:400; line-height:1; }.topbar nav,.account { display:none; }.nav.menu-open nav,.nav.menu-open .account { display:flex; }.nav.menu-open nav { order:3; width:100%; flex-direction:column; gap:0; padding:6px 0; }.nav.menu-open nav a { padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.12); }.nav.menu-open .account { order:4; width:100%; flex-wrap:wrap; padding-top:9px; border-top:1px solid rgba(255,255,255,.18); }.nav.menu-open .account span { display:inline; }.nav.menu-open .account form { margin-inline-start:auto; }.card { padding:16px; }.hero { border-radius:16px; }.footer { flex-direction:column; } }