:root { color-scheme: dark; --bg:#0f1115; --card:#171a21; --card2:#0f1217; --bd:#262b36;
  --tx:#e8eaed; --mut:#9aa3b2; --dim:#6b7280; --acc:#3b82f6;
  --hi:#ef4444; --med:#f59e0b; --low:#64748b; --ok:#22c55e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--tx);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color:inherit; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--bd); position:sticky; top:0; background:var(--bg); z-index:5; }
.topbar h1 { font-size:16px; margin:0; }
.topbar .who { color:var(--mut); font-size:12px; }
.clocks { display:flex; gap:14px; margin-left:auto; }
.clock { text-align:center; min-width:64px; }
.clock .z { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; }
.clock .t { font-size:14px; font-variant-numeric:tabular-nums; }
.logout { color:var(--mut); font-size:12px; text-decoration:none; border:1px solid var(--bd);
  padding:6px 11px; border-radius:8px; }
.logout:hover { color:var(--tx); }

/* ---- launcher-style cell grid (absolute positioning) --------------------- */
.grid { position:relative; padding:0; min-height:200px; }
.grid-init { padding:20px; font-size:13px; }
.w { position:absolute; background:var(--card); border:1px solid var(--bd); border-radius:12px;
  padding:14px 16px; overflow:hidden; display:flex; flex-direction:column;
  transition:left .12s ease, top .12s ease, width .12s ease, height .12s ease; }
.w.dragging { transition:none; opacity:.9; box-shadow:0 12px 30px rgba(0,0,0,.5); cursor:grabbing; }
.w.w-resizing { transition:none; }
/* placeholder pokazujący docelową komórkę podczas drag */
.w-placeholder { position:absolute; border:2px dashed var(--acc); border-radius:12px;
  background:var(--acc)15; z-index:250; pointer-events:none; }
.w h3 { margin:0 0 10px; font-size:13px; display:flex; justify-content:space-between;
  align-items:center; gap:6px; }
.w h3 .w-title { flex:1; }
.w h3 .badge { font-size:11px; color:var(--dim); font-weight:400; white-space:nowrap; }
.w .body { font-size:13px; overflow-y:auto; flex:1 1 auto; min-height:0; }
.muted { color:var(--mut); }
.dim { color:var(--dim); }
.loading { color:var(--dim); font-size:12px; }

.tlist { list-style:none; margin:0; padding:0; }
.tlist li { padding:7px 0; border-top:1px solid var(--bd); display:flex; gap:8px; align-items:baseline; }
.tlist li:first-child { border-top:0; }
.dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; margin-top:5px; }
.dot.High{background:var(--hi);} .dot.Medium{background:var(--med);} .dot.Low{background:var(--low);}
.t-title { flex:1; }
.t-meta { color:var(--dim); font-size:11px; white-space:nowrap; }
.sec-h { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); margin:10px 0 4px; }
.sec-h:first-child { margin-top:0; }

.mailrow,.projrow { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-top:1px solid var(--bd); }
.mailrow:first-child,.projrow:first-child { border-top:0; }
.count { font-variant-numeric:tabular-nums; font-weight:600; }
.count.zero { color:var(--dim); font-weight:400; }
.count.has { color:var(--acc); }

.bar { height:6px; background:var(--card2); border-radius:4px; overflow:hidden; margin-top:4px; }
.bar > i { display:block; height:100%; background:var(--acc); }
.crit { color:var(--dim); font-size:11px; margin-top:3px; }

.big { font-size:30px; font-weight:600; line-height:1.1; }

/* Widget pogody */
.wx-current { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.wx-hourly { display:flex; gap:4px; overflow-x:auto; padding:8px 0; border-top:1px solid var(--bd); scrollbar-width:none; margin-bottom:8px; }
.wx-hourly::-webkit-scrollbar { display:none; }
.wx-hour { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:46px; padding:4px 3px; border-radius:8px; font-size:13px; }
.wx-hour:first-child { background:var(--card2); }
.wx-ht { font-size:10px; color:var(--mut); }
.wx-hv { font-size:12px; font-weight:600; }
.wx-link { font-size:12px; color:var(--acc); text-decoration:none; display:inline-block; }
.wx-link:hover { text-decoration:underline; }
.evrow { padding:6px 0; border-top:1px solid var(--bd); }
.evrow:first-child { border-top:0; }
.evtime { color:var(--acc); font-variant-numeric:tabular-nums; font-size:12px; }

.done { flex:0 0 auto; width:20px; height:20px; border-radius:5px; border:1px solid var(--bd);
  background:var(--card2); color:var(--dim); font-size:11px; cursor:pointer; line-height:1; padding:0; }
.done:hover { border-color:var(--ok); color:var(--ok); }
.done:disabled { opacity:.4; cursor:default; }

.costrow { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--bd); font-size:12px; }
.costrow:first-child { border-top:0; }

[data-wtype="quick"] form { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
[data-wtype="quick"] input { flex:1; padding:8px 10px; border-radius:8px; border:1px solid #2b313d; background:var(--card2); color:var(--tx); font-size:13px; }
[data-wtype="quick"] .msg { font-size:11px; min-width:60px; }
.searchin { width:100%; padding:9px 11px; margin-bottom:10px; border-radius:8px; border:1px solid #2b313d; background:var(--card2); color:var(--tx); font-size:14px; }
.srow { padding:7px 0; border-top:1px solid var(--bd); }
.srow:first-child { border-top:0; }

/* Strona Konta / konektory */
.conn-page { padding:28px 20px; }
#conn-root { width:min(100%,700px); }
.conn-title { font-size:18px; margin:0 0 24px; }
.acc-main { display:flex; flex-direction:column; gap:28px; }
.conn-section {}
.conn-section-title { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.conn-guide { background:var(--card2); border:1px solid var(--bd); border-radius:10px; padding:12px 16px; margin-bottom:24px; font-size:13px; }
.conn-guide ol { margin:6px 0 0 16px; padding:0; }
.conn-guide li { margin-bottom:4px; }
.conn-guide a { color:var(--acc); }
.setup-guide { font-size:13px; }
.setup-guide ol { margin:8px 0 0 18px; padding:0; }
.setup-guide li { margin-bottom:6px; line-height:1.5; }
.setup-guide a { color:var(--acc); }
.acc-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; background:var(--card); border:1px solid var(--bd); border-radius:10px; font-size:13px; margin-bottom:6px; }
.acc-type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.acc-type-card { background:var(--card); border:1px solid var(--bd); border-radius:12px; padding:18px 12px; cursor:pointer; text-align:center; transition:border-color .15s, background .15s; }
.acc-type-card:hover { border-color:var(--acc); background:var(--card2); }
.acc-type-card .icon { font-size:28px; line-height:1; margin-bottom:8px; }
.acc-type-card .name { font-size:13px; font-weight:600; }
.acc-type-card .dir { font-size:11px; color:var(--mut); margin-top:4px; }
.acc-type-card .desc { font-size:11px; color:var(--dim); margin-top:6px; text-align:left; line-height:1.4; }
.acc-row button { background:var(--card2); border:1px solid var(--bd); color:var(--tx); border-radius:7px; padding:5px 9px; font-size:12px; cursor:pointer; }
.acc-row button:hover { border-color:var(--acc); }
.acc-form { background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:20px; }
.acc-form-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.acc-form-head h3 { font-size:15px; margin:0; }
.acc-cancel { background:none; border:1px solid var(--bd); color:var(--mut); border-radius:8px; padding:5px 12px; font-size:12px; cursor:pointer; }
.acc-cancel:hover { border-color:var(--acc); color:var(--tx); }
.acc-form > label, .acc-fields label { display:block; font-size:12px; color:var(--mut); margin-bottom:12px; }
.acc-form input, .acc-form select, .acc-fields input, .acc-fields select { width:100%; margin-top:4px; padding:9px 11px; border-radius:8px; border:1px solid #2b313d; background:var(--card2); color:var(--tx); font-size:13px; }
.acc-form > button[type=submit] { background:var(--acc); border:0; color:#fff; padding:10px 20px; font-weight:600; border-radius:8px; cursor:pointer; font-size:14px; }

/* ---- tryb edycji --------------------------------------------------------- */
#editbtn.active { background:var(--acc); color:#fff; border-color:var(--acc); }
.w.editing { border-color:#3b82f688; }
.w.dragging { opacity:.35; }
.w.drag-over { border-color:var(--acc); box-shadow:0 0 0 2px var(--acc)44; }
.w.w-resizing { outline:2px solid var(--acc)88; }

/* kontrolki per widget (⚙ ×) */
.w-ctrl { display:flex; gap:4px; }
.w-btn { background:none; border:1px solid var(--bd); color:var(--dim); border-radius:6px; padding:2px 6px; font-size:12px; cursor:pointer; line-height:1.4; }
.w-btn:hover { border-color:var(--acc); color:var(--tx); }
.w-del:hover { border-color:var(--hi); color:var(--hi); }

/* drag handle */
.w-drag-handle { cursor:grab; color:var(--dim); font-size:14px; user-select:none;
  padding:0 4px; flex-shrink:0; }
.w-drag-handle:hover { color:var(--tx); }
.w-drag-handle:active { cursor:grabbing; }

/* ghost (klon widgetu podczas drag) */
.w-ghost { background:var(--card); border:2px solid var(--acc); border-radius:12px;
  opacity:.75; overflow:hidden; }

/* ---- krawędziowe i narożne uchwyty resize -------------------------------- */
.w-rs { position:absolute; z-index:10; opacity:0; transition:opacity .15s; }
.w.editing:hover .w-rs { opacity:1; }
.w.w-resizing .w-rs { opacity:1; }

/* krawędź lewa */
.w-rs-w { left:-5px; top:25%; bottom:25%; width:10px; cursor:w-resize;
  background:var(--acc); border-radius:5px; }
/* krawędź prawa */
.w-rs-e { right:-5px; top:25%; bottom:25%; width:10px; cursor:e-resize;
  background:var(--acc); border-radius:5px; }
/* krawędź górna */
.w-rs-n { top:-5px; left:25%; right:25%; height:10px; cursor:n-resize;
  background:var(--acc); border-radius:5px; }
/* krawędź dolna */
.w-rs-s { bottom:-5px; left:25%; right:25%; height:10px; cursor:s-resize;
  background:var(--acc); border-radius:5px; }
/* prawy dolny róg */
.w-rs-se { bottom:-6px; right:-6px; width:14px; height:14px; cursor:se-resize;
  background:var(--acc); border-radius:3px; }

/* przycisk dodaj widget (absolutny, JS ustawia top) */
.w-add-btn { position:absolute; left:18px; right:18px; width:auto;
  background:var(--card); border:2px dashed var(--bd); border-radius:12px;
  padding:18px; color:var(--dim); font-size:14px; cursor:pointer; text-align:center; }
.w-add-btn:hover { border-color:var(--acc); color:var(--acc); }

/* ---- modal widgetu ------------------------------------------------------- */
#widget-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:60; }
#widget-modal.open { display:grid; place-items:center; }
.wm-box { width:min(94vw,480px); max-height:88vh; overflow:auto; background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:20px; }
.wm-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.wm-head h2 { font-size:15px; margin:0; }
.wm-head button { background:none; border:1px solid var(--bd); color:var(--mut); border-radius:8px; padding:4px 9px; cursor:pointer; }
#wm-form > label, #wm-fields label, #wm-conn-row label { display:block; font-size:12px; color:var(--mut); margin-bottom:10px; }
#wm-form select, #wm-form input[type=text], #wm-fields input, #wm-conn-row select { width:100%; margin-top:4px; padding:8px 10px; border-radius:8px; border:1px solid #2b313d; background:var(--card2); color:var(--tx); font-size:13px; }
.wm-footer { margin-top:16px; display:flex; gap:10px; align-items:center; }
.wm-footer button[type=submit] { background:var(--acc); border:0; color:#fff; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }

/* ---- czat widget --------------------------------------------------------- */
.chat-body { display:flex; flex-direction:column; gap:8px; height:100%; min-height:0; }
.chat-hat { font-size:12px; font-weight:600; color:var(--acc); min-height:0; }
.chat-hat:empty { display:none; }
.chat-msgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; font-size:13px; min-height:0; }
.chat-msg { padding:7px 10px; border-radius:8px; max-width:90%; }
.chat-msg .chat-text { white-space:pre-wrap; }
.chat-msg.user { background:var(--acc)22; align-self:flex-end; }
.chat-msg.assistant { background:var(--card2); align-self:flex-start; }
.chat-msg.loading .chat-text { color:var(--dim); }
.chat-tools { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.chat-tools:empty { display:none; }
.tool-chip { font-size:11px; padding:2px 7px; border-radius:10px; background:var(--bd); color:var(--dim);
  border:1px solid transparent; cursor:default; }
.tool-chip.done { color:var(--tx); border-color:var(--acc)66; }
.chat-form { display:flex; flex-direction:column; gap:6px; }
.chat-form textarea { padding:8px 10px; border-radius:8px; border:1px solid #2b313d; background:var(--card2); color:var(--tx); font-size:13px; resize:none; font-family:inherit; }
.chat-row { display:flex; gap:8px; align-items:center; }
.chat-form button[type=submit] { background:var(--acc); border:0; color:#fff; padding:7px 14px; border-radius:7px; font-size:13px; cursor:pointer; }
.chat-new { background:var(--card2); border:1px solid var(--bd); color:var(--dim); padding:7px 10px; border-radius:7px; font-size:12px; cursor:pointer; }
.chat-new:hover { color:var(--tx); }

/* ---- timer Pomodoro ------------------------------------------------------- */
[data-wtype="timer"] .body { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.tm-phase { font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }
.tm-time { font-variant-numeric:tabular-nums; font-size:40px; line-height:1; }
[data-tphase="short"] .tm-time, [data-tphase="long"] .tm-time { color:var(--ok); }
.tm-dots { display:flex; gap:6px; }
.tm-dot { width:9px; height:9px; border-radius:50%; background:var(--card2); border:1px solid var(--bd); }
.tm-dot.filled { background:var(--acc); border-color:var(--acc); }
.tm-ctrl { display:flex; gap:6px; margin-top:2px; }
.tm-btn { background:var(--card2); border:1px solid var(--bd); color:var(--tx); border-radius:8px; padding:7px 12px; font-size:13px; cursor:pointer; }
.tm-btn:hover { border-color:var(--acc); }
.tm-btn.tm-go { font-weight:600; min-width:96px; }
.tm-btn.tm-go.running { color:var(--med); border-color:var(--med); }
.tm-today { font-size:11px; }

/* ---- nawyki -------------------------------------------------------------- */
.habitrow { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--bd); }
.habitrow:first-child { border-top:0; }
.habit-info { min-width:0; }
.habit-val { font-size:11px; margin-top:2px; }
.habit-btns { display:flex; gap:4px; flex:0 0 auto; }
.hb { width:26px; height:26px; border-radius:7px; border:1px solid var(--bd); background:var(--card2); color:var(--dim); font-size:12px; cursor:pointer; line-height:1; padding:0; }
.hb:hover { color:var(--tx); border-color:var(--acc); }
.hb.ok:hover { color:var(--ok); border-color:var(--ok); }
.hb.no:hover { color:var(--hi); border-color:var(--hi); }
.hb:disabled { opacity:.4; }

/* ---- przychody ----------------------------------------------------------- */
.rev-head { display:flex; justify-content:space-between; align-items:baseline; padding:4px 0; }
.rev-head b { font-size:18px; }
.revrow { display:flex; justify-content:space-between; gap:8px; align-items:baseline; padding:6px 0; border-top:1px solid var(--bd); }
.rev-amt { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- kalendarz: dodawanie ------------------------------------------------ */
.cal-add-toggle { margin-top:8px; background:none; border:1px dashed var(--bd); color:var(--dim); border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; width:100%; }
.cal-add-toggle:hover { border-color:var(--acc); color:var(--acc); }
.cal-add { display:none; flex-direction:column; gap:6px; margin-top:8px; }
.cal-add.open { display:flex; }
.cal-add input { padding:8px 10px; border-radius:8px; border:1px solid #2b313d; background:var(--card2); color:var(--tx); font-size:13px; }
.cal-row { display:flex; gap:8px; align-items:center; }
.cal-row button[type=submit] { background:var(--acc); border:0; color:#fff; padding:7px 14px; border-radius:7px; font-size:13px; cursor:pointer; }
.cal-cancel { background:none; border:1px solid var(--bd); color:var(--mut); border-radius:7px; padding:7px 12px; font-size:13px; cursor:pointer; }

/* ---- poczta: lista + triage ---------------------------------------------- */
.ml-list { display:flex; flex-direction:column; }
.mlrow { display:flex; gap:8px; align-items:center; padding:8px 0; border-top:1px solid var(--bd); cursor:pointer; }
.mlrow:first-child { border-top:0; }
.mlrow:hover { background:var(--card2); }
.ml-main { flex:1; min-width:0; }
.ml-subj { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ml-from { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ml-acts { display:flex; gap:4px; flex:0 0 auto; }
.ml-a { width:26px; height:26px; border-radius:7px; border:1px solid var(--bd); background:var(--card2); color:var(--dim); font-size:12px; cursor:pointer; padding:0; }
.ml-a:hover { color:var(--ok); border-color:var(--ok); }
.ml-a:disabled { opacity:.4; }
.ml-compose-btn { margin-top:8px; background:none; border:1px dashed var(--bd); color:var(--dim); border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; width:100%; }
.ml-compose-btn:hover { border-color:var(--acc); color:var(--acc); }

/* ---- arkusz (podgląd maila / kompozycja) --------------------------------- */
#pa-sheet { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:70; }
#pa-sheet.open { display:grid; place-items:center; }
.sheet-box { width:min(94vw,620px); max-height:88vh; overflow:auto; background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:20px; }
.sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.sheet-head h2 { font-size:15px; margin:0; }
.sheet-close { background:none; border:1px solid var(--bd); color:var(--mut); border-radius:8px; padding:4px 9px; cursor:pointer; }
.sheet-meta { font-size:12px; margin-bottom:10px; }
.sheet-body { white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:13px; margin:0; }
.ml-compose { display:flex; flex-direction:column; gap:8px; }
.ml-compose input, .ml-compose textarea { padding:9px 11px; border-radius:8px; border:1px solid #2b313d; background:var(--card2); color:var(--tx); font-size:13px; font-family:inherit; }
.ml-compose .cal-row button[type=submit] { background:var(--acc); border:0; color:#fff; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }

/* Siatka 100px sama dobiera liczbę kolumn do szerokości okna (computeCols),
   więc nie potrzeba osobnych breakpointów; uchwyty resize aktywne na każdej osi. */