/* ============================================================================
   VelvetOS — media & utility application styles
   (Camera, Paint, Photos, Music, Calendar, Clock, Tasks, Notes, Store,
    Weather, Task Manager, Explore, Syslog, Viewer)
   ========================================================================== */

/* ============================== CAMERA ================================== */
.app-camera { background: #0d0e11; color: #e8eaed; }
.cam-stage {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cam-stage video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-stage.mirror video { transform: scaleX(-1); }
.cam-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  text-align: center; color: #9aa0a6; padding: var(--sp-6); max-width: 420px;
}
.cam-placeholder .icon { width: 56px; height: 56px; opacity: .6; }
.cam-bar {
  flex: none; display: flex; align-items: center; justify-content: center; gap: var(--sp-6);
  padding: var(--sp-4); background: rgba(0,0,0,.4);
}
.cam-shutter {
  width: 62px; height: 62px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.24);
  cursor: pointer; transition: transform var(--dur-s), background var(--dur-s);
}
.cam-shutter:hover { background: rgba(255,255,255,.4); }
.cam-shutter:active { transform: scale(.92); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.fire { animation: cam-flash 380ms var(--ease-standard); }
@keyframes cam-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.cam-timer-badge {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(0,0,0,.5); font-size: var(--fs-caption); display: flex; align-items: center; gap: 6px;
}

/* ============================== PAINT =================================== */
.app-paint { background: var(--surface-2); }
.paint-canvas-wrap {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); overflow: auto; position: relative;
}
.paint-canvas {
  background: #fff; box-shadow: var(--elevation-3); cursor: crosshair; touch-action: none;
  border-radius: 2px;
}
.paint-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.paint-swatches { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 var(--sp-2); }
.paint-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid var(--surface);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.paint-swatch.selected { box-shadow: 0 0 0 2px var(--primary); }
.paint-colors-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--outline); cursor: pointer;
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); padding: 0;
}

/* ============================== PHOTOS ================================== */
.app-photos { background: var(--window-bg); }
.ph-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-3);
  display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
}
.ph-item {
  position: relative; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; cursor: pointer;
  background: var(--surface-2);
}
.ph-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease-standard); }
.ph-item:hover img { transform: scale(1.05); }
.ph-item .ph-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  font-size: 10px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  opacity: 0; transition: opacity var(--dur-s);
}
.ph-item:hover .ph-name { opacity: 1; }
.ph-group-label { grid-column: 1 / -1; font-size: var(--fs-label); color: var(--on-surface-3); padding: var(--sp-3) 4px 2px; }
.ph-viewer {
  position: absolute; inset: 0; background: #101114; display: flex; flex-direction: column;
  animation: fade-in var(--dur-m) var(--ease-standard); z-index: 4;
}
.ph-viewer-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ph-viewer-stage img { max-width: 100%; max-height: 100%; transition: transform var(--dur-m) var(--ease-standard); }
.ph-viewer-bar {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 12px; background: rgba(0,0,0,.55); color: #fff;
}
.ph-viewer-bar .icon-btn { color: #fff; }
.ph-viewer-bar .icon-btn:hover { background: rgba(255,255,255,.16); }
.ph-viewer-meta { flex: 1 1 auto; min-width: 0; font-size: var(--fs-label); color: #e8eaed; }

/* ============================== MUSIC =================================== */
.app-music { background: var(--window-bg); }
.mu-hero {
  flex: none; padding: var(--sp-6) var(--sp-6) var(--sp-4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  display: flex; gap: var(--sp-5); align-items: center;
}
.mu-art {
  width: 132px; height: 132px; border-radius: var(--r-m); flex: none;
  background: linear-gradient(140deg, var(--accent), #7b1fa2);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: var(--elevation-2); overflow: hidden;
}
.mu-art .icon { width: 56px; height: 56px; }
.mu-meta { min-width: 0; flex: 1 1 auto; }
.mu-title { font-size: var(--fs-title-lg); font-weight: var(--fw-regular); }
.mu-artist { color: var(--on-surface-3); margin-top: 4px; }
.mu-visual {
  height: 56px; display: flex; align-items: flex-end; gap: 2px; margin-top: var(--sp-4);
}
.mu-visual span { flex: 1 1 auto; background: var(--primary); border-radius: 2px 2px 0 0; height: 4px; transition: height 90ms linear; }
.mu-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mu-track {
  display: flex; align-items: center; gap: var(--sp-3); padding: 10px 18px; cursor: pointer;
}
.mu-track:hover { background: var(--surface-2); }
.mu-track.active { background: var(--primary-container); color: var(--on-primary-container); }
.mu-track .mt-num { width: 22px; color: var(--on-surface-4); font-size: var(--fs-label); text-align: right; }
.mu-track .mt-title { flex: 1 1 auto; min-width: 0; }
.mu-track .mt-sub { font-size: var(--fs-caption); color: var(--on-surface-3); }
.mu-track .mt-dur { font-size: var(--fs-caption); color: var(--on-surface-4); }
.mu-controls {
  flex: none; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--divider);
}
.mu-controls .icon-btn.lg .icon { width: 26px; height: 26px; }
.mu-play {
  width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  transition: transform var(--dur-s);
}
.mu-play:hover { transform: scale(1.06); }
.mu-seek { flex: 1 1 auto; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--on-surface-3); }

/* ============================== CALENDAR ================================ */
.app-calendar { background: var(--window-bg); }
.cal-wrap { flex: 1 1 auto; min-height: 0; display: flex; }
.cal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: var(--sp-3); }
.cal-month-head { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-3); }
.cal-month-title { font-size: var(--fs-title); font-weight: var(--fw-medium); }
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--fs-caption); color: var(--on-surface-3); text-align: center; padding-bottom: 6px; }
.cal-cells { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 1px; background: var(--divider); border: 1px solid var(--divider); border-radius: var(--r-s); overflow: hidden; }
.cal-cell {
  background: var(--window-bg); padding: 4px 6px; cursor: pointer; overflow: hidden; min-height: 62px;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.other { background: var(--surface-1); color: var(--on-surface-4); }
.cal-cell.today .cc-daynum { background: var(--primary); color: var(--on-primary); }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--primary); }
.cc-daynum {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-label); flex: none;
}
.cc-event {
  font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--primary-container);
  color: var(--on-primary-container); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-side { width: 260px; border-left: 1px solid var(--divider); padding: var(--sp-3); overflow-y: auto; }
.cal-side-day { font-size: var(--fs-body); font-weight: var(--fw-medium); margin-bottom: var(--sp-3); }
.cal-ev-item {
  display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; cursor: pointer;
}
.cal-ev-item .cei-bar { width: 3px; border-radius: 2px; background: var(--primary); flex: none; }
.cal-ev-item .cei-title { font-size: var(--fs-label); }
.cal-ev-item .cei-time { font-size: var(--fs-caption); color: var(--on-surface-3); }

/* ============================== CLOCK =================================== */
.app-clock { background: var(--window-bg); }
.clock-tabs { padding: 0 var(--sp-3); }
/* the face takes the height it needs (so it is never clipped) and can shrink if
   the area is really tight; the world-clock list below it keeps the rest */
.clock-face-wrap { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-5); overflow: hidden; }
.clock-digital { font-family: var(--font-display); font-size: 76px; font-weight: var(--fw-regular); letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.clock-digital .cd-sec { font-size: 34px; color: var(--primary); }
.clock-date { font-size: var(--fs-title); color: var(--on-surface-3); margin-top: -6px; }
.clock-analog {
  position: relative;
  /* flex: none + aspect-ratio keep the face a true circle — as a flex item it
     used to be squashed vertically into an ellipse in short windows. The size
     itself is measured in js/apps/clock.js so it always fits the window. */
  flex: none;
  width: 190px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  border: 2px solid var(--outline);
  background: radial-gradient(circle at 50% 42%, var(--surface-2), var(--surface) 72%);
}
/* twelve hour marks, drawn with a repeating conic gradient and masked to a ring */
.clock-analog::before {
  content: '';
  position: absolute; inset: 7px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -0.6deg,
    var(--on-surface-3) 0 1.2deg, transparent 1.2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 80%, #000 81%);
  mask: radial-gradient(circle, transparent 0 80%, #000 81%);
  opacity: .5;
  pointer-events: none;
}
.clock-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; background: var(--on-surface); border-radius: 2px; }
.ch-h { width: 4px; height: 52px; margin-left: -2px; }
.ch-m { width: 3px; height: 72px; margin-left: -1.5px; }
.ch-s { width: 1.5px; height: 80px; margin-left: -.75px; background: var(--primary); }
.clock-pin { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--primary); }
.timer-ring { position: relative; width: 210px; max-width: 100%; aspect-ratio: 1 / 1; flex: none; }
.timer-ring svg { transform: rotate(-90deg); }
.timer-ring .tr-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 42px; font-variant-numeric: tabular-nums;
}
.timer-ring .tr-sub { font-size: var(--fs-caption); color: var(--on-surface-3); font-family: var(--font-ui); }
/* a small flex-basis means this list takes its room from the face last: with
   `auto` it used its whole content height as a base and squeezed the clock
   face, which then overflowed its wrapper and was clipped */
.clock-world-list { flex: 1 1 72px; min-height: 72px; overflow-y: auto; padding: var(--sp-3); }
/* short windows: give the face more of the area it shares with the world clocks */
@media (max-height: 560px) {
  .clock-face-wrap { padding: var(--sp-3); gap: var(--sp-3); }
  .clock-digital { font-size: 46px; }
  .clock-digital .cd-sec { font-size: 24px; }
}
.world-clock {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--divider);
}
.world-clock .wc-label { flex: 1 1 auto; }
.world-clock .wc-offset { font-size: var(--fs-caption); color: var(--on-surface-3); }
.world-clock .wc-time { font-family: var(--font-display); font-size: 30px; font-variant-numeric: tabular-nums; }

/* ============================== TASKS / NOTES =========================== */
.app-tasks { background: var(--window-bg); }
.task-add-row { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.task-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 10px 14px; border-radius: var(--r-m); cursor: pointer;
}
.task-item:hover { background: var(--surface-2); }
.task-item .ti-check {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--on-surface-4);
  flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center;
}
.task-item .ti-check .icon { width: 12px; height: 12px; color: #fff; opacity: 0; }
.task-item.done .ti-check { background: var(--primary); border-color: var(--primary); }
.task-item.done .ti-check .icon { opacity: 1; }
.task-item.done .ti-title { text-decoration: line-through; color: var(--on-surface-4); }
.task-item .ti-title { font-size: var(--fs-body); flex: 1 1 auto; min-width: 0; }
.task-item .ti-sub { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 2px; }
.notes-list { width: 260px; border-right: 1px solid var(--divider); overflow-y: auto; padding: var(--sp-2); background: var(--surface-1); }
.note-item { padding: 10px 12px; border-radius: var(--r-m); cursor: pointer; margin-bottom: 2px; }
.note-item:hover { background: var(--surface-3); }
.note-item.active { background: var(--primary-container); color: var(--on-primary-container); }
.note-item .ni-title { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.note-item .ni-prev { font-size: var(--fs-caption); color: var(--on-surface-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item.active .ni-prev { color: color-mix(in srgb, var(--on-primary-container) 70%, transparent); }
.note-edit { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.note-title-input {
  border: 0; background: transparent; outline: none; padding: var(--sp-4) var(--sp-5) var(--sp-2);
  font-size: var(--fs-title-lg); font-weight: var(--fw-regular); color: var(--on-surface);
}
.note-body-area {
  flex: 1 1 auto; border: 0; background: transparent; outline: none; resize: none;
  padding: var(--sp-2) var(--sp-5) var(--sp-5); font-size: 14px; line-height: 1.7;
  color: var(--on-surface-2); font-family: var(--font-ui);
}

/* ============================== STORE =================================== */
.app-store { background: var(--window-bg); }
.store-hero {
  flex: none; padding: var(--sp-6); border-radius: var(--r-l); margin: var(--sp-4);
  background: linear-gradient(120deg, var(--primary-container), color-mix(in srgb, var(--accent) 12%, transparent));
}
.store-hero .sh-title { font-family: var(--font-display); font-size: var(--fs-headline); font-weight: var(--fw-regular); }
.store-hero .sh-sub { color: var(--on-surface-3); margin-top: var(--sp-2); max-width: 520px; }
.store-grid {
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  padding: 0 var(--sp-4) var(--sp-6);
}
.store-card {
  display: flex; gap: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--outline-variant); border-radius: var(--r-l); background: var(--surface);
  transition: box-shadow var(--dur-m) var(--ease-standard);
}
.store-card:hover { box-shadow: var(--elevation-2); }
.store-card .sc-icon { width: 54px; height: 54px; border-radius: 14px; flex: none; }
.store-card .sc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store-card .sc-name { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.store-card .sc-dev { font-size: var(--fs-caption); color: var(--on-surface-3); }
.store-card .sc-desc { font-size: var(--fs-label); color: var(--on-surface-3); margin: 4px 0 8px; line-height: 1.45; }
.store-card .sc-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; }
.store-card .sc-stars { font-size: 10px; color: var(--on-surface-4); }

/* ============================== WEATHER ================================= */
.app-weather { background: var(--window-bg); }
.weather-hero {
  flex: none; padding: var(--sp-8) var(--sp-6);
  background: linear-gradient(160deg, #2b5876, #4e4376);
  color: #fff; text-align: center;
}
.weather-hero.night { background: linear-gradient(160deg, #141e30, #243b55); }
.weather-city { font-size: var(--fs-title); opacity: .9; }
.weather-temp { font-family: var(--font-display); font-size: 72px; line-height: 1; margin: var(--sp-3) 0; }
.weather-cond { font-size: var(--fs-title); opacity: .92; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.weather-range { font-size: var(--fs-label); opacity: .8; margin-top: var(--sp-2); }
.weather-alerts { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--warning-container); color: var(--on-surface); font-size: var(--fs-label); align-items: center; }
.weather-hours {
  display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-4);
}
.weather-hour {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-3); border-radius: var(--r-m); background: var(--surface-2); min-width: 66px;
}
.weather-hour .wh-hour { font-size: var(--fs-caption); color: var(--on-surface-3); }
.weather-hour .wh-temp { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.weather-days { padding: 0 var(--sp-4) var(--sp-6); }
.weather-day { display: flex; align-items: center; gap: var(--sp-4); padding: 12px 4px; border-bottom: 1px solid var(--divider); }
.weather-day .wd-name { width: 88px; font-size: var(--fs-body); }
.weather-day .wd-bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--surface-3); position: relative; overflow: hidden; }
.weather-day .wd-bar span { position: absolute; height: 100%; background: linear-gradient(90deg, #64b5f6, #ffb74d); border-radius: 3px; }
.weather-day .wd-temp { width: 74px; text-align: right; font-size: var(--fs-label); color: var(--on-surface-3); }

/* ============================== TASK MANAGER ============================ */
.app-taskmgr { background: var(--window-bg); }
.tm-head, .tm-row {
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 12px; height: 30px; font-size: var(--fs-label);
}
.tm-head { border-bottom: 1px solid var(--divider); color: var(--on-surface-3); position: sticky; top: 0; background: var(--window-bg); z-index: 2; }
.tm-row { border-bottom: 1px solid var(--divider); cursor: default; }
.tm-row:hover { background: var(--surface-2); }
.tm-row.selected { background: var(--primary-container); }
.tm-c { flex: none; width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.tm-c.wide { width: 120px; }
.tm-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.tm-name .app-icon { width: 16px; height: 16px; border-radius: 4px; }
.tm-name .app-icon .icon { width: 10px; height: 10px; }
.tm-mem-bar { width: 60px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.tm-mem-bar > span { display: block; height: 100%; background: var(--primary); }
.tm-summary { flex: none; padding: 10px 14px; border-top: 1px solid var(--divider); font-size: var(--fs-caption); color: var(--on-surface-3); display: flex; gap: var(--sp-6); flex-wrap: wrap; }

/* ============================== EXPLORE / HELP ========================== */
.app-explore { background: var(--window-bg); }
.explore-hero {
  flex: none; padding: var(--sp-8); display: flex; gap: var(--sp-6); align-items: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
}
.explore-hero .eh-title { font-family: var(--font-display); font-size: var(--fs-headline); font-weight: var(--fw-regular); }
.explore-hero .eh-sub { color: var(--on-surface-3); margin-top: var(--sp-2); max-width: 560px; line-height: 1.6; }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); padding: 0 var(--sp-6) var(--sp-6); }
.explore-card {
  padding: var(--sp-4); border: 1px solid var(--outline-variant); border-radius: var(--r-l);
  background: var(--surface); cursor: pointer; transition: box-shadow var(--dur-m), transform var(--dur-m);
}
.explore-card:hover { box-shadow: var(--elevation-2); transform: translateY(-1px); }
.explore-card .ec-icon { color: var(--primary); margin-bottom: var(--sp-3); }
.explore-card .ec-title { font-size: var(--fs-body); font-weight: var(--fw-medium); margin-bottom: 4px; }
.explore-card .ec-desc { font-size: var(--fs-label); color: var(--on-surface-3); line-height: 1.55; }
.kbd-list { display: flex; flex-direction: column; gap: 2px; }
.kbd-row { display: flex; align-items: center; gap: var(--sp-4); padding: 10px 16px; border-radius: var(--r-m); }
.kbd-row:nth-child(odd) { background: var(--surface-1); }
.kbd-row .kr-label { flex: 1 1 auto; font-size: var(--fs-body); }
.kbd-keys { display: flex; gap: 4px; flex: none; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 6px; background: var(--surface-2); border: 1px solid var(--outline);
  border-bottom-width: 2px; font-family: var(--font-ui); font-size: 11px; color: var(--on-surface-2);
}

/* ============================== SYSLOG ================================== */
.app-syslog { background: #16171a; color: #d7dae0; }
.syslog-list {
  flex: 1 1 auto; overflow-y: auto; padding: 8px 0;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
}
.syslog-row { display: flex; gap: 10px; padding: 1px 14px; }
.syslog-row:hover { background: rgba(255,255,255,.05); }
.syslog-time { color: #80868b; flex: none; }
.syslog-level { flex: none; width: 54px; font-weight: var(--fw-medium); }
.syslog-level.info { color: #8ab4f8; }
.syslog-level.warn { color: #fdd663; }
.syslog-level.error { color: #f28b82; }
.syslog-level.debug { color: #81c995; }
.syslog-msg { flex: 1 1 auto; word-break: break-word; }
.app-syslog.light { background: #fbfbfd; color: #202124; }

/* ============================== VIEWER (generic file) =================== */
.app-viewer { background: var(--surface-1); }
.viewer-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.viewer-stage img { max-width: 100%; max-height: 100%; box-shadow: var(--elevation-2); background: #fff; }
.viewer-text {
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: var(--sp-5);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap;
  color: var(--on-surface-2); background: var(--surface); border-top: 1px solid var(--divider);
  user-select: text;
}
.viewer-audio { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-10); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {  .qs { width: min(384px, calc(100vw - 16px)); }
  .set-nav { width: 240px; }
  .app-side { width: 190px; }
  .launcher-panel { max-height: 80vh; }
  .mu-hero { flex-direction: column; text-align: center; }
  .cal-side { display: none; }
}
@media (max-width: 700px), (orientation: portrait) and (max-width: 900px) {
  /* portrait: the panel grows taller instead of wider */
  .qs { width: min(360px, calc(100vw - 12px)); max-height: min(72vh, 640px); }
  .clock-digital { font-size: 58px; }
  .clock-face-wrap { padding: var(--sp-4); gap: var(--sp-4); }
  .mu-hero { padding: var(--sp-4); }
  .tm-body, .todo-body { padding: var(--sp-4); }
}
@media (max-width: 620px) {
  .set-nav { display: none; }
  .app-side { display: none; }
  .calc-history { display: none; }
  .login-time { font-size: 44px; }
}