:root{--bg:#07080c;--card:#10131c;--card2:#171b28;--line:#232a3c;--tx:#f1f4fb;--mut:#8a93aa;--ac:#c6ff00;--ac2:#ff5a1f;--pink:#ff2e63;--red:#ff4d4d;--blue:#38bdf8;--pur:#a78bfa;--org:#ff9f1c;--grn:#22c55e;--r:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fb);background:var(--bg);color:var(--tx);font-size:15px;line-height:1.55;
 background-image:radial-gradient(900px 520px at 85% -10%,rgba(198,255,0,.08),transparent 60%),radial-gradient(760px 520px at -10% 110%,rgba(255,90,31,.08),transparent 60%);background-attachment:fixed}
a{color:var(--ac);text-decoration:none}
h1,h2,h3{font-family:var(--fh);font-weight:600;margin:0}
html.latin h1,html.latin h2{text-transform:uppercase;letter-spacing:.8px}
h1{font-size:28px}h2{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
h2>i{color:var(--ac)}
h3{font-size:15px}
small{color:var(--mut)}
::selection{background:var(--ac);color:#000}
/* layout */
.app{display:flex;min-height:100vh}
.side{width:250px;flex-shrink:0;background:linear-gradient(180deg,#0e111a,#090b11);border-inline-end:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;z-index:20}
.logo{display:flex;align-items:center;gap:12px;font-family:'Oswald','Poppins',sans-serif;font-size:25px;font-weight:700;letter-spacing:1.5px;padding:4px 8px 20px;color:#fff;direction:ltr}
.logo i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac),#7dff3a);color:#000;font-size:18px;box-shadow:0 0 24px rgba(198,255,0,.4);transform:rotate(-12deg)}
.logo b{color:var(--ac)}
.side a.nav{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#c9d0e2;font-weight:500;position:relative;transition:.15s}
.side a.nav i{width:22px;text-align:center;color:var(--mut);font-size:16px}
.side a.nav:hover{background:var(--card2);color:#fff}
.side a.nav.on{background:linear-gradient(90deg,rgba(198,255,0,.16),rgba(198,255,0,.02));color:#fff}
[dir=rtl] .side a.nav.on{background:linear-gradient(270deg,rgba(198,255,0,.16),rgba(198,255,0,.02))}
.side a.nav.on i{color:var(--ac)}
.side a.nav.on::before{content:"";position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.sl{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:0 10px}
.sl i{color:var(--ac)}
.sl select{background:transparent;border:0;padding:10px 4px;color:var(--tx);font:500 13px var(--fb);width:100%;cursor:pointer}
.sl select option{background:#10131c}
.who{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.who b{display:block;font-size:13px;line-height:1.2}
.who small{font-size:11px}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac2),var(--pink));font-weight:700;color:#fff;flex-shrink:0}
.side a.out:hover{background:rgba(255,77,77,.12);color:var(--red)}
.main{flex:1;padding:28px;min-width:0;max-width:1500px}
/* header */
.ph{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.ph .ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:21px;color:#000;background:linear-gradient(135deg,var(--ac),#7dff3a);box-shadow:0 8px 24px rgba(198,255,0,.25);flex-shrink:0}
.sub{color:var(--mut);margin:2px 0 0;font-size:14px}
/* cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:linear-gradient(180deg,var(--card),#0d1018);border:1px solid var(--line);border-radius:var(--r);padding:20px;position:relative}
.card.glow{border-color:rgba(198,255,0,.35);box-shadow:0 0 0 1px rgba(198,255,0,.06),0 10px 40px rgba(198,255,0,.07)}
.stat{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.stat .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:20px;margin-bottom:10px;background:rgba(198,255,0,.12);color:var(--ac)}
.stat.c2 .ico{background:rgba(255,90,31,.14);color:var(--ac2)}.stat.c3 .ico{background:rgba(56,189,248,.14);color:var(--blue)}.stat.c4 .ico{background:rgba(167,139,250,.14);color:var(--pur)}
.stat .n{font-family:'Oswald','Poppins',sans-serif;font-size:36px;font-weight:700;line-height:1.1}
.stat .l{color:var(--mut);font-size:13px}
.stat::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(198,255,0,.1),transparent 70%)}
.hero{background:linear-gradient(120deg,#12170a 0%,#1a0f0a 60%,#10131c 100%);border:1px solid #2a3320;border-radius:20px;padding:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px;position:relative;overflow:hidden}
.hero::before{content:"\f44b";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;inset-inline-end:20px;bottom:-30px;font-size:170px;color:rgba(198,255,0,.06);transform:rotate(-18deg)}
.hero h1{font-size:30px}
.hero p{margin:4px 0 0;color:#b7bfd2}
/* tables */
table{width:100%;border-collapse:collapse}
th,td{padding:11px 9px;border-bottom:1px solid var(--line);text-align:start;font-size:14px;vertical-align:middle}
th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.6px}
tr:hover td{background:rgba(255,255,255,.015)}
.tw{overflow-x:auto}
/* forms */
input,select,textarea{background:#0b0e16;color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;width:100%;transition:.15s}
input:focus,select:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px rgba(198,255,0,.15)}
input[readonly]{opacity:.7}
input[type=checkbox]{width:auto;accent-color:var(--ac)}
label{display:block;font-size:12px;color:var(--mut);margin:0 0 5px;font-weight:500}
label i{color:var(--ac);margin-inline-end:4px}
.f{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.f .span2{grid-column:span 2}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:10px 18px;font:600 14px var(--fb);cursor:pointer;background:var(--ac);color:#0a0c10;box-shadow:0 6px 18px rgba(198,255,0,.18);transition:.15s;width:auto;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(198,255,0,.32)}
.btn.sec{background:var(--card2);color:var(--tx);border:1px solid var(--line);box-shadow:none}
.btn.sec:hover{border-color:var(--ac);color:var(--ac)}
.btn.red{background:var(--red);color:#fff;box-shadow:none}
.btn.fire{background:linear-gradient(135deg,var(--ac2),var(--pink));color:#fff;box-shadow:0 8px 24px rgba(255,90,31,.35)}
.btn.wa{background:#25d366;color:#04210f;box-shadow:none}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:10px}
.btn.big{padding:15px 26px;font-size:16px;border-radius:14px}
.flash{padding:13px 16px;border-radius:12px;margin-bottom:18px;display:flex;gap:10px;align-items:center}
.flash.ok{background:#102a18;color:#7dffa5;border:1px solid #1d4a2b}.flash.err{background:#2e1313;color:#ff9a9a;border:1px solid #5a2323}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:600;background:var(--card2);color:var(--mut)}
.tag.v{background:#12351f;color:#7dffa5}.tag.n{background:#3a1515;color:#ff9a9a}.tag.e{background:#3a2d10;color:#ffd27d}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid currentColor}
/* login + language chooser */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.lhero{position:relative;overflow:hidden;padding:48px;display:flex;flex-direction:column;justify-content:center;gap:22px;background:
 repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 2px,transparent 2px 22px),
 radial-gradient(600px 400px at 20% 20%,rgba(198,255,0,.18),transparent 60%),radial-gradient(600px 500px at 90% 90%,rgba(255,90,31,.25),transparent 60%),#0a0c12}
.lhero .big{font-size:140px;color:rgba(198,255,0,.12);position:absolute;inset-inline-end:-10px;top:30px;transform:rotate(-20deg)}
.lhero h1{font-size:52px;line-height:1.05;direction:ltr;text-align:start}
.lhero h1 b{color:var(--ac)}
.lhero p{max-width:460px;color:#b7bfd2;font-size:16px;margin:0}
.feat{display:grid;gap:12px;grid-template-columns:1fr 1fr;max-width:520px}
.feat div{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:12px;font-size:13px;backdrop-filter:blur(6px)}
.feat i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(198,255,0,.14);color:var(--ac);flex-shrink:0}
.lform{display:flex;align-items:center;justify-content:center;padding:30px;position:relative}
.lform .box{width:100%;max-width:400px}
.lform .lang{position:absolute;top:20px;inset-inline-end:20px;width:190px}
.box h2{font-size:26px;margin-bottom:4px}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.lang-grid button{background:var(--card2);color:var(--tx);border:2px solid var(--line);border-radius:16px;padding:16px;text-align:start;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px;transition:.15s;position:relative}
.lang-grid button b{font-size:19px}
.lang-grid button small{font-size:12px}
.lang-grid button:hover{border-color:var(--ac);transform:translateY(-2px)}
.lang-grid button.on{border-color:var(--ac);background:rgba(198,255,0,.08);box-shadow:0 0 24px rgba(198,255,0,.15)}
.lang-grid button .code{position:absolute;inset-inline-end:12px;top:12px;font:700 11px 'Oswald',sans-serif;color:var(--ac);letter-spacing:1px}
.center-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;gap:20px;text-align:center}
.center-wrap .lang-grid{max-width:900px;width:100%;text-align:start}
/* diet designer */
.chart{position:relative;height:250px}
.chart.sm{height:210px}
.choice{display:flex;flex-wrap:wrap;gap:12px}
.choice button{background:var(--card2);color:var(--tx);border:2px solid var(--line);border-radius:16px;padding:14px 20px;font:600 15px var(--fb);cursor:pointer;display:flex;align-items:center;gap:10px;min-width:150px;transition:.15s}
.choice button i{font-size:20px;color:var(--mut)}
.choice button:hover{border-color:#3a4562}
.choice button.on{border-color:var(--ac);background:rgba(198,255,0,.09);color:#fff;box-shadow:0 0 22px rgba(198,255,0,.16)}
.choice button.on i{color:var(--ac)}
.step{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ac);color:#000;font:700 14px 'Oswald',sans-serif;flex-shrink:0}
.bar{height:10px;background:#0b0e16;border-radius:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--grn);border-radius:10px;transition:width .35s}
.mrow{display:grid;grid-template-columns:105px 1fr 125px;gap:10px;align-items:center;margin:11px 0;font-size:13px}
.mrow span:last-child{text-align:end;color:var(--mut)}
.meal{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;background:var(--card)}
.meal .hd{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.meal .hd input{width:auto}
.meal .hd .tm{width:auto;min-width:150px;padding-inline-end:10px}
.meal .mi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,90,31,.14);color:var(--ac2);font-size:18px}
.meal .hd .del{margin-inline-start:auto}
.mt{color:#b7bfd2;font-size:13px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:flex;gap:14px;flex-wrap:wrap}
.mt span i{margin-inline-end:4px}
.qty{display:flex;gap:6px;align-items:center}.qty input{width:84px;padding:7px 9px}
.chip{display:inline-flex;gap:8px;align-items:center;background:var(--card2);border:1px solid var(--line);padding:6px 12px;border-radius:99px;margin:3px;font-size:13px}
.chip b{cursor:pointer;color:var(--red)}
.sticky{position:sticky;top:14px}
.kpi{display:flex;gap:10px;flex-wrap:wrap}
.kpi div{background:var(--card2);border:1px solid var(--line);padding:11px 15px;border-radius:14px;min-width:105px}
.kpi b{display:block;font:700 22px 'Oswald','Poppins',sans-serif;color:var(--ac)}
.kpi small{color:var(--mut);font-size:12px}
.warn,.good,.bad{padding:12px 15px;border-radius:12px;margin:12px 0;font-size:14px;line-height:1.6}
.warn{background:#2c2410;color:#ffd27d;border:1px solid #4d3d17}
.good{background:#102a18;color:#7dffa5;border:1px solid #1d4a2b}
.bad{background:#2e1313;color:#ff9a9a;border:1px solid #6a2626}
.risk{margin:6px 0;padding-inline-start:20px;font-size:13px}
.two{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.gauge{height:12px;border-radius:12px;background:linear-gradient(90deg,#38bdf8 0 20%,#22c55e 20% 50%,#ff9f1c 50% 70%,#ef4444 70%);position:relative;margin:16px 0 6px}
[dir=rtl] .gauge{background:linear-gradient(270deg,#38bdf8 0 20%,#22c55e 20% 50%,#ff9f1c 50% 70%,#ef4444 70%)}
.gauge i{position:absolute;top:-6px;width:6px;height:24px;background:#fff;border-radius:3px;box-shadow:0 0 12px #fff}
.bodybox{width:124px;display:grid;place-items:center;filter:drop-shadow(0 0 18px var(--bc,rgba(198,255,0,.3)))}
.search{max-width:320px;margin-bottom:12px;position:relative}
/* print */
@media print{.side,.noprint{display:none!important}body{background:#fff!important;color:#000}.card,.meal{background:#fff!important;border-color:#ccc;color:#000}.main{padding:0}.stat .n,.kpi b{color:#000}}
@media(max-width:1000px){.two{grid-template-columns:1fr}.sticky{position:static}.login{grid-template-columns:1fr}.lhero{display:none}}
@media(max-width:860px){
.app{display:block}
.side{position:fixed;inset-inline:0;bottom:0;top:auto;width:auto;height:auto;flex-direction:row;justify-content:space-around;padding:6px;border-inline-end:0;border-top:1px solid var(--line);background:rgba(10,12,18,.96);backdrop-filter:blur(12px)}
.logo,.sidefoot .sl,.who{display:none}
.side a.nav{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;font-size:10.5px;border-radius:10px;flex:1 1 0;min-width:0;text-align:center}
.side a.nav .t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.side a.nav .lg{display:none}.side a.nav .sh{display:inline}
.sidefoot{display:contents}
.side a.nav i{width:auto}
.side a.nav i{font-size:18px}
.side a.nav.on::before{display:none}
.main{padding:16px 14px 90px}
h1{font-size:23px}.hero h1{font-size:24px}
.mrow{grid-template-columns:90px 1fr 100px}
}

.ff-foot{text-align:center;padding:14px 12px;font-size:12.5px;color:var(--mut,#8a93aa);clear:both}
.ff-foot a{color:#c6ff00;text-decoration:none}.ff-foot a:hover{text-decoration:underline}
@media(max-width:800px){.ff-foot{padding-bottom:84px}}
@media print{.ff-foot{display:none}}
@media(max-width:700px){.g4{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:14px}.stat .n,.stat b{font-size:26px}}

.g6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1250px){.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.g6{grid-template-columns:1fr 1fr;gap:10px}}

.f .full{grid-column:1/-1}
.f label>i{margin-inline-end:6px;color:var(--ac,#c6ff00)}
input[type=time],input[type=date]{color-scheme:dark}
.g6 .stat .n{font-size:28px;white-space:nowrap}.g6 .stat .l{font-size:12px}

.side a.nav .sh{display:none}
@media(max-width:860px){.side a.nav .sh{display:inline}.side a.nav .lg{display:none}.tw table{min-width:620px}.tw{-webkit-overflow-scrolling:touch}}

@media(max-width:700px){
.kpi{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi>div{padding:10px 8px;min-width:0}
.kpi b{font-size:20px}.kpi small{font-size:11px}
.bodybox{margin-inline:auto}
.tw td,.tw th{padding:10px 8px;font-size:13px}
.tw td{white-space:nowrap}
.tw td b{white-space:normal}
}

.bage{display:flex;gap:16px;align-items:center;flex-wrap:wrap;flex:1 1 360px;max-width:520px;background:linear-gradient(135deg,rgba(198,255,0,.06),rgba(255,90,31,.06));border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.bage .bring{display:flex;flex-direction:column;align-items:center;gap:6px}
.bage .bleg{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut)}
.bage .bleg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:6px}
.bage .bleg b{color:var(--tx)}
.bage .bmsg{flex:1;min-width:190px;display:flex;flex-direction:column;gap:6px}
.bage .bmsg h3{font-size:16px;margin:0}
.bage .bmsg .good,.bage .bmsg .warn,.bage .bmsg .bad{padding:10px 12px;font-size:13px}
.bage .bmsg small{color:var(--mut);font-size:11px}