:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-soft:#f1f5f9;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#dbe3ee;
  --brand:#0f766e;
  --brand-strong:#115e59;
  --danger:#b91c1c;
  --radius:14px;
}

body.dark{
  --bg:#111827;
  --surface:#182236;
  --surface-soft:#202b41;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --line:#2f3a51;
  --brand:#14b8a6;
  --brand-strong:#0d9488;
  --danger:#fca5a5;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 90%, #ffffff 10%));
  color:var(--ink);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}

.app{max-width:none;margin:0;padding:20px 16px 24px}
.header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
h1{font-size:24px;line-height:1.1;margin:0;letter-spacing:.2px}
.sub{color:var(--muted);font-size:14px;max-width:72ch;margin-top:6px}

.toggle{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 12px;cursor:pointer}
.toggle input{appearance:none;width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;outline:none}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--brand);transition:transform .18s ease}
.toggle input:checked::after{transform:translateX(14px)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.controls-card{margin-bottom:12px}
.preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.preset-btn{border:1px solid var(--line);background:var(--surface-soft);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600}
.preset-btn:hover{background:color-mix(in srgb,var(--surface-soft) 75%, var(--brand) 25%)}

.toolbar{display:grid;grid-template-columns:minmax(0,1fr) 120px 120px;gap:8px;align-items:center;width:100%}
.toolbar input[type="text"],
.toolbar input[type="number"],
.toolbar input[type="time"],
.map-toolbar input,
.map-toolbar select,
.activity-card input[type="text"],
.activity-card input[type="number"],
.activity-card input[type="time"]{
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 11px;
  background:var(--surface);
  color:var(--ink);
}
.toolbar input[type="number"], .activity-card .col-minutes input[type="number"]{text-align:center}

.btn{border:0;background:var(--brand);color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700}
.btn:hover{background:var(--brand-strong)}
.map-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.table-wrap{margin-top:10px}
.list-head{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 110px 160px 80px;
  gap:10px;
  padding:0 44px 8px 44px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.schedule-list{display:flex;flex-direction:column;gap:10px}
.activity-card{
  display:grid;
  grid-template-columns:32px minmax(280px,1fr) 110px 160px 80px 40px;
  grid-template-areas:"handle activity minutes start fixed delete";
  gap:10px;
  align-items:center;
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}
.activity-card > div{min-width:0}
.card-handle{grid-area:handle}
.card-activity{grid-area:activity}
.card-minutes{grid-area:minutes}
.card-start{grid-area:start}
.card-fixed{grid-area:fixed;display:flex;align-items:center;justify-content:center}
.card-delete{grid-area:delete;display:flex;justify-content:center}
.activity-card.end-row{
  background:color-mix(in srgb,var(--surface-soft) 78%, var(--brand) 22%);
}
.start{white-space:nowrap;text-align:center;color:var(--muted);font-weight:600}

.handle{cursor:grab;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--muted)}
.handle svg{width:16px;height:16px;display:block}
.activity-card.dragging{opacity:.55}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.icon-btn:hover{background:var(--surface-soft)}
.trash svg{width:17px;height:17px}

.section-title{margin:0 0 10px;font-size:16px;letter-spacing:.2px}
.map-card{margin-top:12px}
.map-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 120px 120px 100px;gap:8px;align-items:center}
.map-frame{width:100%;height:300px;border:1px solid var(--line);border-radius:10px;margin-top:10px;background:var(--surface-soft)}

.muted{color:var(--muted);font-size:12px}
.validation{min-height:1.2em;color:var(--danger);font-size:13px;margin-top:8px}
.input-error{border-color:var(--danger)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--danger) 42%, transparent)}

@media (max-width: 860px){
  .app{padding:14px 12px 18px}
  .header{display:block}
  .toggle{margin-top:10px}
  .toolbar{grid-template-columns:minmax(0,1fr) 104px 104px}
  .map-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 120px}
  #mapUpdateBtn,#mapOpenLink{width:100%}
  .list-head{display:none}
  .activity-card{
    grid-template-columns:32px minmax(0,1fr) 94px 130px 72px 36px;
    grid-template-areas:"handle activity minutes start fixed delete";
    gap:8px;
  }
}

@media (max-width: 700px){
  .app{padding:12px 10px 16px}
  h1{font-size:21px}
  .sub{font-size:13px}

  .card{padding:10px;border-radius:12px}
  .preset-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .preset-btn,.btn,.map-link{min-height:44px}

  .toolbar{grid-template-columns:minmax(0,1fr) 96px}
  #customName{grid-column:1 / -1}
  #addBtn{grid-column:1 / -1}

  .table-wrap{border:0;padding:0;background:transparent}
  .activity-card{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "activity activity activity"
      "minutes minutes minutes"
      "start start start"
      "handle fixed delete";
    gap:8px;
  }
  .start{text-align:left}
  .card-fixed,.card-delete{justify-content:flex-end}
  .card-activity::before,.card-minutes::before,.card-start::before{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--muted);
    margin:0 0 4px;
    text-transform:uppercase;
  }
  .card-activity::before{content:"Activity"}
  .card-minutes::before{content:"Minutes"}
  .card-start::before{content:"Start Time"}

  .map-toolbar{grid-template-columns:1fr 1fr;gap:8px}
  #mapFrom,#mapTo{grid-column:1 / -1}
  #mapMode{grid-column:1 / span 1}
  #mapUpdateBtn{grid-column:2 / span 1}
  #mapOpenLink{grid-column:1 / -1}
  .map-frame{height:220px}
}