@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

.vk {
  --bg:#E4E7E6; --surface:#FBFBFA; --surface-2:#F1F2F0;
  --ink:#1F1E20; --muted:#6E6A66; --line:#D3D5D2;
  --wine:#6A2435; --wine-soft:#8E4254; --brass:#A9803B;
  --young:#5B7C8D; --ready:#4E7A52; --past:#A35A2A;
  --serif:'Spectral',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  min-height:100vh; -webkit-font-smoothing:antialiased; line-height:1.4;
}
*{box-sizing:border-box;}
body{margin:0;}
a{text-decoration:none; color:inherit;}
.vk-wrap{max-width:1040px; margin:0 auto; padding:28px 20px 80px;}

.vk-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.vk-word{font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:-0.01em; display:flex; align-items:center; gap:10px;}
.vk-word svg{color:var(--wine);}
.vk-word small{font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); align-self:flex-end; margin-bottom:7px;}

.vk-stats{display:flex; gap:26px; flex-wrap:wrap;}
.vk-stat{display:flex; flex-direction:column; gap:1px;}
.vk-stat b{font-family:var(--mono); font-weight:600; font-size:22px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;}
.vk-stat span{font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);}
.vk-stat.ready b{color:var(--ready);}

.vk-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:18px;}
.vk-search{position:relative; flex:1; min-width:200px; margin:0;}
.vk-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted);}
.vk-search input{width:100%; padding:9px 12px 9px 34px; border:1px solid var(--line); background:var(--surface); border-radius:9px; font-family:var(--sans); font-size:14px; color:var(--ink);}
.vk-search input::placeholder{color:var(--muted);}

.vk-seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--surface);}
.vk-seg a{padding:8px 13px; font-size:12.5px; color:var(--muted); cursor:pointer; border-right:1px solid var(--line); display:inline-block;}
.vk-seg a:last-child{border-right:0;}
.vk-seg a.on{background:var(--ink); color:#fff;}

.vk-btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:9px 13px; border-radius:9px; font-family:var(--sans); font-weight:500; font-size:13px; cursor:pointer; transition:background .12s,border-color .12s;}
.vk-btn:hover{background:var(--surface-2);}
.vk-btn.primary{background:var(--wine); border-color:var(--wine); color:#fff;}
.vk-btn.primary:hover{background:var(--wine-soft); border-color:var(--wine-soft);}
.vk-btn.ghost{border-color:transparent; background:transparent;}
.vk-btn.ghost:hover{background:var(--surface-2);}

.vk-rows{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.vk-row{background:var(--surface); display:grid; grid-template-columns:1fr 90px 200px 120px; gap:14px; align-items:center; padding:14px 16px;}
.vk-row:hover{background:#fff;}
.vk-name{font-family:var(--serif); font-size:17px; font-weight:500; line-height:1.15;}
.vk-name em{font-style:italic; color:var(--wine);}
.vk-sub{font-size:11.5px; color:var(--muted); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap;}
.vk-sub .chip{font-family:var(--mono); font-size:11px;}

.vk-qty{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:center;}
.vk-qty b{font-size:18px; font-weight:600;}
.vk-qty span{display:block; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:1px;}

.vk-win{display:flex; flex-direction:column; gap:5px;}
.vk-win .lbl{font-size:10px; letter-spacing:0.08em; text-transform:uppercase; display:flex; justify-content:space-between; font-family:var(--mono);}
.vk-track{position:relative; height:6px; border-radius:6px; background:var(--surface-2); overflow:hidden;}
.vk-fill{position:absolute; top:0; bottom:0; left:0; border-radius:6px;}
.vk-marker{position:absolute; top:-3px; width:2px; height:12px; border-radius:2px;}
.vk-win .none{font-size:11px; color:var(--muted); font-style:italic;}

.vk-acts{display:flex; gap:4px; justify-content:flex-end; align-items:center;}
.vk-acts form{margin:0; display:inline-flex;}
.vk-icon{border:0; background:transparent; color:var(--muted); padding:6px; border-radius:8px; cursor:pointer; display:inline-flex; transition:background .12s,color .12s;}
.vk-icon:hover{background:var(--surface-2); color:var(--ink);}
.vk-icon.pour:hover{color:var(--ready);}
.vk-icon.del:hover{color:var(--past);}

.vk-empty{background:var(--surface); border:1px dashed var(--line); border-radius:12px; padding:54px 20px; text-align:center;}
.vk-empty .glyph{color:var(--line); margin-bottom:12px; display:flex; justify-content:center;}
.vk-empty h3{font-family:var(--serif); font-weight:500; font-size:21px; margin:0 0 6px;}
.vk-empty p{color:var(--muted); font-size:13.5px; margin:0 0 18px; max-width:380px; margin-left:auto; margin-right:auto;}

.vk-overlay{position:fixed; inset:0; background:rgba(20,18,20,.42); display:flex; align-items:flex-start; justify-content:center; padding:32px 16px; overflow:auto; z-index:50;}
.vk-modal{background:var(--surface); border-radius:16px; width:100%; max-width:560px; box-shadow:0 24px 60px rgba(0,0,0,.25); max-height:calc(100vh - 64px); overflow-y:auto;}
.vk-modal-h{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2;}
.vk-modal-h h2{font-family:var(--serif); font-weight:500; font-size:19px; margin:0;}
.vk-form{padding:20px 22px 6px;}
.vk-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.vk-field{display:flex; flex-direction:column; gap:5px;}
.vk-field.full{grid-column:1 / -1;}
.vk-field label{font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.vk-field input, .vk-field textarea{border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px; font-family:var(--sans); font-size:13.5px; color:var(--ink); width:100%;}
.vk-field textarea{resize:vertical; min-height:62px;}
.vk-field .mono{font-family:var(--mono);}
.vk-types{display:flex; flex-wrap:wrap; gap:8px;}
.vk-types label{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 12px; font-family:var(--sans); font-size:13.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); cursor:pointer; user-select:none;}
.vk-types input[type=checkbox]{accent-color:var(--wine); width:15px; height:15px; margin:0; cursor:pointer; flex:none;}
.vk-types label:has(input:checked){border-color:var(--wine); background:#f6edef; color:var(--wine); font-weight:500;}
.vk-sub .chip.type{color:var(--wine); border:1px solid var(--line); border-radius:5px; padding:0 5px; font-family:var(--sans); font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em;}
.vk-modal-f{display:flex; justify-content:flex-end; gap:9px; padding:16px 22px 20px; position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line);}

.vk-logrow{background:var(--surface); display:flex; align-items:flex-start; justify-content:space-between; padding:12px 16px; gap:14px;}
.vk-logrow .date{font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; padding-top:2px;}
.vk-logright{display:flex; align-items:center; gap:6px; flex:none; padding-top:1px;}
.vk-bulkbar{display:flex; align-items:center; justify-content:flex-end; gap:14px; margin:0 0 10px;}
.vk-selall{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); cursor:pointer; user-select:none;}
.bulk-cb, #bulk-all{width:15px; height:15px; accent-color:var(--wine); cursor:pointer;}
.vk-yearhead{font-family:var(--serif); font-weight:600; font-size:16px; padding:16px 16px 7px; border-bottom:1px solid var(--line); background:var(--surface);}
.vk-yearhead span{font-family:var(--sans); font-weight:400; font-size:11.5px; color:var(--muted);}
.log-note{font-size:12px; color:var(--muted); font-style:italic; margin-top:5px; max-width:600px; line-height:1.45; white-space:pre-line;}

.vk-footnote{margin-top:18px; font-size:11.5px; color:var(--muted); display:flex; gap:6px; align-items:center;}
.vk-footnote svg{color:var(--ready);}

/* Dense register (Option B) */
.reg-wrap{overflow-x:auto;}
.reg{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.reg th{font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); font-weight:600; white-space:nowrap; user-select:none;}
.reg th.srt:hover{color:var(--ink);}
.reg td{padding:10px 10px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle;}
.reg tbody tr:last-child td{border-bottom:0;}
.reg tbody tr:hover td{background:#fff;}
.reg .nm{font-family:var(--serif); font-size:15px;}
.reg .nm em{font-style:italic; color:var(--wine);}
.reg .cell-sub{font-size:11px; color:var(--muted); margin-top:1px;}
.reg .muted{color:var(--muted);}
.reg .c{text-align:center;}
.reg .r{text-align:right;}
.reg .mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.reg .rating{color:var(--brass);}
.reg .win-cell{min-width:125px;}
.reg .win-cell .vk-win{min-width:0;}
.reg .acts-cell .vk-acts{justify-content:flex-end;}
.sort-arrow{color:var(--wine); font-size:9px;}
.reg .chip{display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; border-radius:5px; padding:2px 6px; font-weight:600; margin-right:2px;}
.chip{display:inline-block; border-radius:5px; padding:1px 6px;}
.chip.c-Red{color:#6A2435; background:#f3e7ea;}
.chip.c-Rose{color:#a8456a; background:#f8eaf0;}
.chip.c-White{color:#8a6d2a; background:#f5efdf;}
.chip.c-Sparkling{color:#3f6f6a; background:#e7f0ee;}
.chip.c-Dessert{color:#9a5a2a; background:#f4ebe0;}
@media (max-width:980px){ .reg .hideM{display:none;} }
@media (max-width:560px){
  .reg .hideS{display:none;}
  .reg .vindue-col{display:none;}        /* phone: hide drinking-window */
  .reg .tilf-col{display:table-cell;}    /* phone: show Tilføjet (overrides hideM) */
}
.nm-cell{display:flex; align-items:center; gap:10px;}
.vivino-r{display:block; font-size:10.5px; color:var(--brass); margin-top:2px; letter-spacing:0.02em; text-decoration:none;}
a.vivino-r:hover{text-decoration:underline;}
.chip.vivino-chip{color:var(--brass); background:#f3ecdf; text-decoration:none;}
a.vivino-chip:hover{text-decoration:underline;}
.thumb{flex:none; width:34px; height:46px; border-radius:4px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); display:block;}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb-empty{background:var(--surface-2);}
.nm-name{font-family:var(--serif); font-size:15px;}
.nm-name em{font-style:italic; color:var(--wine);}
.img-current{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.img-current img{width:48px; height:64px; object-fit:cover; border-radius:5px; border:1px solid var(--line);}
.img-current span{font-size:11.5px; color:var(--muted);}

/* Statistik view */
.st-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:24px;}
.st-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
.st-card b{font-family:var(--mono); font-size:23px; font-weight:600; display:block; letter-spacing:-0.02em;}
.st-card small{font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.st-two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.st-section{margin-bottom:22px;}
.st-h{font-family:var(--serif); font-weight:600; font-size:17px; margin:0 0 11px;}
.st-sub{font-family:var(--sans); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin:0 0 9px;}
.ti-note{font-weight:400; text-transform:none; letter-spacing:0; font-size:11px; color:var(--muted);}
.ti-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line);}
.ti-row:last-child{border-bottom:0;}
.ti-name{font-family:var(--serif); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ti-name em{color:var(--muted); font-style:normal; font-size:12px;}
.ti-name .ti-y{font-style:italic; color:var(--wine);}
.ti-scores{display:flex; gap:8px; align-items:baseline; flex:none; font-family:var(--mono); font-size:12px;}
.ti-you{color:var(--ink); font-weight:600;}
.ti-v{color:var(--brass);}
a.ti-v{text-decoration:none;}
a.ti-v:hover{text-decoration:underline;}
.ti-empty{color:var(--muted); font-size:12.5px; font-style:italic; padding:4px 0;}
.st-panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 17px;}
.st-bar{display:grid; grid-template-columns:120px 1fr 38px; align-items:center; gap:11px; margin:6px 0;}
.st-bar .lab{font-size:12.5px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.st-bar .trk{background:var(--surface-2); border-radius:5px; height:13px; overflow:hidden;}
.st-bar .fil{height:100%; background:var(--wine); border-radius:5px;}
.st-bar .val{font-family:var(--mono); font-size:12px; text-align:right; color:var(--muted);}
@media(max-width:620px){ .st-two{grid-template-columns:1fr;} .st-bar{grid-template-columns:92px 1fr 32px;} }

@media (max-width:680px){
  .vk-row{grid-template-columns:1fr auto;}
  .vk-win{grid-column:1 / -1; order:5;}
  .vk-qty{grid-column:2; grid-row:1; text-align:right;}
  .vk-acts{grid-column:1 / -1; justify-content:flex-start; order:6;}
  .vk-grid{grid-template-columns:1fr;}
  .vk-stats{gap:18px;}
}
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible{outline:2px solid var(--wine); outline-offset:1px;}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }