/* ==========================================================================
   BEER'O — Design System
   Premium, minimal, unified visual language shared by every page.
   ========================================================================== */

:root{
  /* ---- Brand ---- */
  --brand-h: 38;                /* amber hue */
  --primary:        hsl(var(--brand-h) 88% 54%);
  --primary-2:      hsl(var(--brand-h) 96% 66%);
  --primary-strong: hsl(var(--brand-h) 90% 46%);
  --on-primary:     #16110a;

  /* ---- Surfaces (dark, default) ---- */
  --bg:        #0a0b0f;
  --bg-2:      #101218;
  --bg-3:      #15171f;
  --surface:       rgba(255,255,255,.045);
  --surface-hover: rgba(255,255,255,.075);
  --surface-solid: #14161d;
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);

  --text-primary:   #f3f4f8;
  --text-secondary: #9aa0b1;
  --text-tertiary:  #6b7186;

  --success:  #34d399;
  --success-bg: rgba(52,211,153,.14);
  --danger:   #fb6a6a;
  --danger-bg: rgba(251,106,106,.14);
  --info:     #5aa9ff;
  --info-bg:  rgba(90,169,255,.14);

  /* legacy aliases kept for any inline references */
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --glass-shadow: rgba(0,0,0,.45);
  --card-bg: var(--surface);
  --text: var(--text-primary);

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.3);
  --shadow-glow: 0 8px 28px hsl(var(--brand-h) 88% 54% / .28);

  /* ---- Radius scale ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;
  --radius: var(--r-lg); /* legacy alias */

  /* ---- Spacing scale ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.8,.28,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --t-fast: .16s;
  --t-base: .28s;
  --t-slow: .48s;

  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

html[data-theme="light"]{
  --bg:        #f4f5f9;
  --bg-2:      #fbfbfd;
  --bg-3:      #ffffff;
  --surface:       rgba(20,22,30,.035);
  --surface-hover: rgba(20,22,30,.06);
  --surface-solid: #ffffff;
  --border:        rgba(20,22,30,.09);
  --border-strong: rgba(20,22,30,.16);

  --text-primary:   #171923;
  --text-secondary: #5b6072;
  --text-tertiary:  #868ca0;

  --primary:        hsl(var(--brand-h) 82% 46%);
  --primary-2:      hsl(var(--brand-h) 90% 56%);
  --primary-strong: hsl(var(--brand-h) 85% 38%);
  --on-primary:     #1a1200;

  --shadow-sm: 0 1px 2px rgba(20,22,40,.06);
  --shadow-md: 0 10px 26px rgba(20,22,40,.08);
  --shadow-lg: 0 24px 56px rgba(20,22,40,.12);
  --shadow-glow: 0 10px 26px hsl(var(--brand-h) 82% 46% / .22);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, hsl(var(--brand-h) 90% 55% / .10), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, hsl(258 80% 62% / .08), transparent 55%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height:100vh;
  display:flex; flex-direction:column;
  overflow-x:hidden;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{ font-family: var(--font-display); letter-spacing:-.01em; }
img{ max-width:100%; display:block; }
button, input, textarea, select{ font-family: inherit; color: inherit; }
button{ cursor:pointer; }
a{ color: inherit; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--primary), var(--primary-2)); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius: 6px; }

.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------------------------------------------------------- ambient bg */
.bg-orbs{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.28; will-change: transform; }
.orb-1{ width:460px; height:460px; background: var(--primary); top:-160px; left:-120px; animation: floatOrb 20s ease-in-out infinite; }
.orb-2{ width:360px; height:360px; background:#8b6cff; bottom:-140px; right:-100px; animation: floatOrb 24s ease-in-out infinite reverse; }
.orb-3{ width:300px; height:300px; background:#34d399; top:38%; left:62%; animation: floatOrb 28s ease-in-out infinite; }
@keyframes floatOrb{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(36px,-26px); } }
@media (prefers-reduced-motion: reduce){ .orb{ animation:none !important; } }

/* ---------------------------------------------------------------- glass */
.glass{
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------- icons */
.ic{ display:inline-flex; align-items:center; justify-content:center; line-height:0; flex-shrink:0; }
.ic svg{ display:block; }

/* --------------------------------------------------------------- topbar */
.topbar{ position:sticky; top:0; z-index:50; padding: 16px 22px 20px; border-radius: 0 0 28px 28px; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; min-height:34px; }
.topbar-left{ display:flex; align-items:center; flex-shrink:0; }
.topbar-center{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--primary-2), var(--primary-strong));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  user-select:none; white-space:nowrap;
}
.topbar-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.logo-wrap{ background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; overflow:visible; border-radius:var(--r-full); transition: transform var(--t-fast) var(--ease); }
.logo-wrap:hover{ transform: scale(1.04); }
.logo-wrap:active{ transform: scale(.97); }

#profile-img{
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--primary);
  box-shadow: 0 0 0 4px var(--bg), var(--shadow-glow);
  margin-top: -14px; margin-bottom: -68px;
  max-width:100%;
  transition: box-shadow var(--t-base) var(--ease);
}

.icon-btn{
  width:42px; height:42px; border-radius: var(--r-sm);
  border:1px solid var(--border); background: var(--surface);
  color: var(--text-primary); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  position:relative; overflow:hidden;
}
.icon-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); background: var(--surface-hover); }
.icon-btn:active{ transform: translateY(0) scale(.94); }
.icon-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* --------------------------------------------------------------- search */
.search-wrap{ margin-top:16px; }
.search-box{
  display:flex; align-items:center; gap:10px; padding:13px 18px;
  border-radius: var(--r-full); max-width:540px; margin:0 auto;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-box:focus-within{ border-color: hsl(var(--brand-h) 88% 54% / .55); box-shadow: 0 0 0 4px hsl(var(--brand-h) 88% 54% / .12); }
.search-box .ic{ color: var(--text-tertiary); }
.search-box input{ flex:1; background:transparent; border:none; outline:none; color: var(--text-primary); font-size:14.5px; font-family:inherit; }
.search-box input::placeholder{ color: var(--text-tertiary); }
.search-clear{ background:none; border:none; color: var(--text-tertiary); cursor:pointer; padding:4px; display:flex; border-radius:var(--r-full); transition: color var(--t-fast) ease, background var(--t-fast) ease; }
.search-clear:hover{ color: var(--danger); background: var(--danger-bg); }

/* -------------------------------------------------------------- layout */
.container{ flex:1; width:100%; max-width:1240px; margin:0 auto; padding: 28px 20px 64px; }

/* ------------------------------------------------------------ sync pill */
.sync-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; padding:7px 14px 7px 10px; border-radius:var(--r-full); margin-bottom:20px; color:var(--text-secondary); background: var(--surface); border:1px solid var(--border); }
.sync-dot{ width:7px; height:7px; border-radius:50%; background: var(--text-tertiary); flex-shrink:0; }
.sync-badge.online .sync-dot{ background: var(--success); box-shadow:0 0 0 3px var(--success-bg); }
.sync-badge.online{ color: var(--success); }
.sync-badge.offline .sync-dot{ background: var(--danger); animation: pulseDot 1.4s ease-in-out infinite; }
.sync-badge.offline{ color: var(--text-secondary); }
@keyframes pulseDot{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 var(--danger-bg);} 50%{ opacity:.55; box-shadow:0 0 0 4px transparent;} }

/* ------------------------------------------------------------------ grid */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }

/* ------------------------------------------------------------------ card */
.card{
  position:relative; border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  opacity:0; transform: translateY(16px);
  animation: cardIn .55s var(--ease) forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: hsl(var(--brand-h) 88% 54% / .35); }

.card-img-wrap{ position:relative; width:100%; aspect-ratio: 4/3; overflow:hidden; background: linear-gradient(135deg, var(--surface), transparent); }
.card-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.card-img-wrap img.loaded{ opacity:1; }
.card:hover .card-img-wrap img{ transform: scale(1.06); }
.card-img-fallback{ display:flex; align-items:center; justify-content:center; height:100%; color: var(--text-tertiary); }
.card-img-fallback .ic svg{ width:44px; height:44px; }

.card-price-tag{
  position:absolute; top:12px; right:12px; padding:7px 14px; border-radius:var(--r-full);
  font-weight:700; font-size:13.5px; color: var(--on-primary);
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  box-shadow: 0 6px 18px hsl(var(--brand-h) 88% 54% / .35);
  letter-spacing:-.01em;
}

.card-body{ padding:16px 18px 18px; }
.card-title{ font-family: var(--font-display); font-size:16px; font-weight:600; margin-bottom:4px; color: var(--text-primary); }
.card-desc{ font-size:12.5px; color: var(--text-secondary); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* -------------------------------------------------------------- skeleton */
.skel-card{ border-radius: var(--r-lg); overflow:hidden; background: var(--surface); border:1px solid var(--border); }
.skel-shimmer{ background: linear-gradient(100deg, transparent 20%, hsl(var(--brand-h) 30% 60% / .10) 42%, transparent 64%), var(--surface); background-size: 250% 100%; animation: shimmer 1.6s ease-in-out infinite; }
.skel-img{ width:100%; aspect-ratio:4/3; }
.skel-line{ height:12px; margin:14px 16px; border-radius:6px; }
.skel-line.short{ width:42%; }
@keyframes shimmer{ 0%{ background-position:130% 0; } 100%{ background-position:-30% 0; } }

/* ---------------------------------------------------------------- empty */
.empty-state{ text-align:center; padding: 76px 20px; color: var(--text-secondary); }
.empty-icon{ width:76px; height:76px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--surface); border:1px solid var(--border); color: var(--primary); }
.empty-icon .ic svg{ width:32px; height:32px; }
.empty-state h2{ color: var(--text-primary); font-family: var(--font-display); font-size:20px; font-weight:600; margin-bottom:6px; }
.empty-state p{ font-size:13.5px; }

/* --------------------------------------------------------------- footer */
.site-footer{ text-align:center; padding:22px; font-size:12px; color: var(--text-tertiary); }

/* --------------------------------------------------------------- ripple */
.ripple{ position:absolute; border-radius:50%; background: rgba(255,255,255,.45); transform:scale(0); animation: rippleAnim .6s var(--ease) forwards; pointer-events:none; }
@keyframes rippleAnim{ to{ transform:scale(4); opacity:0; } }

/* ============================= RESPONSIVE ============================= */
@media (max-width: 640px){
  .topbar{ padding: 13px 14px 16px; border-radius:0 0 22px 22px; }
  .topbar-center{ font-size:17px; }
  #profile-img{ width: 84px; height: 84px; margin-top: -10px; margin-bottom: -46px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
  .card-title{ font-size:14px; }
  .card-price-tag{ font-size:12px; padding:5px 11px; }
}

@media (max-width: 768px){
  .topbar-inner{ gap:8px; }
  .topbar-center{ font-size:18px; }
  .container{ padding:20px 14px 44px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
  .card:hover{ transform: none; }
  .card-title{ font-size:14px; }
  .card-price-tag{ font-size:12px; padding:5px 10px; }
  .search-box{ max-width:100%; border-radius:16px; }
  .empty-icon{ width:60px; height:60px; }
  .empty-state{ padding:44px 16px; }
}

@media (max-width: 480px){
  body{ overflow-x:hidden; }
  .topbar{ padding:11px 10px 13px; border-radius:0 0 18px 18px; }
  .topbar-inner{ gap:6px; }
  .topbar-center{ font-size:15px; letter-spacing:.02em; }
  #profile-img{ width: 46px; height: 46px; margin-top:-26px; margin-bottom:-24px; border-width:2px; }
  .search-wrap{ margin-top:11px; }
  .search-box{ padding:10px 14px; }
  .search-box input{ font-size:13px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
  .card-title{ font-size:13px; }
  .card-body{ padding:12px 12px 14px; }
  .card{ animation: none; opacity:1; transform:none; }
  .card-price-tag{ font-size:11px; padding:4px 9px; top:8px; right:8px; }
  .icon-btn{ width:38px; height:38px; border-radius: var(--r-xs); }
  .container{ padding:16px 10px 32px; }
  .sync-badge{ font-size:10px; padding:5px 11px; }
  .empty-state{ padding:32px 12px; }
  .empty-icon{ width:52px; height:52px; }
  .empty-state h2{ font-size:17px; }
  .site-footer{ font-size:11px; padding:14px; }
}

@media (max-width: 360px){
  .topbar{ padding: 9px 8px 11px; border-radius: 0 0 15px 15px; }
  .topbar-inner{ gap: 4px; }
  .topbar-center{ font-size: 13.5px; letter-spacing: 0; }
  #profile-img{ width: 40px; height: 40px; margin-top: -24px; margin-bottom: -20px; }
  .search-wrap{ margin-top: 9px; }
  .search-box{ padding: 9px 11px; border-radius: 13px; }
  .search-box input{ font-size: 12px; }
  .container{ padding: 12px 8px 22px; }
  .grid{ grid-template-columns: 1fr; gap: 8px; }
  .card{ animation: none; opacity: 1; transform: none; }
  .card-title{ font-size: 12px; }
  .card-body{ padding: 10px 10px 12px; }
  .card-price-tag{ font-size: 10px; padding: 3px 8px; top: 6px; right: 6px; }
  .card-desc{ font-size: 11px; }
  .icon-btn{ width: 34px; height: 34px; border-radius: 9px; }
  .sync-badge{ font-size: 9px; padding: 4px 9px; margin-bottom: 12px; }
  .empty-state{ padding: 24px 8px; }
  .empty-state h2{ font-size: 15px; }
  .empty-state p{ font-size: 12px; }
  .site-footer{ font-size: 10px; padding: 10px; }
}

@media (min-width: 600px) and (max-width: 767px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
  .container{ padding: 22px 16px 44px; }
  #profile-img{ width: 96px; height: 96px; margin-top: -10px; margin-bottom: -54px; }
  .topbar-center{ font-size: 19px; }
}

@media (min-width: 769px) and (max-width: 1023px){
  .container{ max-width: 960px; padding: 26px 20px 52px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
  #profile-img{ width: 104px; height: 104px; margin-top: -12px; margin-bottom: -58px; }
}

@media (min-width: 1024px){
  .container{ max-width:1320px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:22px; }
}

@media (min-width: 1400px){
  .container{ max-width: 1400px; padding: 32px 30px 64px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
  .topbar{ padding: 18px 30px 22px; }
  .topbar-center{ font-size: 23px; }
  #profile-img{ width: 132px; height: 132px; margin-top: -14px; margin-bottom: -72px; }
  .search-box{ max-width: 580px; }
  .card-body{ padding: 18px 20px 20px; }
  .card-title{ font-size: 17px; }
  .card-price-tag{ font-size: 15px; padding: 7px 16px; }
}

@media (min-width: 1920px){
  .container{ max-width: 1600px; padding: 40px 40px 76px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
  .topbar{ padding: 20px 40px 24px; border-radius: 0 0 32px 32px; }
  .topbar-center{ font-size: 25px; letter-spacing: .05em; }
  #profile-img{ width: 142px; height: 142px; margin-top: -16px; margin-bottom: -78px; }
  .search-box{ max-width: 640px; padding: 15px 20px; }
  .search-box input{ font-size: 15px; }
  .empty-state{ padding: 100px 40px; }
}

.logo-wrap, .topbar-left, .topbar-right{ flex-shrink:0; }