:root{
  /* Winter Theme Palette */
  --bg: #0d1b2a; /* Dark winter blue */
  --panel: #1e3a5f; /* Medium winter blue */
  --muted: #94a3b8; /* Muted winter gray */
  --glass: rgba(255,255,255,0.05);
  --accent-1: #dc143c; /* Crimson red */
  --accent-2: #228b22; /* Forest green */
  --accent-glow: 0 10px 40px rgba(220,20,60,0.15);
  --success: #10b981; /* Emerald */
  --danger: #ef4444; /* Red */
  --ui-radius: 16px;
  --max-width: 1200px;
  --ui-gap: 20px;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --snow: #ffffff;
  --frost: #f1f5f9;
  --ice: #e2e8f0;
}

/* Base reset and helpful utilities */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg,var(--bg),#1e3a5f,#0d1b2a);color:var(--snow);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

/* Container */
.ui-container{max-width:var(--max-width);margin:0 auto;padding:20px}
.ui-row{display:flex;flex-wrap:wrap;gap:var(--ui-gap)}

/* Responsive grid helper: prefer data-columns="" attribute for markup. Fallback CSS below. */
.ui-grid{display:grid;gap:var(--ui-gap);grid-auto-rows:1fr}
.ui-grid[data-columns="4"]{grid-template-columns:repeat(4,1fr)}
.ui-grid[data-columns="3"]{grid-template-columns:repeat(3,1fr)}
.ui-grid[data-columns="2"]{grid-template-columns:repeat(2,1fr)}
.ui-grid[data-columns="1"]{grid-template-columns:1fr}
/* fallback: auto-fit responsive */
.ui-grid.auto-fit{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}

/* Card */
.ui-card{background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.04));border-radius:var(--ui-radius);padding:16px;border:1px solid rgba(255,255,255,0.1);box-shadow:var(--accent-glow);display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(10px)}
.ui-card .card-media{height:160px;border-radius:8px;overflow:hidden;background:#0c0c10}
.ui-card .card-title{font-weight:800}
.ui-card .card-sub{color:var(--muted);font-size:0.95rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:12px;border:none;cursor:pointer;font-weight:700;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.btn.ghost{background:var(--glass);border:1px solid rgba(255,255,255,0.1);color:var(--muted);backdrop-filter:blur(10px)}
.btn.primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:var(--snow);box-shadow:var(--accent-glow)}
.btn.warn{background:linear-gradient(90deg,#ff8b4b,#ffa3a3);color:#080308}

/* Header and nav */
.ui-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.site-brand{display:flex;align-items:center;gap:16px}
.brand-logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));display:grid;place-items:center;font-weight:900;color:var(--snow);box-shadow:var(--accent-glow)}
.site-meta{color:var(--muted);font-size:0.95rem}

/* Sidebar (collapsible) */
.ui-sidebar{width:280px;min-width:200px;background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.04));border-radius:16px;padding:16px;border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(15px);box-shadow:var(--accent-glow)}
.ui-layout{display:grid;grid-template-columns:260px 1fr;gap:16px}
.ui-layout.collapsed .ui-sidebar{display:none}
@media(max-width:1024px){.ui-layout{grid-template-columns:1fr}.ui-sidebar{order:2;margin-top:20px}}

/* Topbar controls (mobile friendly) */
.top-controls{display:flex;gap:10px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}

/* Forms */
.form-row{display:flex;gap:10px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px}
.field input,.field select,.field textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}

/* Modal (centered) */
.ui-modal-backdrop{position:fixed;inset:0;background:rgba(1,2,6,0.7);display:none;align-items:center;justify-content:center;z-index:1200}
.ui-modal-backdrop.show{display:flex}
.ui-modal{width:100%;max-width:1000px;background:linear-gradient(135deg,var(--bg),var(--panel));border-radius:20px;padding:20px;border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,0.4),var(--accent-glow)}

/* small helpers */
.row{display:flex;gap:12px;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}
.muted{color:var(--muted)}
.hint{font-size:13px;color:var(--muted)}

/* utility classes */
.u-mb{margin-bottom:12px}
.text-center{text-align:center}
.hidden{display:none!important}

/* Accessibility focus */
:focus{outline:3px solid rgba(123,43,255,0.12);outline-offset:3px}

/* ================== Adaptive breakpoints (fluid scale) ================== */
/* Use CSS clamp for font scaling & spacing */
:root{--scale:clamp(0.85, calc(0.6rem + 0.8vw), 1.05)}
body{font-size:calc(14px * var(--scale))}

@media (max-width:768px){
  .ui-container{padding:16px}
  .ui-grid[data-columns="4"]{grid-template-columns:repeat(2,1fr)}
  .ui-grid[data-columns="3"]{grid-template-columns:repeat(2,1fr)}
  .ui-grid[data-columns="2"]{grid-template-columns:repeat(1,1fr)}
  .ui-grid.auto-fit{grid-template-columns:repeat(auto-fit, minmax(180px,1fr))}
  .ui-header{padding:12px 0}
  .ui-sidebar{width:100%;margin-top:20px}
}

@media (max-width:480px){
  body{font-size:14px}
  .ui-container{padding:12px}
  .ui-grid[data-columns="4"]{grid-template-columns:1fr}
  .ui-grid[data-columns="3"]{grid-template-columns:1fr}
  .ui-grid.auto-fit{grid-template-columns:repeat(auto-fit, minmax(140px,1fr))}
  .brand-logo{width:48px;height:48px}
  .ui-card{padding:12px}
  .btn{padding:10px 14px;font-size:14px}
}

/* ===========================================================
   Component-specific small styles (store, tickets, admin) — keep concise
   =========================================================== */

/* product card compact */
.product-card{display:flex;flex-direction:column;height:100%}
.prod-price{font-weight:900}

/* ticket list */
.ticket-card{padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03)}
.ticket-card .status{padding:6px 8px;border-radius:6px;font-weight:700}
.status.open{background:#221a40;color:#f5eefd}
.status.resolved{background:rgba(34,200,110,0.12);color:var(--success)}
.status.pending{background:rgba(255,175,0,0.08);color:#ffb86b}

/* network overview (compact cards) */
.stat-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03)}
.stat-icon{width:56px;height:56px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#05040a}
.stat-value{font-weight:900}

/* news & community */
.news-card{padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}

/* maintain a max-length for very long framework file */
/* End of adaptive.css */