/* Café OS v14 — Neo 3D / Glass / Mobile-first visual system */
:root{
--bg:#f4f7fb;--surface:rgba(255,255,255,.88);--surface2:#f1f5fb;--surface3:#e9eff8;
--line:#dfe7f2;--text:#172033;--muted:#718096;--accent:#635bff;--accent2:#2d9cff;
--good:#10a87b;--danger:#e34e69;--warn:#e0a100;--shadow:0 18px 55px rgba(30,55,90,.10);--deep:0 28px 80px rgba(30,55,90,.16)
}
*{scrollbar-width:thin;scrollbar-color:#cbd6e6 transparent}
body{background:radial-gradient(circle at 8% 0%,#ffffff 0,#f5f8fd 28%,#eaf0f8 100%);font-family:IRANSans,CafeArabic,"Noto Sans Arabic",Tahoma,Arial,sans-serif;letter-spacing:-.1px}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:999px;filter:blur(2px);pointer-events:none}
body:before{width:340px;height:340px;right:-120px;top:80px;background:radial-gradient(circle,#8b82ff30,transparent 68%)}
body:after{width:300px;height:300px;left:-100px;bottom:20px;background:radial-gradient(circle,#38bdf830,transparent 68%)}
.side{width:272px;padding:18px 14px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,248,253,.84));border-left:1px solid rgba(214,224,237,.9);box-shadow:20px 0 70px rgba(33,55,87,.06);backdrop-filter:blur(24px)}
.brand{padding:10px 9px 18px;position:relative}.brand:after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#7169ff,#35a5ff);box-shadow:inset 3px 3px 7px #fff7,inset -5px -5px 10px #2737a433,0 10px 22px #635bff35;transform:perspective(80px) rotateY(-5deg)}
.brand b{font-size:17px}.brand small{font-size:11px}
.nav{gap:6px;margin-top:17px}.nav button{min-height:45px;padding:11px 12px;border:1px solid transparent;border-radius:14px;font-size:13px;transition:.2s ease;position:relative}.nav button:hover{transform:translateX(-3px);background:#fff;color:var(--accent);box-shadow:0 8px 22px #334e7810}.nav button.active{background:linear-gradient(135deg,#eef0ff,#e8f5ff);color:#4f57df;border-color:#dfe3ff;box-shadow:0 10px 28px #635bff18}.nav button.active:before{content:"";width:4px;height:22px;border-radius:8px;background:linear-gradient(#635bff,#2d9cff);position:absolute;right:-1px;top:11px}
.main{margin-right:272px;width:calc(100% - 272px);padding:24px 28px 40px}
.app-header{padding:10px 12px;border-radius:19px;background:rgba(255,255,255,.74);border:1px solid rgba(220,229,240,.9);box-shadow:0 14px 40px rgba(30,55,90,.08);backdrop-filter:blur(22px);top:10px}
.app-header:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#fff8,transparent 45%,#fff4)}
.app-header-left,.app-header-right{position:relative;z-index:1}.header-date{background:linear-gradient(145deg,#f7f9fd,#eaf0f7);border:1px solid var(--line);box-shadow:inset 1px 1px 2px #fff,0 4px 12px #263b5b08}
.notify,.theme-toggle,.mobile-menu-btn{background:linear-gradient(145deg,#fff,#edf2f8)!important;border-color:#dce5f0!important;box-shadow:inset 1px 1px 2px #fff,0 7px 16px #304b7010!important;transition:.2s}.notify:hover,.theme-toggle:hover,.mobile-menu-btn:hover{transform:translateY(-2px)}
.user-chip{padding:3px 5px 3px 8px;border:1px solid var(--line);background:#ffffff9c;border-radius:15px;box-shadow:0 7px 18px #304b7009}.user-avatar{box-shadow:inset 2px 2px 4px #fff8,0 7px 15px #5b63f633}
.top h1{font-size:28px;letter-spacing:-.7px}.top .note{font-size:12px}
.card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,249,253,.91));border:1px solid rgba(218,227,239,.95);border-radius:22px;box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s,border-color .22s}.card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,#fff8,transparent 36%,transparent 72%,#dbe7ff20)}.card:hover{transform:translateY(-2px);box-shadow:var(--deep);border-color:#d2ddef}
.kpi{min-height:142px;padding:19px}.kpi strong{font-size:24px;letter-spacing:-.8px}.dashboard-kpi-icon{width:42px;height:42px;border-radius:14px;box-shadow:inset 2px 2px 5px #fff,0 8px 20px #324e7610}.kpi .note{font-size:11px;line-height:1.9}
.btn{border-radius:12px;padding:10px 14px;transition:.18s;box-shadow:0 4px 12px #2d46660a}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px #2d466614}.btn:active{transform:translateY(0) scale(.98)}.btn.primary{background:linear-gradient(135deg,#6e67ff,#4c87ff);box-shadow:0 10px 22px #5e67ff2b}.btn.good{background:linear-gradient(135deg,#dff8ef,#eafbf5);border:1px solid #c8efe2;color:#087b5a}.btn.danger{background:linear-gradient(135deg,#fff0f3,#ffe6eb);border:1px solid #ffd4dc;color:#b62e49}
.input,.select,.textarea{border-radius:13px;min-height:44px;box-shadow:inset 2px 2px 5px #2b466508,0 3px 10px #2b466506}.input:focus,.select:focus,.textarea:focus{outline:0;border-color:#8f95ff;box-shadow:0 0 0 4px #635bff12,inset 2px 2px 5px #2b466508}
.product{background:linear-gradient(145deg,#fff,#f0f5fa);border:1px solid #e0e7f0;border-radius:18px;padding:15px;box-shadow:0 10px 24px #344d6b09;transition:.2s}.product:hover{transform:translateY(-3px);box-shadow:0 18px 32px #344d6b14;border-color:#cfdaf0}
.price,.green{color:var(--good)}
.tablewrap{border-radius:16px;border-color:#e1e8f1;box-shadow:inset 0 1px 0 #fff}.tablewrap table{min-width:620px}th{font-weight:700}td,th{padding:12px 11px}
.alert{box-shadow:0 10px 24px #e34e6910}.badge{border-radius:999px;padding:5px 9px}
.quick{background:linear-gradient(145deg,#fff,#edf3f9);border-color:#dfe7f1;box-shadow:0 8px 20px #344d6b08;transition:.2s}.quick:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 15px 30px #344d6b12;border-color:#cbd6ff}
.trend{height:300px}.trend-line{stroke-width:5;filter:drop-shadow(0 8px 13px rgba(91,99,246,.22))}.trend-point{r:6}
.donut{box-shadow:inset 7px 7px 18px #253e5b15,0 16px 30px #253e5b12}
.modal-backdrop{background:rgba(17,29,48,.42);backdrop-filter:blur(12px)}.modal{border-radius:24px;box-shadow:0 35px 100px #14253d45;border-color:#fff8}.modal-close{box-shadow:0 6px 16px #2b466610}
/* Hero dashboard */
.dashboard-hero{display:grid;grid-template-columns:1.5fr .8fr;gap:14px;margin-bottom:14px}.hero-card{min-height:190px;padding:24px;border-radius:28px;background:radial-gradient(circle at 85% 15%,#9c96ff35,transparent 35%),linear-gradient(135deg,#1b2444,#303a78 55%,#246fbb);color:#fff;box-shadow:0 25px 60px #2c397038;overflow:hidden}.hero-card:after{content:"☕";position:absolute;font-size:180px;left:20px;bottom:-70px;opacity:.07;transform:rotate(-12deg)}.hero-card .eyebrow{opacity:.72;font-size:12px}.hero-card h1{font-size:32px;margin:10px 0 6px}.hero-card p{margin:0;color:#dbe4ff;line-height:2}.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.hero-actions .btn{background:#ffffff18;color:#fff;border-color:#ffffff32;backdrop-filter:blur(10px)}.hero-actions .btn.primary{background:#fff;color:#4f57d8}.status-card{padding:20px;display:flex;flex-direction:column;justify-content:center}.status-orb{width:56px;height:56px;border-radius:18px;background:linear-gradient(145deg,#eafff7,#d7f8ee);color:#0d9a70;display:grid;place-items:center;font-size:25px;box-shadow:inset 2px 2px 5px #fff,0 12px 25px #18a77b20;margin-bottom:12px}.status-card strong{font-size:22px}.status-card small{color:var(--muted);line-height:1.9}
.sectiontitle h2{font-size:18px}.sectiontitle{margin-bottom:14px}
/* mobile */
@media(max-width:720px){
body{background:linear-gradient(180deg,#f7faff,#edf2f8)}body:before,body:after{display:none}.main{padding:9px 9px 28px}.side{width:min(330px,88vw);padding:18px 14px;background:rgba(255,255,255,.96);box-shadow:-28px 0 70px #233b5b2b}.app-header{top:7px;padding:8px;border-radius:17px;margin-bottom:11px}.app-header-right{gap:6px}.user-meta{display:none}.user-chip{margin-right:auto;border:0;background:transparent;box-shadow:none;padding:0}.user-avatar{width:38px;height:38px}.top{margin-bottom:12px}.top h1{font-size:22px}.dashboard-hero{grid-template-columns:1fr}.hero-card{min-height:220px;padding:20px;border-radius:24px}.hero-card h1{font-size:25px}.status-card{min-height:145px}.dashboard-kpis{grid-template-columns:1fr 1fr!important;gap:9px}.kpi{min-height:130px;padding:14px}.kpi strong{font-size:18px}.kpi .note{display:none}.dashboard-lower,.dashboard-bottom,.grid.two,.grid.three{grid-template-columns:1fr!important}.card{border-radius:18px;padding:14px}.trend{height:220px}.trend-value{display:none}.products{grid-template-columns:1fr 1fr!important}.product{padding:12px}.quick-grid{grid-template-columns:1fr 1fr!important}.quick{padding:13px}.tablewrap{max-width:100%;overflow-x:auto}.row{grid-template-columns:1fr}.toolbar{gap:6px}.btn{min-height:42px}.form label{line-height:1.8}.modal{width:calc(100vw - 22px);padding:15px;border-radius:20px}.modal-backdrop{padding:11px}.donut-wrap{align-items:center}.donut{width:145px;height:145px}
}
@media(max-width:430px){.dashboard-kpis{grid-template-columns:1fr 1fr!important}.products{grid-template-columns:1fr!important}.hero-actions .btn{flex:1}.quick-grid{grid-template-columns:1fr 1fr!important}}
body.dark{--bg:#07111f;--surface:rgba(14,27,46,.9);--surface2:#0d1c30;--surface3:#132741;--line:#203a58;--text:#edf5ff;--muted:#8fa5c2;--shadow:0 20px 60px rgba(0,0,0,.38);--deep:0 30px 90px rgba(0,0,0,.48);background:radial-gradient(circle at 10% 0,#202f60,#07111f 42%,#050a12)}
body.dark:before{background:radial-gradient(circle,#8b82ff22,transparent 68%)}body.dark .side{background:rgba(8,19,34,.96);border-color:#203a58}.dark .card{background:linear-gradient(145deg,#10223aee,#0b1728dd);border-color:#203a58}.dark .app-header{background:rgba(8,19,34,.82);border-color:#203a58}.dark .product,.dark .quick{background:linear-gradient(145deg,#10243d,#0c1b2d);border-color:#25415f}.dark .input,.dark .select,.dark .textarea{background:#091525}.dark .hero-card{background:radial-gradient(circle at 85% 15%,#8b82ff22,transparent 35%),linear-gradient(135deg,#0f1730,#243365 55%,#174a7d)}
.login{background:radial-gradient(circle at 50% 15%,#fff,transparent 35%)}.loginbox{border-radius:28px!important;padding:30px!important;box-shadow:0 30px 90px rgba(31,53,84,.16)!important}.loginbox .logo{width:58px;height:58px;border-radius:19px;font-size:27px}.loginbox h1{font-size:25px}.loginbox .btn.primary{min-height:48px}