:root {
  color-scheme: dark;
  --bg: #111114;
  --panel: #1c1c21;
  --panel-2: #25252c;
  --border: #34343d;
  --text: #f4f1f7;
  --muted: #9995a5;
  --purple: #d946ef;
  --purple-dark: #54205e;
  --violet: #8b5cf6;
  --radius: 18px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.app { width: min(100%, 780px); margin: 0 auto; padding: 20px 14px 36px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin: 5px 2px 20px; }
.eyebrow { font-size:10px; letter-spacing:2px; color:var(--purple); font-weight:800; }
h1 { font-size:25px; margin:5px 0 0; letter-spacing:-.7px; }
.avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:15px; background:#392044; color:#f0abfa; font-weight:800; }
.panel { background:var(--panel); border:1px solid #2b2b32; border-radius:var(--radius); padding:17px; margin-bottom:14px; }
.section-title { color:var(--muted); font-size:12px; font-weight:700; margin-bottom:10px; }
.city-line { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.city-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.city-info strong { font-size:16px; overflow-wrap:anywhere; }
.city-info span, .muted { color:var(--muted); font-size:12px; }
button.secondary { background:var(--panel-2); border:1px solid var(--border); border-radius:11px; color:var(--text); padding:10px 11px; font-size:12px; flex-shrink:0; }
.manual-row { display:flex; gap:8px; margin-top:11px; }
input, select { width:100%; min-width:0; background:#141418; border:1px solid var(--border); color:var(--text); border-radius:11px; padding:12px; outline:none; }
input:focus, select:focus { border-color:var(--purple); }
.manual-row button { width:46px; flex-shrink:0; background:#48204f; border:1px solid #6b2c78; color:#f5c5fc; border-radius:11px; font-size:20px; }
.client-heading { margin-top:20px; }
#clientInfo { margin-top:9px; }
.calendar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:19px; }
.calendar-head h2 { text-align:center; font-size:19px; margin:0; }
.calendar-head p { color:var(--muted); text-align:center; font-size:11px; margin:5px 0 0; }
.nav-btn { width:38px; height:38px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); color:white; font-size:27px; line-height:1; }
.weekdays, .calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.weekdays { margin-bottom:7px; }
.weekdays span { text-align:center; color:var(--muted); font-size:10px; font-weight:800; padding:4px 0; }
.day { min-height:73px; border:1px solid #303038; background:#202026; border-radius:10px; padding:6px 4px; text-align:left; overflow:hidden; color:var(--text); }
.day.empty { background:transparent; border-color:transparent; }
.day.selected { border-color:var(--purple); background:#302034; box-shadow:inset 0 0 0 1px #a331b4; }
.day.today .day-number { color:#f0abfa; }
.day-number { font-size:12px; font-weight:700; display:block; margin-bottom:6px; }
.event-chip { display:block; border-radius:6px; padding:3px 4px; margin-top:3px; font-size:9px; line-height:1.25; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.event-chip.mine { background:#54205e; color:#f3a7ff; }
.event-chip.client { background:#453075; color:#d6c7ff; }
.legend { display:flex; flex-wrap:wrap; gap:15px; padding-top:14px; color:var(--muted); font-size:11px; }
.legend span { display:flex; align-items:center; gap:6px; }
.dot { width:8px; height:8px; border-radius:3px; display:inline-block; }
.dot.mine { background:var(--purple); } .dot.client { background:var(--violet); }
.event-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.event-title-row h2 { margin:0 0 14px; font-size:18px; }
.date-badge { color:#e9b3f4; background:#38203e; border-radius:20px; padding:6px 9px; font-size:10px; white-space:nowrap; }
.events-list { display:flex; flex-direction:column; gap:8px; margin-bottom:15px; }
.event-card { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:11px; border-radius:12px; background:#25232b; border-left:3px solid var(--purple); }
.event-card strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.event-card span { display:block; color:var(--muted); font-size:11px; margin-top:4px; line-height:1.45; }
.delete-event { border:0; background:transparent; color:#b6aebb; font-size:18px; padding:5px; }
.empty-state { color:var(--muted); font-size:12px; padding:8px 0 14px; }
.event-form { border-top:1px solid var(--border); padding-top:15px; }
label { display:block; font-size:11px; color:var(--muted); margin:0 0 7px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.primary { width:100%; margin-top:14px; background:linear-gradient(100deg,#bd32d5,#8047e8); border:0; border-radius:12px; color:white; font-weight:750; padding:13px; }
.hint { font-size:10px; line-height:1.5; color:var(--muted); margin:10px 0 0; }
footer { text-align:center; color:#686572; font-size:10px; padding:8px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#f4e9f7; color:#24152a; padding:11px 15px; border-radius:12px; font-size:12px; transition:.2s; max-width:calc(100% - 30px); z-index:10; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:430px) {
  .app { padding:15px 9px 25px; }
  .panel { padding:13px; border-radius:15px; }
  .day { min-height:64px; padding:5px 3px; }
  .event-chip { font-size:8px; padding:3px 2px; }
  .city-line { align-items:flex-start; flex-direction:column; }
  button.secondary { width:100%; }
}


/* Live timezone preview and daily working-hours status */
.time-preview {
  display:flex; flex-direction:column; gap:5px; margin-top:12px; padding:13px;
  background:linear-gradient(110deg,#302039,#25213a); border:1px solid #573563; border-radius:13px;
}
.preview-caption { color:#d7a2e4; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }
.time-preview strong { font-size:21px; letter-spacing:-.3px; }
.time-preview span { color:#c4b6cf; font-size:11px; line-height:1.45; }
.day-work-info { display:flex; flex-direction:column; gap:8px; margin-bottom:13px; }
.work-status { border-radius:12px; background:#25232b; border:1px solid #37343e; padding:11px 12px; }
.work-status strong { display:block; font-size:12px; margin-bottom:4px; }
.work-status span { display:block; font-size:11px; line-height:1.5; color:var(--muted); white-space:pre-line; }
.work-status.off { border-color:#57402d; background:#2d251f; }
.work-status.holiday { border-color:#633047; background:#321f2a; }
.day-status { display:block; color:#c5b4ce; font-size:8px; line-height:1.2; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day-status.off { color:#e7b77b; }
.day-status.holiday { color:#f19cbb; }

/* Live conversion and per-day work status */
.time-preview { margin-top:12px; padding:12px; background:#17151c; border:1px solid #3d2a45; border-radius:12px; }
.preview-label { color:#d9a3e5; font-size:11px; font-weight:800; margin-bottom:9px; text-transform:uppercase; letter-spacing:.5px; }
.preview-line { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 0; }
.preview-line span { color:var(--muted); font-size:11px; }
.preview-line strong { font-size:14px; text-align:right; }
#previewClientTime { color:#c4b5fd; }
#previewNote { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.work-status { display:flex; flex-direction:column; gap:7px; margin:0 0 13px; }
.work-status-item { padding:10px 11px; border-radius:11px; background:#24232a; border-left:3px solid #66616e; }
.work-status-item.open { border-left-color:#48b987; }
.work-status-item.off { border-left-color:#e6a44b; }
.work-status-item.holiday { border-left-color:#d946ef; }
.work-status-item strong { display:block; font-size:12px; margin-bottom:3px; }
.work-status-item span { color:var(--muted); font-size:10px; line-height:1.4; }
.day-status { display:block; margin-top:3px; font-size:7px; line-height:1.1; color:#f0b4fa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.day.weekend { background:#1b1b20; }
.day.holiday-day { border-color:#65356b; }
@media (max-width:430px) { .preview-line strong { font-size:12px; } .day-status { font-size:6px; } }
.day-status.client-day-status { color:#c4b5fd; }
.day-status.open { color:#83d9b0; }
.day-status.client-day-status.open { color:#c4b5fd; }
.day-status.client-day-status.off { color:#e7b77b; }
.day-status.client-day-status.holiday { color:#f19cbb; }