:root {
    --bg: #08130f;
    --panel: #10261f;
    --panel-2: #17352c;
    --panel-3: #0c1d17;
    --text: #eef7f2;
    --muted: #a9beb4;
    --line: rgba(255,255,255,.11);
    --accent: #81e6a9;
    --accent-2: #b7ffd0;
    --danger: #ff8585;
    --warning: #ffc86b;
    --blue: #8dc7ff;
    --shadow: 0 20px 55px rgba(0,0,0,.24);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: radial-gradient(circle at top, #17352c 0, var(--bg) 42rem); color: var(--text); font: 15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; min-height: 100vh; }
button,input,select { font: inherit; }
button,select { cursor: pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline: 3px solid rgba(129,230,169,.35); outline-offset: 2px; }
.topbar { max-width: 1180px; margin: 0 auto; padding: 28px 22px 10px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size: clamp(24px, 5vw, 36px); margin-bottom:0; letter-spacing:-.04em; }
h2 { font-size: clamp(23px, 5vw, 36px); margin-bottom:4px; letter-spacing:-.035em; }
h3 { font-size: 18px; margin:0; }
h4 { font-size: 16px; margin:0; }
.eyebrow { margin:0 0 3px; color:var(--accent); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.muted { color:var(--muted); }
.page { width:min(1180px, calc(100% - 28px)); margin:0 auto; padding:16px 0 70px; }
.panel,.stat,.item-card { border:1px solid var(--line); background:rgba(16,38,31,.92); box-shadow:var(--shadow); border-radius:20px; }
.hero { padding:24px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.hero p:last-child { margin-bottom:0; }
.progress-ring { --progress:0; width:112px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; align-content:center; background:conic-gradient(var(--accent) calc(var(--progress) * 1%), rgba(255,255,255,.08) 0); position:relative; flex:0 0 auto; }
.progress-ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--panel); }
.progress-ring strong,.progress-ring span { position:relative; z-index:1; }
.progress-ring strong { font-size:23px; line-height:1; }
.progress-ring span { color:var(--muted); font-size:11px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0; }
.stats-grid-four { grid-template-columns:repeat(4,1fr); }
.stat { padding:18px 20px; }
.stat span { display:block; color:var(--muted); font-size:12px; }
.stat strong { display:block; font-size:25px; margin-top:3px; }
.stat.attention { border-color:rgba(255,200,107,.35); }
.add-panel,.new-trip-panel,.people-panel,.departure-panel { margin:12px 0 20px; padding:0 20px; }
details > summary { list-style:none; display:flex; justify-content:space-between; gap:15px; padding:18px 0; cursor:pointer; font-weight:800; }
details > summary::-webkit-details-marker { display:none; }
details > summary small { color:var(--muted); font-weight:500; }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:2px 0 20px; }
.form-grid label,.stack label,.pack-dialog-form > label,.edit-grid label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.form-grid .wide,.edit-grid .wide { grid-column:span 2; }
input,select { width:100%; border:1px solid var(--line); background:#0b1d17; color:var(--text); border-radius:12px; padding:11px 12px; outline:none; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(129,230,169,.12); }
.check-label { flex-direction:row!important; align-items:center; align-self:end; padding-bottom:9px; color:var(--text)!important; }
.check-label input { width:auto; }
.button { border:0; border-radius:12px; padding:11px 15px; font-weight:800; }
.button.primary { background:var(--accent); color:#092015; }
.button.ghost { background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--line); }
.button.danger { background:rgba(255,133,133,.13); color:#ffd2d2; border:1px solid rgba(255,133,133,.3); }
.button.small { padding:9px 12px; }
.form-grid > .button { align-self:end; }
.undo-row { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:0 0 12px; color:var(--muted); font-size:12px; }
.people-chips { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 14px; }
.person-chip { border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:rgba(255,255,255,.04); }
.attendee-form { grid-template-columns:1.2fr 1.2fr 1.5fr auto; }
.quick-presets { border-top:1px solid var(--line); padding:14px 0 18px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:12px; }
.quick-presets form { margin:0; }
.preset-button { border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); border-radius:999px; padding:7px 10px; }
.preset-button:hover { border-color:var(--accent); color:var(--accent-2); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 18px; }
.search { max-width:390px; }
.toolbar-controls { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.hide-packed { display:flex; gap:7px; align-items:center; white-space:nowrap; color:var(--muted); font-size:12px; }
.hide-packed input { width:auto; }
.filter-buttons { display:flex; gap:4px; padding:4px; border:1px solid var(--line); background:rgba(16,38,31,.8); border-radius:14px; overflow-x:auto; }
.filter { border:0; border-radius:10px; padding:8px 10px; background:transparent; color:var(--muted); white-space:nowrap; }
.filter.active { background:var(--panel-2); color:var(--accent-2); }
.scope-block { margin:30px 0 42px; }
.scope-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:0 5px 8px; }
.scope-heading h2 { font-size:clamp(24px,4vw,31px); margin-bottom:0; }
.scope-summary { text-align:right; }
.scope-summary strong { display:block; font-size:18px; }
.scope-summary span { display:block; color:var(--muted); font-size:11px; }
.mini-progress { height:5px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; margin:0 5px 14px; }
.mini-progress span { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.personal-actions { display:flex; flex-wrap:wrap; gap:7px; margin:0 5px 18px; }
.personal-actions form { margin:0; }
.category-block { margin:18px 0 26px; }
.category-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:0 5px 7px; }
.category-heading > div:first-child { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.category-heading > div:first-child span { color:var(--muted); font-size:11px; }
.category-progress { display:flex; gap:7px; align-items:baseline; color:var(--muted); font-size:11px; }
.category-progress strong { color:var(--text); font-size:12px; }
.category-bar { margin-bottom:9px; height:3px; }
.items { display:grid; gap:8px; }
.item-card { padding:12px; display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:12px; align-items:center; transition:.18s ease; }
.item-card.packed { opacity:.62; }
.item-card.packed h4 { text-decoration:line-through; }
.item-card.priority:not(.packed) { border-color:rgba(255,200,107,.55); box-shadow:0 0 0 1px rgba(255,200,107,.10), var(--shadow); }
.item-card.buy-needed:not(.packed) { background:linear-gradient(90deg, rgba(255,200,107,.08), rgba(16,38,31,.92) 25%); }
.item-title-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.badge { font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; color:#211500; background:var(--warning); padding:3px 6px; border-radius:999px; }
.badge-buy { background:#f1b56f; }
.badge-last { background:var(--blue); color:#09203a; }
.item-meta { display:flex; flex-wrap:wrap; gap:5px 12px; color:var(--muted); font-size:12px; margin-top:4px; }
.item-meta em { opacity:.7; font-size:10px; }
.packed-status { min-width:68px; text-align:right; white-space:nowrap; }
.packed-status strong { display:block; font-size:14px; line-height:1.15; }
.packed-status span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.item-actions { display:flex; align-items:center; gap:6px; }
.pack-button { min-width:82px; min-height:40px; border:1px solid rgba(129,230,169,.38); border-radius:11px; padding:8px 12px; background:#0b1d17; color:var(--accent-2); font-weight:800; }
.pack-button:hover { border-color:var(--accent); background:rgba(129,230,169,.08); }
.pack-button.complete { background:var(--accent); border-color:var(--accent); color:#092015; }
.pack-form { margin:0; }
.more-button { min-width:42px; min-height:40px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.05); color:var(--muted); font-weight:900; letter-spacing:1px; }
.buy-form { margin:0; }
.buy-toggle { border:0; background:transparent; color:var(--muted); font-size:11px; padding:6px 2px; white-space:nowrap; }
.buy-toggle.active { color:var(--warning); }
.scope-empty { border:1px dashed var(--line); border-radius:16px; padding:18px; text-align:center; }
.pack-dialog { width:min(470px, calc(100% - 28px)); border:1px solid var(--line); border-radius:20px; background:var(--panel); color:var(--text); padding:0; box-shadow:var(--shadow); }
.pack-dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(3px); }
.pack-dialog-form { display:grid; gap:18px; padding:24px; }
.pack-dialog-heading h3 { margin-bottom:4px; font-size:23px; }
.pack-dialog-heading p:last-child { margin-bottom:0; }
.pack-quantity-label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; }
.pack-quantity-label input { font-size:22px; font-weight:800; text-align:center; }
.pack-limit { color:var(--muted); font-size:11px; text-align:center; }
.pack-dialog-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.edit-dialog { width:min(690px, calc(100% - 28px)); }
.edit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.edit-dialog-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:17px; }
.edit-dialog-footer > div { display:flex; gap:8px; }
.icon-button { border:0; background:transparent; color:var(--muted); font-size:24px; padding:5px 8px; }
.icon-button:hover { color:var(--danger); }
.departure-list { display:grid; gap:7px; padding-bottom:12px; }
.departure-task { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.departure-toggle-form { display:flex; align-items:center; gap:10px; flex:1; }
.task-check { width:34px; height:34px; flex:0 0 34px; border:1px solid rgba(129,230,169,.4); border-radius:9px; background:#0b1d17; color:#092015; font-weight:900; }
.departure-task.done .task-check { background:var(--accent); }
.departure-task.done span { color:var(--muted); text-decoration:line-through; }
.add-task-form { display:grid; grid-template-columns:1fr auto; gap:8px; padding:4px 0 20px; }
.trip-create-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 0 20px; }
.trip-card-form { border:1px solid var(--line); border-radius:16px; padding:16px; background:rgba(255,255,255,.025); }
.date-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.empty-state { text-align:center; padding:42px 24px; }
.empty-state .big-icon { font-size:46px; margin-bottom:9px; }
.compact-form { margin-top:20px; text-align:left; }
.flash { border-radius:14px; padding:12px 14px; margin-bottom:14px; border:1px solid rgba(129,230,169,.35); background:rgba(129,230,169,.10); }
.flash.error { border-color:rgba(255,133,133,.4); background:rgba(255,133,133,.10); }
.top-actions { display:flex; gap:8px; align-items:center; }
.login-page { display:grid; place-items:center; padding:20px; }
.login-card { width:min(420px,100%); background:rgba(16,38,31,.95); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:30px; }
.brand-mark { font-size:44px; margin-bottom:10px; }
.stack { display:grid; gap:14px; }
[hidden] { display:none!important; }

@media (max-width: 900px) {
    .stats-grid-four { grid-template-columns:repeat(2,1fr); }
    .toolbar { align-items:stretch; flex-direction:column; }
    .search { max-width:none; }
    .toolbar-controls { justify-content:space-between; flex-wrap:wrap; }
    .filter-buttons { flex:1; }
    .filter { flex:1 0 auto; }
    .attendee-form { grid-template-columns:1fr 1fr; }
    .item-card { grid-template-columns:minmax(0,1fr) auto; }
    .item-main { grid-column:1; }
    .packed-status { grid-column:2; grid-row:1; }
    .item-actions { grid-column:1; grid-row:2; }
    .buy-form { grid-column:2; grid-row:2; justify-self:end; }
}
@media (max-width: 760px) {
    .topbar { align-items:flex-start; flex-direction:column; }
    .top-actions { width:100%; justify-content:space-between; }
    .hero { padding:20px; }
    .form-grid { grid-template-columns:1fr 1fr; }
    .trip-create-grid { grid-template-columns:1fr; }
    .scope-heading { align-items:flex-start; }
    .personal-actions { display:grid; grid-template-columns:1fr; }
    .personal-actions .button { width:100%; }
}
@media (max-width: 520px) {
    .page { width:min(100% - 18px, 1180px); }
    .topbar { padding:20px 12px 8px; }
    .hero { align-items:flex-start; }
    .progress-ring { width:86px; }
    .stats-grid-four { gap:7px; }
    .stat { padding:12px 10px; border-radius:15px; }
    .stat span { font-size:10px; }
    .stat strong { font-size:17px; }
    .form-grid,.attendee-form,.edit-grid { grid-template-columns:1fr; }
    .form-grid .wide,.edit-grid .wide { grid-column:auto; }
    details > summary { flex-direction:column; gap:2px; }
    .toolbar-controls { align-items:stretch; flex-direction:column; }
    .filter-buttons { width:100%; }
    .scope-heading { align-items:flex-end; }
    .scope-heading h2 { font-size:24px; }
    .scope-summary strong { font-size:15px; }
    .item-card { border-radius:15px; gap:9px; padding:10px; }
    .item-meta { flex-direction:column; gap:2px; }
    .item-actions { width:100%; }
    .pack-form,.pack-button { flex:1; }
    .pack-form .pack-button { width:100%; }
    .buy-toggle { white-space:normal; text-align:right; }
    .edit-dialog-footer { align-items:stretch; flex-direction:column-reverse; }
    .edit-dialog-footer > div { display:grid; grid-template-columns:1fr 1fr; }
    .edit-dialog-footer .button.danger { width:100%; }
    .date-pair { grid-template-columns:1fr; }
    .undo-row { align-items:flex-end; flex-direction:column; }
}