/* 1300'S Coffee — Vùng trồng xuất khẩu — shared stylesheet */
:root{
  --bg:#FBF6EB; --surface:#FFFFFF; --surface-2:#F4E9D6; --surface-3:#EBDCBE;
  --fg:#211809; --muted:#6E5D47; --border:#E6D7B8;
  --accent:#B87F2A; --accent-strong:#8A5B1E; --accent-soft:#E3B264; --accent-fg:#FFFFFF;
  --accent-2:#2A4E29; --accent-2-strong:#18331A; --accent-2-soft:#5E8A52; --accent-2-fg:#FFFFFF;
  --danger:#B3432B; --warn-bg:#FBEFD9; --warn-fg:#6B4A14;
  --shadow-sm:0 1px 2px rgba(33,24,9,.07);
  --shadow-md:0 10px 28px -12px rgba(33,24,9,.24);
  --shadow-lg:0 24px 48px -18px rgba(33,24,9,.34);
  --shadow:var(--shadow-sm), var(--shadow-md);
  --ring:0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15110C; --surface:#1D170F; --surface-2:#251D13; --surface-3:#2E2417;
    --fg:#F5EDDD; --muted:#BBAB8C; --border:#3C3020;
    --accent:#DCA355; --accent-strong:#F0BE78; --accent-soft:#8A5B1E; --accent-fg:#19130B;
    --accent-2:#78AD6B; --accent-2-strong:#9ACB8C; --accent-2-soft:#1D3A1C; --accent-2-fg:#0D1A0D;
    --danger:#E6896D; --warn-bg:#352813; --warn-fg:#EDC988;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 10px 28px -12px rgba(0,0,0,.5);
    --shadow-lg:0 24px 48px -18px rgba(0,0,0,.6);
    --ring:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .logo-img{ filter:invert(1); }
}
:root[data-theme="dark"]{
  --bg:#15110C; --surface:#1D170F; --surface-2:#251D13; --surface-3:#2E2417;
  --fg:#F5EDDD; --muted:#BBAB8C; --border:#3C3020;
  --accent:#DCA355; --accent-strong:#F0BE78; --accent-soft:#8A5B1E; --accent-fg:#19130B;
  --accent-2:#78AD6B; --accent-2-strong:#9ACB8C; --accent-2-soft:#1D3A1C; --accent-2-fg:#0D1A0D;
  --danger:#E6896D; --warn-bg:#352813; --warn-fg:#EDC988;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 10px 28px -12px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -18px rgba(0,0,0,.6);
  --ring:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
  color-scheme:dark;
}
:root[data-theme="dark"] .logo-img{ filter:invert(1); }
*{box-sizing:border-box;}
html,body{background:var(--bg);}
body{color:var(--fg); font-family:"Public Sans",system-ui,sans-serif; margin:0; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.disp{font-family:"Fraunces",Georgia,serif; text-wrap:balance; letter-spacing:-.01em;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%; display:block;}
[hidden]{display:none!important;}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:20px;}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); display:inline-flex; align-items:center; gap:8px;}
.eyebrow::before{content:""; width:16px; height:2px; background:var(--accent); border-radius:2px; display:inline-block;}
.muted{color:var(--muted);}

/* header / nav */
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); box-shadow:0 1px 0 var(--border), 0 12px 24px -20px rgba(33,24,9,.3);}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; transition:opacity .15s ease;}
.brand:hover{opacity:.82;}
.logo-img{height:34px; width:auto;}
.brand-text{display:flex; flex-direction:column; line-height:1.1; gap:3px;}
.logo1300s{display:flex; flex-direction:column; color:var(--fg);}
.logo1300s .num{font-family:"Fraunces",serif; font-weight:700; font-size:21px; letter-spacing:.01em;}
.logo1300s .num i{font-style:normal;}
.logo1300s .word{font-size:10px; font-weight:600; letter-spacing:.3em; color:var(--muted); margin-left:1px;}
.brand .tagline, .brand-text .tagline{font-size:11px; letter-spacing:.04em; color:var(--accent-2); font-weight:700;}
nav.tabs{display:flex; gap:4px; overflow-x:auto; padding-block:0 10px; -ms-overflow-style:none; scrollbar-width:none;}
nav.tabs::-webkit-scrollbar{display:none;}
nav.tabs a{white-space:nowrap; background:none; border:none; color:var(--muted); font-size:14px; font-weight:600; padding:8px 13px; border-radius:999px; cursor:pointer; text-decoration:none; display:inline-block; transition:color .15s ease, background .15s ease;}
nav.tabs a:hover{color:var(--fg); background:var(--surface-2);}
nav.tabs a[aria-current="page"]{color:var(--accent-fg); background:linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow:var(--shadow-sm);}
nav.tabs a:focus-visible, a:focus-visible, .card:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}

main{padding-block:28px 72px;}
section.tab{padding-block:4px;}

/* hero */
.hero{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding-block:40px 56px; isolation:isolate;}
.hero::before, .hero::after{content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none;}
.hero::before{width:360px; height:360px; background:var(--accent-soft); top:-80px; left:-120px;}
.hero::after{width:300px; height:300px; background:var(--accent-2-soft); bottom:-100px; right:10%; opacity:.22;}
.hero h1{font-size:clamp(32px,4.6vw,50px); font-weight:600; margin:12px 0 16px; line-height:1.12;}
.hero p.lead{font-size:17px; color:var(--muted); max-width:52ch; margin:0 0 24px; line-height:1.65;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px;}
.trust-row{display:flex; gap:18px; flex-wrap:wrap;}
.trust-item{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--muted);}
.trust-item .dot{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:color-mix(in srgb, var(--accent-2) 18%, var(--surface)); color:var(--accent-2); font-size:11px; flex:0 0 auto;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:var(--shadow-md);}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.stat-num{font-family:"Fraunces",serif; font-size:31px; font-weight:600; color:var(--accent-2);}
.stat-label{font-size:13px; color:var(--muted); margin-top:2px;}
.minimap-wrap{border-radius:16px; overflow:hidden; border:1px solid var(--border); position:relative; background:linear-gradient(160deg, var(--surface-2), var(--surface));}
.minimap-svg{display:block; width:100%; height:auto;}
.pin{cursor:pointer;}
.pin-ring{fill:none; stroke:var(--accent-2); stroke-width:1.5; opacity:.35; transition:r .15s ease, opacity .15s ease;}
.pin-dot{fill:var(--accent-2); stroke:var(--bg); stroke-width:2;}
.pin:hover .pin-ring, .pin:focus-visible .pin-ring{opacity:.6;}
.pin-label{font-family:"IBM Plex Mono",monospace; font-size:7.5px; fill:var(--fg); text-anchor:middle; paint-order:stroke; stroke:var(--bg); stroke-width:3px; opacity:0; transition:opacity .15s ease;}
.pin:hover .pin-label, .pin:focus-visible .pin-label{opacity:1;}
.map-place{font-family:"IBM Plex Mono",monospace; font-size:8px; fill:var(--muted); letter-spacing:.06em;}
.map-cap{position:absolute; bottom:10px; left:12px; right:12px; font-size:11.5px; color:var(--muted); background:color-mix(in srgb, var(--bg) 82%, transparent); padding:5px 9px; border-radius:8px;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:11px; padding:12px 20px; font-weight:700; font-size:14.5px; cursor:pointer; border:1px solid transparent; text-decoration:none; background:var(--surface); color:var(--fg); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; box-shadow:var(--shadow-sm);}
.btn .icon-arrow{display:inline-block; transition:transform .18s ease; font-weight:400;}
.btn:hover .icon-arrow{transform:translateX(4px);}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:var(--accent-fg); border-color:color-mix(in srgb, var(--accent-strong) 70%, transparent); box-shadow:0 12px 26px -10px color-mix(in srgb, var(--accent) 65%, transparent), var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -10px color-mix(in srgb, var(--accent) 70%, transparent), var(--shadow-sm); filter:brightness(1.03);}
.btn-primary:active{transform:translateY(0); filter:brightness(.98);}
.btn-ghost{background:var(--surface); border-color:var(--border); color:var(--fg);}
.btn-ghost:hover{background:var(--surface-2); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger);}
.btn-sm{padding:8px 13px; font-size:13px; border-radius:9px;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none!important; box-shadow:none!important;}
.btn-block{width:100%; justify-content:center;}
.btn-lg{padding:15px 26px; font-size:15.5px; border-radius:13px;}

/* section headers */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(23px,3vw,31px); font-weight:600; margin:6px 0 0;}
.section-head p{color:var(--muted); max-width:60ch; margin:8px 0 0; font-size:14.5px; line-height:1.6;}

/* full-width soft panel for visual rhythm */
.panel-band{background:linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 60%, var(--bg))); border-radius:28px; padding:clamp(28px,4vw,44px); margin-block:12px 32px; border:1px solid var(--border);}
.panel-band .section-head{margin-bottom:24px;}

/* cards grid */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){.grid-3{grid-template-columns:1fr 1fr;} .hero{grid-template-columns:1fr;}}
@media (max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-width:0; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 30%, var(--border));}
.card-media{aspect-ratio:4/3; position:relative; display:flex; align-items:flex-end; padding:12px; overflow:hidden;
  background-image:
    radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 62%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--accent) 16%, transparent) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 38% 82%, color-mix(in srgb, var(--accent-2) 14%, transparent) 0 3px, transparent 4px),
    linear-gradient(135deg,var(--surface-2),var(--surface-3));
}
.card-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.card:hover .card-media img{transform:scale(1.045);}
.card-media > *{position:relative; z-index:1;}
.card-body{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.avatar{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--accent-2), var(--accent-2-strong)); color:var(--accent-2-fg); display:flex; align-items:center; justify-content:center; font-family:"Fraunces",serif; font-weight:700; font-size:18px; border:2px solid var(--bg); box-shadow:0 0 0 1px var(--border), var(--shadow-sm);}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted); width:fit-content;}
.badge.green{background:color-mix(in srgb, var(--accent-2) 16%, var(--surface)); color:var(--accent-2);}
.badge.green::before{content:"✓"; font-size:10px;}
.badge.gold{background:color-mix(in srgb, var(--accent) 18%, var(--surface)); color:var(--accent);}
.badge.gold::before{content:"★"; font-size:10px;}
.badge.low{background:var(--warn-bg); color:var(--warn-fg);}
.badge.low::before{content:"●"; font-size:9px;}
.specs{display:flex; flex-direction:column; gap:7px; margin:4px 0;}
.specs-2col{display:grid; grid-template-columns:1fr 1fr; gap:7px 24px; margin:4px 0;}
.spec-row{display:flex; align-items:baseline; gap:12px;}
.spec-row b{flex:0 0 100px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.spec-row span{flex:1; min-width:0; font-family:"Public Sans",sans-serif; font-size:13.5px; font-weight:500; color:var(--fg);}
.specs-sub{margin:14px 0 2px; font-size:13px; font-weight:700; color:var(--accent-2);}
.capacity{margin-top:auto;}
.bar{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin:6px 0;}
.bar > i{display:block; height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent-2-strong)); border-radius:99px;}
.bar.low > i{background:linear-gradient(90deg, var(--danger), #8f331f);}
.cap-row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted);}
.price-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:4px;}
.price{font-family:"Fraunces",serif; font-weight:700; font-size:20px; color:var(--accent-strong);}
.price small{font-family:"Public Sans",sans-serif; font-weight:500; font-size:12px; color:var(--muted);}

.note{background:var(--warn-bg); color:var(--warn-fg); border-radius:14px; padding:15px 18px; font-size:13.5px; line-height:1.6; border:1px solid color-mix(in srgb, var(--warn-fg) 18%, transparent);}
.note b{color:inherit;}
.alert{border-radius:14px; padding:15px 18px; font-size:13.5px; line-height:1.55; margin-bottom:18px; border:1px solid transparent;}
.alert-success{background:color-mix(in srgb, var(--accent-2) 14%, var(--surface)); color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 24%, transparent);}
.alert-error{background:color-mix(in srgb, var(--danger) 14%, var(--surface)); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 24%, transparent);}

/* SCA cupping-score scale */
.sca-block{margin-top:4px;}
.sca-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px;}
.sca-head b{font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.sca-score{font-size:12.5px; color:var(--fg); font-weight:700;}
.sca-track{display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--surface-2); position:relative;}
.sca-seg{flex:0 0 auto; background:var(--border); opacity:.7;}
.sca-seg-lt80{flex-basis:22%;}
.sca-seg-80-84\.99{flex-basis:24%;}
.sca-seg-85-89\.99{flex-basis:24%;}
.sca-seg-90-100{flex-basis:30%;}
.sca-seg.is-active{background:linear-gradient(90deg, var(--accent-2), var(--accent-2-strong)); opacity:1;}
.sca-marker{position:absolute; top:-3px; width:3px; height:16px; background:var(--fg); border-radius:2px; transform:translateX(-50%); box-shadow:0 0 0 2px var(--surface);}
.sca-ticks{display:flex; font-size:10px; color:var(--muted); margin-top:4px; font-family:"IBM Plex Mono",monospace;}
.sca-ticks span:nth-child(1){flex-basis:22%;}
.sca-ticks span:nth-child(2){flex-basis:24%;}
.sca-ticks span:nth-child(3){flex-basis:24%;}
.sca-ticks span:nth-child(4){flex-basis:30%; text-align:right;}
.sca-current{margin-top:8px;}

/* about / process */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.steps{grid-template-columns:1fr;}}
.step{border:1px solid var(--border); background:var(--surface); border-radius:16px; padding:18px; transition:transform .2s ease, box-shadow .2s ease;}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.step .n{font-family:"Fraunces",serif; font-size:27px; color:var(--accent); font-weight:700; -webkit-text-stroke:0; background:linear-gradient(135deg, var(--accent), var(--accent-strong)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

/* contact / forms */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.copy-row{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--border); border-radius:11px; padding:11px 15px; background:var(--surface);}
.copy-row span{font-family:"IBM Plex Mono",monospace; font-size:13.5px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:13px; font-weight:700;}
.field input, .field textarea, .field select{font:inherit; padding:11px 13px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--fg); width:100%; transition:border-color .15s ease, box-shadow .15s ease;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring);}
.field-check{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; margin:14px 0 4px; cursor:pointer;}
.field-check input{width:16px; height:16px;}
.hint{font-size:12px; color:var(--muted);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){.row2{grid-template-columns:1fr;}}
.summary-box{background:var(--surface-2); border-radius:14px; padding:15px 18px; display:flex; flex-direction:column; gap:7px; font-size:13.5px; margin-top:16px; border:1px solid var(--border);}
.summary-box .tot{display:flex; justify-content:space-between; font-weight:700; font-size:17px; color:var(--accent-strong); border-top:1px dashed var(--border); padding-top:9px; margin-top:4px;}
.summary-box .line{display:flex; justify-content:space-between;}

footer.site{background:linear-gradient(180deg, transparent, var(--surface-2) 40px); border-top:1px solid var(--border); padding-block:36px calc(36px + env(safe-area-inset-bottom,0px)); margin-top:48px;}
footer.site .wrap{font-size:13px; color:var(--muted);}
footer.site .foot-brand{font-family:"Fraunces",serif; font-weight:700; font-size:16px; color:var(--fg); margin-bottom:12px;}
footer.site .foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px 40px; margin-bottom:18px;}
@media (max-width:620px){footer.site .foot-grid{grid-template-columns:1fr;}}
footer.site .foot-grid div{line-height:1.7;}
footer.site .foot-disclaimer{border-top:1px solid var(--border); padding-top:14px; font-size:12px;}
footer.site a{color:var(--accent-2); text-decoration:none; font-weight:700;}
footer.site a:hover{text-decoration:underline;}

.vid-card a.disabled{pointer-events:none; opacity:.55;}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:4px;}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr 1fr;}}
.gallery-tile{aspect-ratio:4/3; border-radius:12px; background:linear-gradient(135deg,var(--surface-2),var(--surface-3)); display:flex; align-items:flex-end; padding:8px; min-width:0; position:relative; overflow:hidden; border:1px solid var(--border);}
.gallery-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.gallery-tile span{font-size:11px; color:var(--muted); font-weight:600; position:relative; z-index:1;}
.news-date{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); font-weight:600;}

/* ---- admin ---- */
.admin-body{min-height:100vh; display:flex;}
.admin-sidebar{width:230px; flex:0 0 230px; background:var(--surface); border-right:1px solid var(--border); padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.admin-sidebar .brand-text{margin-bottom:22px;}
.admin-nav a{display:block; padding:9px 12px; border-radius:9px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; margin-bottom:2px; transition:background .15s ease, color .15s ease;}
.admin-nav a:hover{background:var(--surface-2); color:var(--fg);}
.admin-nav a.active{background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:var(--accent-fg); box-shadow:var(--shadow-sm);}
.admin-main{flex:1; min-width:0; padding:28px 32px;}
@media (max-width:820px){.admin-body{flex-direction:column;} .admin-sidebar{width:100%; flex:none; position:static; height:auto;} .admin-main{padding:20px;}}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:12px; flex-wrap:wrap;}
.admin-topbar h1{font-size:22px; margin:0;}
table.admin-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; font-size:13.5px;}
table.admin-table th, table.admin-table td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.admin-table th{background:var(--surface-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
table.admin-table tr{transition:background .12s ease;}
table.admin-table tr:hover td{background:color-mix(in srgb, var(--surface-2) 55%, transparent);}
table.admin-table tr:last-child td{border-bottom:none;}
table.admin-table img.thumb{width:48px; height:48px; object-fit:cover; border-radius:9px;}
.admin-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; margin-bottom:20px; box-shadow:var(--shadow-sm);}
.admin-card h2{font-size:16px; margin:0 0 16px;}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;}
@media (max-width:760px){.kpi-grid{grid-template-columns:1fr 1fr;}}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:17px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.kpi .num{font-family:"Fraunces",serif; font-size:27px; font-weight:700; color:var(--accent-2);}
.kpi .label{font-size:12.5px; color:var(--muted); margin-top:2px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
@media (max-width:680px){.form-grid{grid-template-columns:1fr;}}
.form-actions{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden;}
.login-wrap::before{content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%), radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 45%); z-index:0;}
.login-card{position:relative; z-index:1; width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:34px; box-shadow:var(--shadow-lg);}
.gallery-field{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px;}
@media (max-width:620px){.gallery-field{grid-template-columns:1fr 1fr;}}
.gallery-field-item{border:1px dashed var(--border); border-radius:12px; padding:8px;}
.gallery-field-item img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; margin-bottom:6px;}
.tag-pill{display:inline-block; font-size:11px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-weight:600;}
.status-pill{display:inline-block; font-size:11px; padding:4px 10px; border-radius:999px; font-weight:700;}
.status-pill.new{background:var(--warn-bg); color:var(--warn-fg);}
.status-pill.done{background:color-mix(in srgb, var(--accent-2) 16%, var(--surface)); color:var(--accent-2);}