/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BASE ── */
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #09080a;
  color: #f2ede8;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  transition: background .4s, color .4s;
}
body.light { background: #f8f6f3; color: #111010; }

/* ATMOSPHERE */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 55% at 10% 0%, rgba(160,28,52,0.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 95%, rgba(190,150,70,0.11) 0%, transparent 50%);
  transition: background .4s;
}
body.light::before {
  background:
    radial-gradient(ellipse 80% 55% at 10% 0%, rgba(190,150,70,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 95%, rgba(160,28,52,0.04) 0%, transparent 50%);
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ── GLASS ── */
.g {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 16px 48px rgba(0,0,0,0.45);
  border-radius: 20px;
}
body.light .g {
  background: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 16px 48px rgba(0,0,0,0.07);
}

/* ── LAYOUT ── */
.wrap {
  position: relative; z-index: 1;
  max-width: 1060px; margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

/* ── HEADER ── */
.hdr {
  position: sticky; top: 0; z-index: 200;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.75rem;
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  background: rgba(9,8,10,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background .4s;
}
body.light .hdr {
  background: rgba(248,246,243,0.85);
  border-color: rgba(0,0,0,0.05);
}
.brand { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: inherit; }
.brand em { color: #bf9840; font-style: normal; }
.hdr-r { display: flex; align-items: center; gap: .3rem; }

.ib {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; cursor: pointer; border: none;
  transition: all .18s; text-decoration: none;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  color: #f2ede8;
}
body.light .ib { background: rgba(0,0,0,0.045); border-color: rgba(0,0,0,0.07); color: #111010; }
.ib:hover { transform: translateY(-1px); background: rgba(255,255,255,0.11); }
body.light .ib:hover { background: rgba(0,0,0,0.07); }
.ib-theme {
  background: linear-gradient(135deg, rgba(191,152,64,0.2), rgba(160,28,52,0.15)) !important;
  border-color: rgba(191,152,64,0.25) !important;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: none; cursor: pointer; border-radius: 9px;
  font-family: inherit; font-size: .82rem; font-weight: 500;
  transition: all .18s; white-space: nowrap; text-decoration: none;
  padding: .5rem 1.1rem; letter-spacing: -.01em;
}
.btn-gold {
  background: linear-gradient(135deg, #bf9840, #ddb958);
  color: #1a0f04; font-weight: 600;
  box-shadow: 0 1px 12px rgba(191,152,64,0.38), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 3px 20px rgba(191,152,64,0.52); }
.btn-gold:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-muted {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
  color: #f2ede8;
}
body.light .btn-muted { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.09); color: #111010; }
.btn-muted:hover { transform: translateY(-1px); background: rgba(255,255,255,0.11); }
body.light .btn-muted:hover { background: rgba(0,0,0,0.08); }
.btn-sm { padding: .36rem .8rem; font-size: .76rem; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }

/* ── FORMS ── */
.f { margin-bottom: .85rem; }
.f label {
  display: block; font-size: .63rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: .28rem;
  color: rgba(242,237,232,0.38);
}
body.light .f label { color: rgba(17,16,16,0.38); }
.f input, .f textarea, .f select {
  width: 100%; padding: .58rem .85rem; border-radius: 9px;
  font-family: inherit; font-size: .85rem; outline: none; transition: all .18s;
  background: rgba(255,255,255,0.052);
  border: 1px solid rgba(255,255,255,0.085);
  color: #f2ede8;
}
body.light .f input, body.light .f textarea, body.light .f select {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.09);
  color: #111010;
}
.f input:focus, .f textarea:focus, .f select:focus {
  border-color: rgba(191,152,64,0.55);
  box-shadow: 0 0 0 3px rgba(191,152,64,0.09);
}
.f input::placeholder, .f textarea::placeholder { color: rgba(242,237,232,0.18); }
body.light .f input::placeholder, body.light .f textarea::placeholder { color: rgba(17,16,16,0.22); }
.f textarea { min-height: 80px; resize: vertical; }
.f select { cursor: pointer; }
.f select option { background: #1a1215; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.sec {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: #bf9840;
  margin: 1.1rem 0 .55rem; padding-bottom: .38rem;
  border-bottom: 1px solid rgba(191,152,64,0.16);
}

/* ALERTS */
.alert { padding: .65rem .85rem; border-radius: 9px; font-size: .82rem; margin-bottom: 1rem; }
.alert-error { background: rgba(160,28,52,0.12); border: 1px solid rgba(160,28,52,0.22); color: #f07070; }
.alert-ok { background: rgba(40,160,80,0.1); border: 1px solid rgba(40,160,80,0.2); color: #6dcc90; }
.error { background: rgba(160,28,52,0.12); border: 1px solid rgba(160,28,52,0.22); color: #f07070; padding: .65rem .85rem; border-radius: 9px; font-size: .82rem; margin-bottom: 1rem; }
.success { background: rgba(40,160,80,0.1); border: 1px solid rgba(40,160,80,0.2); color: #6dcc90; padding: .65rem .85rem; border-radius: 9px; font-size: .82rem; margin-bottom: 1rem; }

/* ── AUTH ── */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; position: relative; z-index: 1;
}
.auth-box { width: 100%; max-width: 370px; padding: 2.25rem 1.85rem; }
.auth-ttl { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .2rem; }
.auth-ttl em { color: #bf9840; font-style: normal; }
.auth-tag {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.85rem;
  color: rgba(242,237,232,0.3);
}
body.light .auth-tag { color: rgba(17,16,16,0.3); }
.auth-ft { margin-top: 1.1rem; font-size: .75rem; text-align: center; color: rgba(242,237,232,0.3); }
body.light .auth-ft { color: rgba(17,16,16,0.3); }
.auth-ft a { color: #bf9840; }

/* LEGAL CHECKBOX */
.legal-row { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 0 1rem; }
.legal-row input[type=checkbox] { width: 15px; height: 15px; min-width: 15px; margin-top: 2px; accent-color: #bf9840; cursor: pointer; }
.legal-txt { font-size: .7rem; line-height: 1.6; color: rgba(242,237,232,0.42); }
body.light .legal-txt { color: rgba(17,16,16,0.48); }
.legal-txt a { color: #bf9840; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(191,152,64,0.35); }
.legal-txt a:hover { text-decoration-color: #bf9840; }

/* ── DASHBOARD ── */
.hero { padding: 2.25rem 0 1.25rem; }
.greeting { font-size: clamp(1.8rem,4vw,2.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin-bottom: .35rem; }
.greeting em { color: #bf9840; font-style: normal; }
.sub { font-size: .8rem; margin-bottom: 1.5rem; color: rgba(242,237,232,0.38); }
body.light .sub { color: rgba(17,16,16,0.38); }

.pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.pill {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .35rem .85rem; border-radius: 50px; font-size: .75rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
}
body.light .pill { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.07); }
.pill-n { font-size: 1rem; font-weight: 700; color: #bf9840; letter-spacing: -.02em; }

.bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; margin-bottom: .85rem; }
.bar-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #bf9840; }
.bar-btns { display: flex; gap: .35rem; flex-wrap: wrap; }

.search {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border-radius: 13px; margin-bottom: 1.5rem;
}
.search input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: inherit; font-size: .82rem; color: inherit; min-width: 80px;
}
.search input::placeholder { color: rgba(242,237,232,0.22); }
body.light .search input::placeholder { color: rgba(17,16,16,0.25); }
.sep { width: 1px; height: 16px; flex-shrink: 0; background: rgba(255,255,255,0.1); }
body.light .sep { background: rgba(0,0,0,0.1); }

/* ── WINE GRID ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.wine-card {
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s;
  display: flex; flex-direction: column; height: 262px;
  text-decoration: none; color: inherit; position: relative;
}
.wine-card:hover { transform: translateY(-7px); }
.wine-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.55); }
body.light .wine-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.1); }

.wc-img { height: 178px; min-height: 178px; flex-shrink: 0; overflow: hidden; position: relative; }
.wc-img img { width: 100%; height: 178px; object-fit: cover; object-position: center; display: block; transition: transform .38s; }
.wine-card:hover .wc-img img { transform: scale(1.06); }
.wc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(9,8,10,0.55)); }
body.light .wc-img::after { background: linear-gradient(to bottom, transparent 45%, rgba(248,246,243,0.3)); }

.wc-empty {
  height: 178px; min-height: 178px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 2.75rem;
  background: linear-gradient(145deg, rgba(160,28,52,0.22), rgba(9,8,10,0.6));
}
body.light .wc-empty { background: linear-gradient(145deg, rgba(191,152,64,0.13), rgba(248,246,243,0.5)); }

.wc-badge {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  background: rgba(9,8,10,0.52); border: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(14px); color: #bf9840;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  padding: .16rem .48rem; border-radius: 20px;
}
.wc-body {
  flex: 1; padding: .65rem .85rem;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.047);
  border: 1px solid rgba(255,255,255,0.075); border-top: none;
}
body.light .wc-body { background: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.92); }
.wc-name { font-size: .88rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .16rem; }
.wc-meta { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(242,237,232,0.36); }
body.light .wc-meta { color: rgba(17,16,16,0.38); }
.wc-owner { font-size: .62rem; color: rgba(242,237,232,0.25); margin-top: .1rem; }

.wine-empty { text-align: center; padding: 5rem 1rem; color: rgba(242,237,232,0.25); }
body.light .wine-empty { color: rgba(17,16,16,0.25); }
.wine-empty-icon { font-size: 3rem; margin-bottom: .75rem; opacity: .25; }

/* ── DETAIL ── */
.det-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.25rem; }
.det-img { border-radius: 18px; overflow: hidden; }
.det-img a { display: block; width: 100%; height: 100%; }
.det-img img { width: 100%; height: 100%; max-height: 480px; min-height: 300px; object-fit: contain; object-position: center; display: block; cursor: zoom-in; transition: transform .3s; background: rgba(255,255,255,0.02); }
.det-img img:hover { transform: scale(1.015); }
.det-img-e { min-height: 300px; display: flex; align-items: center; justify-content: center; font-size: 5rem; opacity: .15; }
.det-name { font-size: clamp(1.6rem,3.5vw,2.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin-bottom: .7rem; }
.det-div { width: 28px; height: 1.5px; background: linear-gradient(90deg, #bf9840, transparent); margin: .7rem 0 1.1rem; }
.det-row { display: flex; gap: .65rem; margin-bottom: .45rem; align-items: baseline; }
.det-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; min-width: 70px; flex-shrink: 0; color: rgba(242,237,232,0.32); }
body.light .det-lbl { color: rgba(17,16,16,0.32); }
.det-val { font-size: .85rem; }
.det-panel { padding: 1.75rem 2rem; border-radius: 18px; }
.det-notes { border-left: 1.5px solid rgba(160,28,52,0.45); padding: .7rem .9rem; border-radius: 0 9px 9px 0; font-size: .8rem; line-height: 1.65; margin: 1rem 0 1.4rem; font-style: italic; background: rgba(160,28,52,0.09); color: rgba(242,237,232,0.45); }
body.light .det-notes { background: rgba(160,28,52,0.05); color: rgba(17,16,16,0.45); }

/* ── FORM PAGE ── */
.fw { max-width: 540px; margin: 1.75rem auto; }
.fcard { border-radius: 20px; padding: 1.85rem; }
.fttl { font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .18rem; }
.fdesc { font-size: .75rem; margin-bottom: 1.4rem; color: rgba(242,237,232,0.35); }
body.light .fdesc { color: rgba(17,16,16,0.35); }

/* SEARCH RESULTS */
.sri { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .65rem; transition: border-color .18s; }
body.light .sri { background: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.8); }
.sri:hover { border-color: rgba(191,152,64,0.3); }
.sri strong { font-size: .9rem; font-weight: 600; }
.sri-meta { font-size: .72rem; color: rgba(242,237,232,0.38); margin: .15rem 0 .6rem; }
body.light .sri-meta { color: rgba(17,16,16,0.4); }
.sri-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .45rem; align-items: end; }
.sri-row .f { margin-bottom: 0; }

/* ── ADMIN ── */
.admin-strip { background: linear-gradient(135deg, #6b0f1e, #9c1c30); border-radius: 10px; padding: .58rem 1rem; font-size: .75rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: .45rem; margin-bottom: 1.4rem; }
.srow { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.85rem; }
.sbox { flex: 1; min-width: 100px; padding: 1.1rem; border-radius: 16px; text-align: center; }
.sbox-n { font-size: 1.9rem; font-weight: 700; color: #bf9840; letter-spacing: -.04em; line-height: 1; }
.sbox-l { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-top: .28rem; color: rgba(242,237,232,0.32); }
body.light .sbox-l { color: rgba(17,16,16,0.32); }

.tw { border-radius: 16px; overflow: hidden; }
.tw table { width: 100%; border-collapse: collapse; }
.tw th { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: .65rem .9rem; text-align: left; background: rgba(255,255,255,0.032); color: rgba(242,237,232,0.32); border-bottom: 1px solid rgba(255,255,255,0.065); }
body.light .tw th { background: rgba(0,0,0,0.022); color: rgba(17,16,16,0.35); border-color: rgba(0,0,0,0.065); }
.tw td { padding: .65rem .9rem; font-size: .82rem; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.042); }
body.light .tw td { border-color: rgba(0,0,0,0.045); }
.tw tr:last-child td { border: none; }
.tw tr:hover td { background: rgba(255,255,255,0.022); }
body.light .tw tr:hover td { background: rgba(0,0,0,0.018); }

.tw select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: .3rem .6rem; color: inherit; font-size: .78rem; outline: none; }
body.light .tw select { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); }

.rt { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .16rem .52rem; border-radius: 20px; display: inline-block; }
.rt.admin { background: rgba(191,152,64,0.13); color: #bf9840; border: 1px solid rgba(191,152,64,0.26); }
.rt.user { background: rgba(255,255,255,0.055); color: rgba(242,237,232,0.4); border: 1px solid rgba(255,255,255,0.08); }
body.light .rt.user { background: rgba(0,0,0,0.045); color: rgba(17,16,16,0.4); border-color: rgba(0,0,0,0.09); }

/* ── PROFILE ── */
.profile-stat { display: flex; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.profile-stat-box { flex: 0 0 auto; padding: 1.1rem 1.5rem; text-align: center; min-width: 100px; }
.profile-stat-n { font-size: 2rem; font-weight: 700; color: #bf9840; letter-spacing: -.04em; line-height: 1; }
.profile-stat-l { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-top: .28rem; color: rgba(242,237,232,0.32); }
body.light .profile-stat-l { color: rgba(17,16,16,0.32); }

/* ── FOOTER ── */
.footer {
  position: relative; z-index: 1;
  padding: 2rem 1.5rem 1.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .4rem 1.25rem;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.055);
}
body.light .footer { border-color: rgba(0,0,0,0.055); }
.footer a { font-size: .65rem; text-decoration: none; transition: color .18s; color: rgba(242,237,232,0.25); }
body.light .footer a { color: rgba(17,16,16,0.28); }
.footer a:hover { color: #bf9840; }

/* ── RESPONSIVE ── */
@media (max-width: 680px) {
  .det-grid { grid-template-columns: 1fr; }
  .det-img { min-height: 220px; }
  .det-img img { min-height: 220px; }
  .det-img-e { height: 220px; }
  .det-panel { padding: 1.25rem; }
  .f2 { grid-template-columns: 1fr; gap: 0; }
  .sri-row { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 420px) {
  .auth-box { padding: 1.85rem 1.35rem; }
  .wrap { padding: 0 1rem 2rem; }
  .hdr { padding: 0 1rem; }
}

.input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: inherit;
  border-radius: 999px;
  padding: .65rem .85rem;
  font-size: .82rem;
}

.wc-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  line-height: 1.25;
  min-height: auto !important;
  max-height: none !important;
}

.wine-card,
.wc-body {
  height: auto !important;
  overflow: visible !important;
}

.wc-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  min-height: 2.5em;
}