:root{
  --bg:#070b16;
  --bg-2:#0c1324;
  --panel:#111a2d;
  --panel-2:#18233d;
  --panel-3:#1b2846;
  --panel-4:#223156;
  --text:#f3f7ff;
  --muted:#95a8cf;
  --muted-2:#6f84ad;
  --line:rgba(145,175,235,.16);
  --line-strong:rgba(145,175,235,.24);
  --accent:#63a6ff;
  --accent-2:#4c8dff;
  --success:#4ee09b;
  --warning:#ffbf5d;
  --danger:#ff7676;
  --shadow:0 24px 60px rgba(0,0,0,.34);
  --shadow-soft:0 12px 30px rgba(0,0,0,.22);
  --radius:24px;
  --radius-md:18px;
  --radius-sm:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(99,166,255,.18), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(78,224,155,.10), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(118,96,255,.09), transparent 28%),
    linear-gradient(180deg, #070b16 0%, #0b1220 46%, #0c1324 100%);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,select,textarea,button{font:inherit}
button{appearance:none}
svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.app-shell{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  min-height:100vh;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 18px;
  background:linear-gradient(180deg, rgba(9,14,28,.98), rgba(11,18,34,.96));
  border-right:1px solid var(--line);
  backdrop-filter:blur(18px);
}

.premium-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
}
.premium-brand strong{display:block;font-size:1.02rem;letter-spacing:.01em}
.premium-brand small{display:block;color:var(--muted);margin-top:4px}
.brand-mark,
.topbar-badge,
.avatar-chip,
.nav-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.brand-mark,
.topbar-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  color:#d8e7ff;
  background:linear-gradient(145deg, rgba(99,166,255,.22), rgba(99,166,255,.08));
  border:1px solid rgba(99,166,255,.24);
}
.side-nav{display:grid;gap:8px}
.side-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:12px 14px;
  border-radius:16px;
  color:var(--muted);
  border:1px solid transparent;
  transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.side-nav a:hover{
  color:var(--text);
  transform:translateX(2px);
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.06);
}
.side-nav a.active{
  color:var(--text);
  background:linear-gradient(180deg, rgba(99,166,255,.20), rgba(99,166,255,.08));
  border-color:rgba(99,166,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(99,166,255,.10);
}
.nav-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
}
.side-nav a.active .nav-icon{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.09);
}
.logout-link{margin-top:10px;color:#ffc0c0 !important}

.content{padding:24px 28px 30px;min-width:0}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(18,27,46,.94), rgba(18,27,46,.82));
  box-shadow:var(--shadow-soft);
}
.topbar-title,.topbar-user{display:flex;align-items:center;gap:14px}
.topbar-title strong,.topbar-user strong{display:block;font-size:1rem}
.topbar-title small,.topbar-user small{display:block;color:var(--muted);margin-top:4px}
.avatar-chip{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(145deg, rgba(78,224,155,.20), rgba(78,224,155,.08));
  color:#d9ffed;
  border:1px solid rgba(78,224,155,.22);
}

.auth-layout{
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:24px;
}
.auth-card{width:min(440px,92vw)}

.card,.panel{
  background:linear-gradient(180deg, rgba(17,26,45,.96), rgba(17,26,45,.88));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card{padding:22px}
.panel{padding:18px}
.grid{display:grid;gap:18px}
.stack{display:grid;gap:14px}

.page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.page-header h1,.page-header h2,.card h2{
  margin:0;
  font-size:clamp(1.2rem,2vw,1.9rem);
  line-height:1.1;
}
.small{margin-top:8px;color:var(--muted);font-size:.95rem}

.premium-hero{
  position:relative;
  overflow:hidden;
  padding:28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(99,166,255,.22), transparent 38%),
    linear-gradient(180deg, rgba(20,32,57,.98), rgba(16,24,42,.94));
}
.premium-hero::after{
  content:"";
  position:absolute;
  inset:auto -60px -60px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(78,224,155,.18), transparent 65%);
  pointer-events:none;
}
.hero-copy h1{font-size:clamp(1.8rem,3vw,2.6rem);margin:0 0 10px}
.hero-copy p{margin:0;color:#c5d6f8;max-width:760px;line-height:1.55}
.hero-pillbar{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  color:#d9e7ff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)
}
.hero-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.hero-pill.success .dot{background:var(--success)}
.hero-pill.warning .dot{background:var(--warning)}

.stats,
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.stats{margin-top:18px}
.stat,
.stat-card{
  position:relative;
  overflow:hidden;
  padding:20px;
  min-height:150px;
  background:linear-gradient(180deg, rgba(18,27,46,.98), rgba(18,27,46,.9));
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
}
.stat::before,
.stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%);
  opacity:.9;
  pointer-events:none;
}
.stat::after,
.stat-card::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-34px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(99,166,255,.18), transparent 65%);
  pointer-events:none;
}
.stat.revenue::after{background:radial-gradient(circle, rgba(78,224,155,.22), transparent 65%)}
.stat.expenses::after{background:radial-gradient(circle, rgba(255,191,93,.24), transparent 65%)}
.stat.profit::after{background:radial-gradient(circle, rgba(99,166,255,.24), transparent 65%)}
.stat.alert::after{background:radial-gradient(circle, rgba(255,118,118,.22), transparent 65%)}
.stat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1}
.stat-icon{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);color:#e6f0ff
}
.stat-label,.stat .label{color:#ccdbfa;font-size:.92rem;letter-spacing:.02em}
.stat-value,.stat .value{position:relative;z-index:1;margin-top:18px;font-size:2rem;font-weight:800;line-height:1.05}
.stat-foot{position:relative;z-index:1;margin-top:14px;color:var(--muted);font-size:.9rem}

.overview-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:18px;align-items:start;margin-top:18px}
.kpi-list{display:grid;gap:12px;margin-top:14px}
.kpi-line{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)
}
.kpi-line span{color:var(--muted)}
.kpi-line strong{font-size:1rem}

.actions,.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters input,.filters select{min-width:170px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 16px;border-radius:14px;border:1px solid transparent;
  color:white;font-weight:700;cursor:pointer;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow:0 12px 24px rgba(99,166,255,.18);
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.secondary{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border-color:rgba(255,255,255,.08);color:var(--text);box-shadow:none}
.btn.danger{background:linear-gradient(180deg, #ff8b8b, #ec5f5f);box-shadow:0 12px 24px rgba(236,95,95,.2)}

.table-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  background:rgba(255,255,255,.02);
}
.table{width:100%;min-width:860px;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:14px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid rgba(255,255,255,.05)}
.table thead th{
  position:sticky;top:0;z-index:2;
  color:#d3e0fb;font-size:.83rem;text-transform:uppercase;letter-spacing:.045em;
  background:rgba(13,20,36,.98);
  backdrop-filter:blur(10px);
}
.table tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.table tbody tr:hover{background:rgba(99,166,255,.06)}
.table tbody tr:last-child td{border-bottom:none}
.table img.icon,.icon{
  width:42px;height:42px;object-fit:cover;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);background:#0f172b;
}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.form-grid label,.field{display:grid;gap:8px;color:var(--muted)}
label span{font-size:.92rem}
input,select,textarea{
  width:100%;min-height:46px;padding:12px 14px;
  color:var(--text);background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(99,166,255,.5);
  box-shadow:0 0 0 4px rgba(99,166,255,.12);
  background:rgba(255,255,255,.05);
}
textarea{min-height:120px;resize:vertical;padding-top:13px}
input[type="file"]{padding:10px}
input::placeholder,textarea::placeholder{color:#8296bf}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:5px 10px;border-radius:999px;font-size:.8rem;font-weight:700;
  border:1px solid transparent;
}
.badge.yes{background:rgba(78,224,155,.12);color:#aaf3cb;border-color:rgba(78,224,155,.18)}
.badge.no{background:rgba(255,118,118,.12);color:#ffc0c0;border-color:rgba(255,118,118,.18)}
.badge.warn{background:rgba(255,191,93,.12);color:#ffd897;border-color:rgba(255,191,93,.18)}
.price-good{font-weight:700;color:#9bc6ff}

.ingredient-row{
  display:grid;grid-template-columns:1.2fr .8fr auto;gap:10px;align-items:end;
  padding:12px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)
}
.remove-ingredient{align-self:stretch}

.flash{
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.flash.success{color:#dff8ea;background:rgba(78,224,155,.12);border-color:rgba(78,224,155,.2)}
.flash.error{color:#ffe1e1;background:rgba(255,118,118,.12);border-color:rgba(255,118,118,.2)}

hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:18px 0}
select {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    appearance: none;
    background-image: linear-gradient(145deg, #1e293b, #0f172a);
}

select option {
    background: #1e293b;
    color: #e2e8f0;
}

select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
}

@media (max-width: 1120px){
  .app-shell{grid-template-columns:86px minmax(0,1fr)}
  .premium-brand span:last-child,
  .side-nav a span:last-child{display:none}
  .side-nav a{justify-content:center;padding-inline:10px}
  .premium-brand{justify-content:center;padding-inline:12px}
  .logout-link{margin-top:14px}
}

@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .premium-brand span:last-child,
  .side-nav a span:last-child{display:block}
  .side-nav{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .side-nav a{justify-content:flex-start}
  .overview-grid{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .content{padding:16px}
  .topbar{padding:14px 16px}
  .premium-hero{padding:22px}
  .card,.panel{padding:18px}
  .stats,.stats-grid,.grid,.overview-grid{gap:14px}
  .table{min-width:760px}
  .hero-pillbar{gap:10px}
}