*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #252836;
  --accent: #6c63ff;
  --accent-hover: #5a52e0;
  --text: #e8e8f0;
  --text-dim: #9a9ab0;
  --danger: #ff6b6b;
  --success: #51cf66;
  --today: #ffd43b;
  --wash: #ff922b;
  --radius: 14px;
  --shadow: 0 4px 24px rgba(0,0,0,.35);
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

header { text-align: center; padding: 1.5rem 1rem 0; }
header h1 { font-size: 1.8rem; letter-spacing: -.5px; }
.subtitle { color: var(--text-dim); margin: .3rem 0 1rem; font-size: .9rem; }

nav { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.tab {
  background: var(--surface); border: none; color: var(--text-dim);
  padding: .5rem 1.3rem; border-radius: 999px; font-size: .88rem;
  cursor: pointer; transition: .2s;
}
.tab:hover { color: var(--text); background: var(--surface2); }
.tab.active { background: var(--accent); color: #fff; }
.tab-logout { color: var(--danger) !important; margin-left: auto; }
.tab-logout:hover { background: var(--danger) !important; color: #fff !important; }

/* Sub-tabs */
.sub-tabs { display: flex; gap: .4rem; border-bottom: 2px solid var(--surface2); margin-bottom: 1.5rem; }
.sub-tab {
  background: none; border: none; color: var(--text-dim); padding: .6rem 1rem;
  font-size: .9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.sub-tab:hover { color: var(--text); }
.sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.sub-panel { display: none; }
.sub-panel.active { display: block; }

main { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.panel { display: none; }
.panel.active { display: block; }

.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem;
}
.panel-header h2 { font-size: 1.3rem; }

.btn {
  background: var(--surface2); border: none; color: var(--text);
  padding: .5rem 1.1rem; border-radius: var(--radius);
  cursor: pointer; font-size: .85rem; transition: .2s;
}
.btn:hover { filter: brightness(1.15); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { background: var(--danger); color: #fff; }

/* Stats bar */
.stats-bar {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.stat-chip {
  background: var(--surface); border-radius: 999px;
  padding: .3rem .8rem; font-size: .75rem; color: var(--text-dim);
  display: flex; align-items: center; gap: .3rem;
}
.stat-chip strong { color: var(--text); }

/* Search */
.search-bar { margin-bottom: .75rem; }
.search-bar input {
  width: 100%; max-width: 320px; padding: .45rem .8rem;
  background: var(--surface); border: 1px solid var(--surface2);
  border-radius: 999px; color: var(--text); font-size: .85rem;
}
.search-bar input:focus { outline: none; border-color: var(--accent); }
.search-bar input::placeholder { color: var(--text-dim); }

.filter-bar { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter {
  background: var(--surface); border: none; color: var(--text-dim);
  padding: .35rem .9rem; border-radius: 999px; font-size: .8rem;
  cursor: pointer; transition: .2s;
}
.filter:hover { color: var(--text); }
.filter.active { background: var(--accent); color: #fff; }
.laundry-filter { background:var(--surface);border:1px solid var(--surface2);color:var(--text-dim);padding:.35rem .8rem;border-radius:999px;cursor:pointer; }
.laundry-filter.active { border-color:var(--accent);color:var(--text); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.grid.small {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .6rem;
}

/* Card */
.card {
  background: var(--surface); border-radius: var(--radius);
  overflow: hidden; position: relative; transition: .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--surface2); color: transparent;
}
.card .placeholder-thumb {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center;
  justify-content: center; font-size: 2.5rem; background: var(--surface2);
}
.card .info { padding: .6rem .75rem; display: flex; align-items: center; gap: .4rem; }
.card .info .info-text { flex: 1; min-width: 0; }
.card .info h4 { font-size: .85rem; margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .info span { font-size: .72rem; color: var(--text-dim); text-transform: capitalize; }
.status-badge { display:inline-flex!important;padding:.1rem .4rem;border-radius:999px;margin-top:.25rem;background:var(--surface2); }
.status-badge.clean { color:var(--success)!important; }.status-badge.worn { color:var(--wash)!important; }.status-badge.washing { color:#74c0fc!important; }
.card-actions { display:flex;gap:.25rem;padding:0 .6rem .6rem;flex-wrap:wrap; }
.card-actions .btn { padding:.25rem .5rem;font-size:.7rem; }
.card .color-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
}
.card .delete-btn {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.55); border: none; color: var(--danger);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: .85rem; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: .2s;
}
.card:hover .delete-btn { opacity: 1; }
.card .edit-btn {
  position: absolute; top: 6px; right: 36px;
  background: rgba(0,0,0,.55); border: none; color: var(--accent);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: .85rem; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: .2s;
}
.card:hover .edit-btn { opacity: 1; }
.card.selectable { cursor: pointer; border: 2px solid transparent; }
.card.selectable.selected { border-color: var(--accent); }

/* Fit Stack */
.fit-card {
  background: var(--surface); border-radius: var(--radius);
  overflow: hidden; position: relative; transition: .2s;
}
.fit-card:hover { box-shadow: var(--shadow); }
.fit-card .fit-header {
  padding: .6rem .75rem .3rem; font-size: .9rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fit-stack {
  display: flex; flex-direction: column; align-items: center;
  padding: .25rem .75rem .5rem; gap: 0;
}

.fit-slot { width: 100%; position: relative; overflow: hidden; }
.fit-slot img { width: 100%; display: block; object-fit: cover; color: transparent; }
.fit-slot .fit-emoji {
  width: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 2rem; background: var(--surface2);
}

.fit-slot.cat-outerwear { aspect-ratio: 1/1; border-radius: 10px 10px 0 0; background: var(--surface2); }
.fit-slot.cat-outerwear img { aspect-ratio: 1/1; }
.fit-slot.cat-outerwear .fit-emoji { aspect-ratio: 1/1; }

.fit-slot.cat-top { aspect-ratio: 1/1; border-radius: 10px 10px 4px 4px; background: var(--surface2); margin-top: -2px; }
.fit-slot.cat-top img { aspect-ratio: 1/1; }
.fit-slot.cat-top .fit-emoji { aspect-ratio: 1/1; }

.fit-slot.cat-bottom { aspect-ratio: 1/1.15; border-radius: 4px; background: var(--surface2); margin-top: -2px; }
.fit-slot.cat-bottom img { aspect-ratio: 1/1.15; }
.fit-slot.cat-bottom .fit-emoji { aspect-ratio: 1/1.15; }

.fit-slot.cat-shoes { aspect-ratio: 2/1; border-radius: 4px 4px 10px 10px; background: var(--surface2); margin-top: -2px; }
.fit-slot.cat-shoes img { aspect-ratio: 2/1; }
.fit-slot.cat-shoes .fit-emoji { aspect-ratio: 2/1; }

.fit-slot.cat-accessory { aspect-ratio: 3/1; border-radius: 6px; background: var(--surface2); margin-top: 4px; }
.fit-slot.cat-accessory img { aspect-ratio: 3/1; }
.fit-slot.cat-accessory .fit-emoji { aspect-ratio: 3/1; }

.fit-slot .fit-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff; font-size: .65rem; padding: 10px 6px 4px; text-align: center;
}

.fit-card .fit-actions { padding: .4rem .75rem .6rem; display: flex; gap: .4rem; }

/* Outfits Grid */
.outfits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Rotation */
.rotation-week {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; padding: 1rem 0;
}

.day-card {
  background: var(--surface); border-radius: var(--radius);
  overflow: hidden; transition: .25s; border: 2px solid transparent;
  cursor: pointer;
}
.day-card:hover {
  box-shadow: 0 6px 24px rgba(108,99,255,.2);
  border-color: var(--accent); transform: translateY(-2px);
}

.day-card.is-today { border-color: var(--today); box-shadow: 0 0 20px rgba(255,212,59,.2); }
.day-card.is-today .day-header { background: var(--today); color: #0f1117; }
.day-card.is-today .today-badge { display: inline-block; }

.day-card .day-header {
  padding: .7rem .9rem .4rem; font-size: .82rem; color: var(--accent);
  text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}

.today-badge {
  display: none; background: #0f1117; color: var(--today);
  font-size: .6rem; padding: .15rem .5rem; border-radius: 999px;
  font-weight: 700; letter-spacing: .5px;
}

.day-card .day-date {
  text-align: left; font-size: .7rem; color: var(--text-dim); padding: 0 .9rem .3rem;
}

.day-card .day-body { padding: .4rem .6rem .6rem; }

.day-card .outfit-label {
  font-size: .72rem; color: var(--text-dim); text-align: center; padding: .2rem 0 .4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.day-card .swap-hint {
  font-size: .6rem; color: var(--text-dim); text-align: center;
  padding: .2rem 0 .4rem; opacity: 0; transition: .2s;
}
.day-card:hover .swap-hint { opacity: 1; }

/* Wash day separator */
.wash-separator {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .6rem;
  padding: .3rem 0;
}
.wash-separator .wash-line {
  flex: 1; height: 2px;
  background: repeating-linear-gradient(90deg, var(--wash) 0, var(--wash) 6px, transparent 6px, transparent 12px);
}
.wash-separator .wash-label {
  font-size: .7rem; color: var(--wash); font-weight: 600;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .5px;
}

.rotation-controls {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.rotation-controls label {
  font-size: .85rem; display: flex; align-items: center; gap: .3rem;
}
.rotation-controls select,
.rotation-controls input[type="number"] {
  background: var(--surface); border: 1px solid var(--surface2);
  color: var(--text); padding: .3rem .5rem; border-radius: 8px;
}

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1rem;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.5rem; width: 100%; max-width: 420px;
  max-height: 85vh; overflow-y: auto;
}
.modal-content.wide { max-width: 620px; }
.modal-content h3 { margin-bottom: 1rem; }
.modal-content label {
  display: block; font-size: .85rem; color: var(--text-dim); margin-bottom: .75rem;
}
.modal-content input[type="text"],
.modal-content input[type="date"],
.modal-content input[type="number"],
.modal-content select {
  width: 100%; padding: .5rem .7rem; margin-top: .25rem;
  background: var(--surface2); border: 1px solid transparent;
  border-radius: 8px; color: var(--text); font-size: .9rem;
}
.modal-content input[type="text"]:focus,
.modal-content select:focus { outline: none; border-color: var(--accent); }
.modal-content input[type="file"] { margin-top: .3rem; font-size: .8rem; color: var(--text-dim); }
.form-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.helper { font-size: .82rem; color: var(--text-dim); margin-bottom: .5rem; }

.empty-msg {
  text-align: center; color: var(--text-dim); padding: 3rem 1rem; font-size: .95rem;
}

/* Rotation summary bar */
.rotation-summary { display: flex; gap: .6rem; padding: .5rem 0 .5rem; flex-wrap: wrap; }
.rotation-summary .summary-chip {
  background: var(--surface); border-radius: 999px;
  padding: .4rem .9rem; font-size: .78rem; color: var(--text-dim);
  display: flex; align-items: center; gap: .3rem;
}
.rotation-summary .summary-chip strong { color: var(--text); }

/* Toast */
#toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 200;
  display: flex; flex-direction: column; gap: .5rem;
}
.toast {
  background: var(--surface2); color: var(--text); padding: .6rem 1.2rem;
  border-radius: var(--radius); font-size: .85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
  border-left: 3px solid var(--accent);
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(30px); } }

/* Travel */
.trip-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.2rem; margin-bottom: 1rem; transition: .2s;
}
.trip-card:hover { box-shadow: var(--shadow); }
.trip-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.trip-header h3 { font-size: 1.1rem; margin: 0; }
.trip-header .trip-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.trip-meta { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-dim); margin-bottom: .75rem; }
.trip-meta span { display: flex; align-items: center; gap: .25rem; }
.trip-notes { font-size: .82rem; color: var(--text-dim); margin-bottom: .75rem; font-style: italic; }

.pack-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.pack-header h4 { font-size: .9rem; color: var(--text); }

.weight-bar {
  background: var(--surface2); border-radius: 999px; height: 8px;
  margin-bottom: .75rem; overflow: hidden; position: relative;
}
.weight-bar-fill {
  height: 100%; border-radius: 999px; transition: width .3s;
  background: linear-gradient(90deg, var(--success), var(--accent));
}
.weight-bar-fill.heavy { background: linear-gradient(90deg, var(--wash), var(--danger)); }

.weight-summary {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; font-size: .78rem;
}
.weight-chip {
  background: var(--surface2); border-radius: 999px; padding: .25rem .7rem;
  color: var(--text-dim); display: flex; align-items: center; gap: .25rem;
}
.weight-chip strong { color: var(--text); }

.pack-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pack-table th {
  text-align: left; padding: .4rem .5rem; color: var(--text-dim);
  border-bottom: 1px solid var(--surface2); font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.pack-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--surface2); }
.pack-table tr:last-child td { border-bottom: none; }
.pack-table .pack-cat {
  font-size: .7rem; background: var(--surface2); padding: .15rem .5rem;
  border-radius: 999px; color: var(--text-dim); display: inline-block;
}
.pack-table .pack-checked { text-decoration: line-through; opacity: .5; }
.pack-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.pack-del {
  background: none; border: none; color: var(--danger); cursor: pointer;
  font-size: .8rem; opacity: .5; transition: .2s;
}
.pack-del:hover { opacity: 1; }
.trip-outfit-planner { border-top:1px solid var(--surface2);margin-top:1rem;padding-top:1rem; }
.trip-day-row { display:grid;grid-template-columns:110px minmax(160px,1fr) auto;gap:.5rem;align-items:center;padding:.4rem 0; }
.trip-day-row select { width:100%;background:var(--surface2);border:1px solid transparent;color:var(--text);padding:.45rem;border-radius:8px; }
.packing-source { font-size:.65rem;color:var(--text-dim);display:block; }
.suggestion-list { display:grid;gap:.4rem;margin:.75rem 0; }
.suggestion-list label { display:flex;gap:.5rem;align-items:flex-start;background:var(--surface2);padding:.55rem;border-radius:8px; }
.settings-card { max-width:700px; }
.file-btn { display:inline-flex;align-items:center; }.file-btn input { display:none; }
.backup-status { color:var(--text-dim);font-size:.85rem;margin-top:1rem;white-space:pre-line; }
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--today);outline-offset:2px; }

@media (max-width: 600px) {
  header h1 { font-size: 1.4rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .rotation-week { grid-template-columns: 1fr; }
  .outfits-grid { grid-template-columns: 1fr 1fr; }
  .day-card .day-header { font-size: .78rem; }
  .panel-header { flex-direction: column; align-items: flex-start; }
  .rotation-controls { width: 100%; }
  .search-bar input { max-width: 100%; }
  .trip-day-row { grid-template-columns:1fr; }
  .pack-table-wrap { overflow-x:auto; }
}

@media (hover:none) { .card .delete-btn,.card .edit-btn { opacity:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important; } }

/* Korea Command Center styles */
.kr-tabs { display:flex; gap:.4rem; border-bottom:2px solid var(--surface2); margin-bottom:1rem; overflow-x:auto; }
.kr-tab { background:none;border:none;color:var(--text-dim);padding:.6rem 1rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap; }
.kr-tab.active { color:var(--accent);border-bottom-color:var(--accent);font-weight:bold; }
.kr-timeline { position:relative; padding-left:1.5rem; margin-top:1rem; }
.kr-day { position:relative; padding-bottom:1.5rem; }
.kr-day-line { position:absolute; left:-1.5rem; top:1.2rem; bottom:-.2rem; width:2px; background:var(--surface2); z-index:1; }
.kr-day:last-child .kr-day-line { display:none; }
.kr-day-dot { position:absolute; left:-1.8rem; top:.4rem; width:12px; height:12px; border-radius:50%; background:var(--surface2); border:2px solid var(--bg); z-index:2; }
.kr-day-card { background:var(--surface); border-radius:var(--radius); border:1px solid transparent; transition:.2s; overflow:hidden; }
.kr-day-card:hover { border-color:var(--city-color); }
.kr-day-today .kr-day-card { border-color:var(--city-color); box-shadow:0 0 15px rgba(0,0,0,.3); }
.kr-day-today .kr-day-dot { transform:scale(1.3); box-shadow:0 0 10px var(--city-color); }
.kr-day-head { padding:.8rem 1rem; display:flex; align-items:center; gap:1rem; cursor:pointer; }
.kr-day-num { font-size:.7rem; font-weight:bold; text-transform:uppercase; color:var(--city-color); }
.kr-day-info { flex:1; }
.kr-day-title { font-size:.95rem; font-weight:bold; margin-bottom:.2rem; }
.kr-day-sub { font-size:.75rem; color:var(--text-dim); display:flex; align-items:center; gap:.4rem; }
.kr-city-tag { color:#fff; padding:.1rem .4rem; border-radius:4px; font-size:.65rem; font-weight:bold; }
.kr-day-chevron { font-size:.7rem; color:var(--text-dim); transition:.2s; }
.kr-day-card.expanded .kr-day-chevron { transform:rotate(180deg); }
.kr-day-detail { padding:0 1rem 1rem; font-size:.85rem; border-top:1px solid var(--surface2); margin-top:.5rem; padding-top:.8rem; }
.kr-detail-section { display:flex; gap:.6rem; margin-bottom:.8rem; }
.kr-detail-icon { width:20px; text-align:center; flex-shrink:0; opacity:.7; }
.kr-act-list { margin:0; padding-left:1.2rem; margin-top:.2rem; color:var(--text-dim); }
.kr-act-list li { margin-bottom:.1rem; }
.kr-dim { color:var(--text-dim); font-size:.75rem; }

.kr-budget-summary { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.kr-budget-box { background:var(--surface); padding:1rem; border-radius:var(--radius); flex:1; min-width:140px; }
.kr-budget-label { font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin-bottom:.3rem; }
.kr-budget-val { font-size:1.2rem; font-weight:bold; color:var(--accent); }
.kr-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.kr-table th { text-align:left; padding:.5rem; border-bottom:1px solid var(--surface2); color:var(--text-dim); }
.kr-table td { padding:.6rem .5rem; border-bottom:1px solid var(--surface2); }
.kr-money { text-align:right; font-family:monospace; }
.kr-cat-total td { background:rgba(0,0,0,.2); font-weight:bold; }

.kr-progress-bar { height:6px; background:var(--surface2); border-radius:999px; overflow:hidden; margin-bottom:1rem; }
.kr-progress-fill { height:100%; background:var(--accent); transition:width .3s; }
.kr-complete { background:var(--success); }
.kr-purchased td { opacity:.5; text-decoration:line-through; }