/* Përkujtuesi Ditor · portal i ekipit
   Ngjyra bazë: krem i ngrohtë · theksi: e kuqja e logos */

:root {
    --bg: #f5efe4;
    --card: #fffdf9;
    --ink: #2b221a;
    --muted: #8a7c6b;
    --line: #e9dfcd;
    --accent: #b3202c;
    --accent-soft: #f7e2e0;
    --ok: #3e7d4f;
    --ok-soft: #e2efe4;
    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 9px;
    --flame: #e8710a;
    --flame-soft: #f6a33c;
    --shadow-card: 0 1px 1px rgba(43, 34, 26, 0.03), 0 2px 6px rgba(43, 34, 26, 0.03);
    --shadow-lift: 0 1px 2px rgba(43, 34, 26, 0.04), 0 6px 16px rgba(43, 34, 26, 0.06);
    --shadow-float: 0 2px 6px rgba(43, 34, 26, 0.06), 0 10px 26px rgba(43, 34, 26, 0.09);
    --sunken: #f1ebdf;
    --field: #fff;
    --warn-soft: #fdf1e2;
    --warn-ink: #b26a00;
    --err-soft: #fbeeef;
    --err-line: #d8a1a6;
    --err-ink: #8a5a5e;
    --behind: #eae0cd;
}

/* Tema e errët: ndizet vetë sipas sistemit */
html[data-theme="dark"] {
    --bg: #191512;
    --card: #221d19;
    --ink: #ece5db;
    --muted: #a3947f;
    --line: #3a322a;
    --accent: #d24a55;
    --accent-soft: #3d2224;
    --ok: #6fbf82;
    --ok-soft: #22352a;
    --sunken: #2b241f;
    --field: #2b241f;
    --warn-soft: #3a2c17;
    --warn-ink: #e2a355;
    --err-soft: #3a2325;
    --err-line: #5d3a3e;
    --err-ink: #d9a0a5;
    --behind: #0f0c0a;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.28);
    --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .badge-new { color: #c3b394; }

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body { -webkit-tap-highlight-color: transparent; }

::selection { background: rgba(179, 32, 44, 0.16); }

body {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.4;
}

.shell { max-width: 640px; margin: 0 auto; min-height: 100dvh; }

.ic { flex: none; vertical-align: -3px; }

/* ---------- Koka ---------- */

.top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 6px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 12px;
    background: var(--accent); color: #fff;
}
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.top-user { color: var(--muted); font-size: 14px; font-weight: 600; }

.streak {
    display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 10px;
    font-size: 14px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums;
}
.streak-hot { color: var(--flame); }
.streak-hot .ic { fill: var(--flame-soft); stroke: var(--flame); }

.view-as-form select {
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
    background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 7px 14px; cursor: pointer;
}
.view-as-form select:focus { outline: none; border-color: var(--accent); }

.view-as-banner {
    margin: 4px 20px 0;
    background: var(--accent-soft); color: var(--accent);
    font-size: 13.5px; font-weight: 600; text-align: center;
    border-radius: 999px; padding: 8px 14px;
}

/* ---------- Përmbajtja ---------- */

.main { padding: 8px 20px calc(128px + env(safe-area-inset-bottom)); }
.main-bare { padding: 20px; }

.page-head { margin: 10px 0 16px; }
.page-head h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
.page-sub { color: var(--muted); font-size: 15px; margin-top: 2px; }

.section-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); margin: 18px 4px 7px;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-card);
}

.muted { color: var(--muted); font-size: 14px; }
.accent { color: var(--accent); }

/* ---------- Butonat ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 700; font-size: 16px;
    border: none; border-radius: var(--radius-sm); cursor: pointer;
    padding: 13px 20px; min-height: 48px;
    text-decoration: none; color: inherit;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:active { filter: brightness(0.92); }
.btn-big { width: 100%; font-size: 17px; min-height: 54px; }
.btn-block { width: 100%; margin-bottom: 12px; }
.btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn-danger { background: transparent; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }

.btn-check {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 17px; border: none; cursor: pointer;
    background: var(--accent); color: #fff; flex: none;
}
.btn-check:active { filter: brightness(0.92); }
.btn-undo, .btn-icon-quiet {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-xs); cursor: pointer;
    background: transparent; border: 1.5px solid var(--line); color: var(--muted); flex: none;
}

.btn-compact { width: auto; min-height: 44px; padding: 10px 18px; font-size: 15px; }
.add-row { display: flex; margin-bottom: 12px; }

.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-round {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    background: var(--accent); color: #fff; text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform 0.16s ease, filter 0.16s ease;
}
.btn-round:active { transform: scale(0.94); }
@media (hover: hover) { .btn-round:hover { filter: brightness(1.07); } }

.danger-zone { margin-top: 28px; }

/* ---------- Format ---------- */

.form-card { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
    font: inherit; color: var(--ink);
    background: var(--field); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 13px 14px; min-height: 50px; width: 100%;
}
.field textarea { min-height: 0; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent);
}
.field-check { flex-direction: row; align-items: center; gap: 10px; }
.field-check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
.field-check span { color: var(--ink); font-weight: 500; }

/* ---------- Hyrja ---------- */

.login-wrap { padding: 12vh 4px 40px; }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 23px;
    background: var(--accent); color: #fff; margin-bottom: 14px;
}
.login-brand h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.login-brand p { color: var(--muted); margin-top: 2px; }
.login-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; }

/* ---------- Detyrat e sotme ---------- */

.progress-card { padding: 13px 14px; }
.progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--ok); transition: width 0.3s; }
.bar-sm { height: 6px; margin-top: 10px; }

.task {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 14px 14px 16px; margin-bottom: 10px;
    box-shadow: var(--shadow-card);
}
.task-late { }
.task-done { opacity: 0.62; }
.task-done .task-title { text-decoration: line-through; }

.task-when { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 86px; flex: none; }
.task-time { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.time-late { color: var(--accent); }
.ch-badge-sm { width: 30px; height: 30px; border-radius: 10px; }
.task-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.task-title { font-weight: 600; font-size: 15px; }
.task-note { color: var(--muted); font-size: 13px; }
.late-label {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--accent); font-size: 13px; font-weight: 700; margin-top: 2px;
}

.chip {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; color: var(--ch, var(--muted));
    background: color-mix(in srgb, var(--ch, var(--muted)) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--ch, var(--muted)) 30%, var(--card));
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.chip-sm { font-size: 11px; padding: 1px 7px; }
.chip-flow { --ch: var(--accent); max-width: 96px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.task-waiting { text-decoration: none; color: inherit; }
.task-waiting > .ic { color: var(--muted); }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ch, var(--muted)); flex: none; }

.empty-card {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    text-align: center; padding: 26px 16px; color: var(--muted);
}

.link-row {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--accent); font-weight: 700; text-decoration: none;
    padding: 12px; margin: 4px 0 12px; font-size: 15px;
}

/* ---------- Lista kompakte ---------- */

.person-card, .channel-card { padding: 12px 14px; }
.person-head, .channel-head {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.person-head strong, .channel-head strong { flex: 1; font-size: 15px; }

.mini-task {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    font-size: 14px;
}
.mini-task:last-child { border-bottom: none; }
.mini-task form { display: flex; }
.mini-link { text-decoration: none; color: inherit; }
.mini-link .ic:last-child { color: var(--muted); }
.mini-time { font-weight: 700; font-variant-numeric: tabular-nums; width: 52px; flex: none; font-size: 13px; }
.mini-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-person { color: var(--muted); font-size: 12.5px; font-weight: 600; flex: none; display: inline-flex; align-items: center; gap: 5px; }
.done-text { text-decoration: line-through; color: var(--muted); }

.mini-status, .mini-status-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 11px; flex: none;
}
.mini-status-btn { cursor: pointer; border: none; font: inherit; min-width: 42px; min-height: 42px; border-radius: var(--radius-xs); }
.st-done { background: var(--ok-soft); color: var(--ok); }
.st-late { background: var(--accent-soft); color: var(--accent); }
.st-open { background: var(--sunken); color: var(--muted); }

/* ---------- Java ---------- */

.week-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.week-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 56px; border-radius: var(--radius-sm);
    color: var(--muted); text-decoration: none; flex: none;
}
.day-chips { display: flex; gap: 5px; flex: 1; justify-content: space-between; }
.day-chips-wrap { margin-bottom: 6px; }
.day-chip {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    flex: 1; padding: 8px 2px; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--ink); border: 1.5px solid transparent;
}
.day-chip .day-name { font-size: 12px; font-weight: 600; color: var(--muted); }
.day-chip .day-num { font-size: 16px; font-weight: 800; }
.day-today { border-color: var(--line); background: var(--card); }
.day-on { background: var(--accent); }
.day-on .day-name, .day-on .day-num { color: #fff; }

/* ---------- Përmbledhja ---------- */

.seg {
    display: flex; background: var(--sunken); border-radius: var(--radius-sm);
    padding: 4px; gap: 4px; margin-bottom: 14px;
}
.seg-item {
    flex: 1; text-align: center; padding: 10px; border-radius: 12px;
    font-weight: 700; font-size: 15px; text-decoration: none; color: var(--muted);
    appearance: none; -webkit-appearance: none; border: none; background: transparent;
    font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.seg-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(43, 34, 26, 0.08); }

.stat-row { display: flex; gap: 10px; }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; }
.stat-num { font-size: 26px; font-weight: 800; }
.stat-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat-late .stat-num { color: var(--accent); }

.sum-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.sum-row:last-child { border-bottom: none; }
.sum-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sum-nums { display: flex; align-items: center; gap: 8px; }

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-late { background: var(--accent-soft); color: var(--accent); }
.badge-new { background: var(--sunken); color: var(--muted); }
.badge-mute { background: var(--sunken); color: var(--muted); }

/* ---------- Idetë ---------- */

.idea-card { display: flex; flex-direction: column; gap: 9px; }
.idea-muted { opacity: 0.6; }
.idea-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.idea-head .muted { font-size: 13px; }
.idea-text { font-size: 15px; }
.idea-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none;
}
.idea-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }

/* ---------- Projektet ---------- */

.chain-card { display: block; text-decoration: none; color: inherit; }
.chain-done { opacity: 0.65; }
.chain-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chain-head strong { font-size: 16px; }
.chain-next { color: var(--muted); font-size: 14px; margin-top: 5px; }
.chain-next strong { color: var(--ink); }

.step {
    display: flex; align-items: center; gap: 13px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 13px 14px; margin-bottom: 8px;
    box-shadow: var(--shadow-card);
}
.step-active { border-color: var(--accent); border-width: 1.5px; }
.step-done { opacity: 0.62; }
.step-done .step-title { text-decoration: line-through; }
.step-num {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: var(--sunken); color: var(--muted); font-weight: 800; font-size: 15px;
}
.step-active .step-num { background: var(--accent); color: #fff; }
.step-done .step-num { background: var(--ok-soft); color: var(--ok); }
.step-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step-title { font-weight: 600; font-size: 15px; }
.step-meta { color: var(--muted); font-size: 13px; }

/* ---------- Menyja ---------- */

.menu-card { padding: 4px 6px; }
.menu-row {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 10px; text-decoration: none; color: inherit;
    font-weight: 600; font-size: 15px;
    position: relative;
}
.menu-row:not(:last-child)::after {
    content: ""; position: absolute; left: 46px; right: 10px; bottom: 0; height: 1px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
}
.menu-row > span { flex: 1; display: flex; flex-direction: column; }
.menu-row small { font-weight: 500; font-size: 12.5px; }
.menu-row .ic:first-child { color: var(--accent); width: 22px; height: 22px; }
.menu-row .ic:last-child { color: var(--muted); width: 18px; height: 18px; flex: 0 0 auto; }
.row-muted { opacity: 0.55; }

/* ---------- Detyrat ---------- */

.duty-row { gap: 10px; }
.duty-row:not(:last-child)::after { left: 10px; }
.duty-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.duty-title { font-weight: 600; font-size: 15px; }
.duty-mine { background: color-mix(in srgb, var(--accent) 4%, transparent); border-radius: var(--radius-sm); }

.person-chip {
    display: inline-flex; align-items: center;
    font-size: 12.5px; font-weight: 700; white-space: nowrap; flex: none;
    background: var(--sunken); color: var(--muted);
    border-radius: 999px; padding: 4px 12px;
}
.person-chip-me { background: var(--accent); color: #fff; }
.person-chip-none { background: var(--accent-soft); color: var(--accent); }

/* ---------- Zgjedhja e llojit të projektit ---------- */

.radio-cards { display: flex; flex-direction: column; gap: 8px; }
.radio-card {
    display: flex; flex-direction: column; gap: 2px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 13px 15px; cursor: pointer;
}
.radio-card:has(input:checked), .radio-card.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-title { font-weight: 700; font-size: 15px; }
.radio-sub { color: var(--muted); font-size: 13px; }

/* ---------- Proceset ---------- */

.stage-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.stage-chip {
    font-size: 12.5px; font-weight: 700; color: var(--muted);
    background: var(--sunken); border-radius: 999px; padding: 4px 11px;
}
.stage-chip strong { color: var(--ink); }
.stage-chip-me { background: var(--accent-soft); color: var(--accent); }
.stage-chip-me strong { color: var(--accent); }
.stage-arrow { color: var(--muted); display: inline-flex; }

.add-box { padding: 0; overflow: visible; }
.add-summary {
    display: flex; align-items: center; gap: 9px;
    padding: 16px; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 15.5px; color: var(--accent);
}
.add-summary::-webkit-details-marker { display: none; }
.add-form { padding: 0 16px 16px; }

.stage-block { margin: 22px 0 8px; }
.stage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 0 2px; position: relative; }
.stage-head-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stage-head-body strong { font-size: 16px; }
.stage-head-body .muted { font-size: 13px; }
.stage-mine .stage-head-body strong { color: var(--accent); }
.step-num-me { background: var(--accent); color: #fff; }

.stage-edit { position: relative; }
.stage-edit summary { list-style: none; }
.stage-edit summary::-webkit-details-marker { display: none; }
.stage-edit-btn { cursor: pointer; }
.stage-edit-panel {
    position: absolute; right: 0; top: 48px; z-index: 30;
    width: min(86vw, 340px);
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: var(--shadow-float);
}

.stage-empty { color: var(--muted); font-size: 14px; padding: 6px 4px 2px; }

.item-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.item-done { opacity: 0.6; }
.item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item-title { font-size: 15px; }
.item-text { font-size: 14.5px; color: var(--ink); }
.item-range { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.item-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.item-meta .muted { font-size: 12.5px; }
.item-actions { display: flex; align-items: center; gap: 8px; }
.item-actions .grow { flex: 1; display: flex; }
.btn-move { flex: 1; min-height: 46px; font-size: 15px; }
.btn-icon-sm { width: 34px; height: 34px; border-radius: var(--radius-xs); }

.field-pair { display: flex; gap: 10px; }
.field-pair .field { flex: 1; min-width: 0; }

.item-tools { display: flex; gap: 6px; align-items: center; }
.menu-row > .item-tools { flex: 0 0 auto; flex-direction: row; }
.item-links { display: flex; gap: 12px; align-items: center; }

.comments { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding-top: 8px; }
.comments-summary {
    display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
    color: var(--muted); font-weight: 700; font-size: 13.5px; padding: 2px 0;
}
.comments-summary::-webkit-details-marker { display: none; }
.comment { padding: 8px 0 2px; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comment-head strong { font-size: 13.5px; }
.comment-head form { margin-left: auto; display: flex; }
.comment-text { font-size: 14px; margin-top: 2px; }
.btn-icon-xs { width: 26px; height: 26px; border-radius: 8px; min-height: 0; }
.comment-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-form input[type="text"] {
    flex: 1; min-width: 0; font: inherit; color: var(--ink);
    background: var(--field); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 9px 13px;
}
.comment-form input[type="text"]:focus { outline: none; border-color: var(--accent); }
.template-body { white-space: pre-wrap; }

.conn-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 13px; flex: none;
    background: var(--sunken); border: 1px solid var(--line);
}
.conn-ic-lg { width: 56px; height: 56px; border-radius: 17px; }
.menu-row > .conn-ic { flex: 0 0 42px; }
.menu-row .conn-ic + span { flex: 1; }

.setup-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; }
.setup-code {
    display: block; font: 12.5px ui-monospace, Menlo, monospace;
    background: var(--sunken); border-radius: 8px; padding: 6px 9px; margin-top: 4px;
    word-break: break-all; user-select: all;
}
textarea.gas-code {
    width: 100%; border: 1.5px solid var(--line); resize: vertical;
    white-space: pre; overflow-x: auto; line-height: 1.5; color: var(--ink);
}

/* ---------- Postimet e grupuara ---------- */

.post-list { display: flex; flex-direction: column; }
.post-row {
    display: flex; align-items: center; gap: 13px;
    text-decoration: none; color: inherit;
    padding: 13px 15px; margin-bottom: 9px;
}
.post-done { opacity: 0.55; }
.post-late { }
.post-time { font-weight: 800; font-size: 15.5px; font-variant-numeric: tabular-nums; width: 52px; flex: none; }
.post-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.post-title { font-weight: 600; font-size: 14.5px; }
.post-chs { display: flex; flex-wrap: wrap; gap: 7px; }
.ch-mini { display: inline-flex; color: var(--ch, var(--muted)); }
.ch-mini.ch-done { opacity: 0.28; }
.ch-mini.ch-late { color: var(--accent); }
.post-status { flex: none; }
.post-count { font-size: 12.5px; font-weight: 700; }

.ch-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-xs); flex: none;
    color: var(--ch, var(--muted));
    background: color-mix(in srgb, var(--ch, var(--muted)) 10%, var(--card));
}
.post-ch-row form { margin-left: auto; }
.post-ch-row > .ch-badge { flex: 0 0 36px; }
.post-ch-row > span:nth-child(2) { flex: 1; }

.pkg-card { display: flex; flex-direction: column; gap: 10px; }
.pkg-photo { width: 100%; max-height: 340px; object-fit: contain; border-radius: var(--radius-sm); background: var(--sunken); }
.pkg-ready {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ok); font-size: 13px; font-weight: 700; text-decoration: none; margin-top: 2px;
}

/* ---------- Publikimi ---------- */

.target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.target {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 15px;
}
.target input { width: 20px; height: 20px; accent-color: var(--accent); }
.target:has(input:checked), .target.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.target-off { opacity: 0.5; cursor: default; }
.target small { color: var(--muted); font-weight: 500; margin-left: auto; }

.report-body {
    font: 13.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
    white-space: pre-wrap; word-break: break-word; color: var(--ink);
}

.clip-status { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.clip-wait { color: var(--muted); }
.clip-fail { color: var(--accent); }

/* ---------- Studio ---------- */

.studio-player { padding: 6px; overflow: hidden; }
.studio-player video { display: block; width: 100%; max-height: 420px; border-radius: calc(var(--radius) - 6px); background: #000; }

.fmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fmt {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 6px 10px; cursor: pointer; text-align: center;
}
.fmt input { position: absolute; opacity: 0; pointer-events: none; }
.fmt:has(input:checked), .fmt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.fmt-shape { display: block; border: 2px solid var(--muted); border-radius: 4px; }
.fmt:has(input:checked) .fmt-shape, .fmt.sel .fmt-shape { border-color: var(--accent); }
.fmt-916 { width: 17px; height: 30px; }
.fmt-11 { width: 26px; height: 26px; margin: 2px 0; }
.fmt-169 { width: 34px; height: 19px; margin: 5.5px 0; }
.fmt-name { font-weight: 800; font-size: 14px; }
.fmt small { color: var(--muted); font-size: 11px; line-height: 1.3; }

.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-opt {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    border: 2px solid var(--line); border-radius: var(--radius-sm);
    padding: 9px; cursor: pointer; min-height: 44px;
}
.filter-opt input { position: absolute; opacity: 0; pointer-events: none; }
.filter-opt:has(input:checked), .filter-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.filter-opt img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 9px; background: var(--sunken); pointer-events: none; }
.filter-opt span { font-size: 13.5px; font-weight: 700; }
.filter-opt:has(input:checked) span, .filter-opt.sel span { color: var(--accent); }

@media (min-width: 900px) {
    .filter-grid { grid-template-columns: repeat(4, 1fr); }
}

.render-card { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; }
.render-head { display: flex; align-items: center; gap: 10px; }
.render-head strong { font-size: 16px; }
.render-head .muted { flex: 1; font-size: 13px; }
.render-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.clip-live { display: flex; flex-direction: column; gap: 6px; }
.clip-live-row { display: flex; align-items: center; justify-content: space-between; }
.clip-live-pct { font-size: 13px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.bar-live { background: var(--accent); }

/* ---------- Google Drive ---------- */

.drive-card { padding: 6px; overflow: hidden; }
.drive-card iframe { display: block; width: 100%; height: 460px; border: none; border-radius: calc(var(--radius) - 6px); background: var(--field); }
.drive-hint { margin: 2px 6px 12px; font-size: 13px; }

.drive-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.drive-row { gap: 10px; }
.drive-main {
    flex: 1; display: flex; align-items: center; gap: 13px; min-width: 0;
    text-decoration: none; color: inherit; font-weight: 600; font-size: 15px;
}
.drive-main > span { display: flex; flex-direction: column; min-width: 0; }
.drive-main > span > small { font-weight: 500; font-size: 12.5px; }
.drive-main .ic { color: var(--accent); }
.drive-row:not(:last-child)::after { left: 10px; }
.arkiva-search { flex: 1; min-width: 140px; }
.arkiva-search input {
    width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
    background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 10px 16px; min-height: 44px;
}
.arkiva-search input:focus { outline: none; border-color: var(--accent); }
.arkiva-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-xs); flex: none; background: var(--sunken); }

.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick {
    position: relative; display: block; aspect-ratio: 1; overflow: hidden;
    border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
    background: var(--sunken);
}
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pick-none {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 100%; height: 100%; color: var(--muted); font-size: 11px; text-align: center; padding: 4px;
    pointer-events: none; word-break: break-word;
}
.pick:has(input:checked), .pick.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (min-width: 900px) { .pick-grid { grid-template-columns: repeat(6, 1fr); } }

.text-picks { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.text-pick {
    flex: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
    background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 9px 15px; cursor: pointer; white-space: nowrap; max-width: 230px;
    overflow: hidden; text-overflow: ellipsis;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.text-pick:active { transform: scale(0.96); }
.text-pick.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--accent); }

.more-opts { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding-top: 4px; }
.more-opts .add-summary { padding: 8px 0; font-size: 14.5px; }
.more-opts[open] .add-summary .ic:first-child { transform: rotate(45deg); }

/* ---------- Tab bar ---------- */

.tabbar {
    position: fixed; left: 50%;
    /* translateZ mban ishullin në shtresë të vetën: nuk dridhet e nuk rrëshqet me faqen */
    transform: translateX(-50%) translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100% - 40px); max-width: 480px;
    display: flex; gap: 2px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
    box-shadow: var(--shadow-float);
}
.tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px 7px; text-decoration: none; color: var(--muted);
    font-size: 11px; font-weight: 600; border-radius: 999px;
}
.tab .ic {
    width: 52px; height: 29px; padding: 2.5px 0; border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.tab-on { color: var(--accent); font-weight: 700; }
.tab-on .ic { background: color-mix(in srgb, var(--accent) 11%, transparent); }

/* ---------- Toast ---------- */

.toast {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 50; max-width: min(92vw, 480px);
    background: var(--ink); color: var(--bg);
    font-size: 14.5px; font-weight: 600;
    padding: 12px 18px; border-radius: 15px;
    box-shadow: 0 6px 24px rgba(43, 34, 26, 0.25);
    transition: opacity 0.4s, transform 0.4s;
}
.toast.gone { opacity: 0; transform: translateX(-50%) translateY(-12px); }

/* ---------- Desktop ---------- */

/* ---------- Lëvizjet e buta (iOS feeling) ---------- */

.btn, .btn-check, .btn-undo, .btn-icon-quiet, .tab, .day-chip, .seg-item,
.menu-row, .mini-status-btn, .link-row, .idea-link, .radio-card, .add-summary,
.chain-card, .task-waiting, .mini-link, .week-arrow {
    transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease,
        border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}

.btn:active, .btn-check:active, .btn-undo:active, .btn-icon-quiet:active,
.mini-status-btn:active, .seg-item:active, .radio-card:active { transform: scale(0.96); }
.tab:active, .day-chip:active { transform: scale(0.93); }
.menu-row:active, .chain-card:active, .task-waiting:active, .mini-link:active { transform: scale(0.985); }

.field input, .field select, .field textarea {
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    box-shadow: 0 0 0 3.5px rgba(179, 32, 44, 0.10);
}

.btn:focus-visible, .btn-check:focus-visible, .btn-undo:focus-visible,
.tab:focus-visible, .day-chip:focus-visible, .menu-row:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3.5px rgba(179, 32, 44, 0.25);
}

@media (hover: hover) {
    .btn-primary:hover { filter: brightness(1.07); }
    .btn-check:hover { filter: brightness(1.07); }
    .btn-ghost:hover, .btn-undo:hover, .btn-icon-quiet:hover { background: var(--sunken); border-color: var(--muted); }
    .btn-danger:hover { background: rgba(179, 32, 44, 0.05); }
    .tab:hover { color: var(--ink); }
    .tab-on:hover { color: var(--accent); }
    .menu-row:hover, .mini-link:hover { background: rgba(43, 34, 26, 0.028); border-radius: var(--radius-sm); }
    .day-chip:hover { background: rgba(43, 34, 26, 0.04); }
    .day-on:hover { background: var(--accent); }
    .chain-card:hover, .task-waiting:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lift);
    }
    .link-row:hover, .idea-link:hover { opacity: 0.75; }
    .week-arrow:hover { color: var(--ink); }
}

.add-summary .ic:first-child { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.add-box[open] .add-summary .ic:first-child { transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
    .main > * {
        animation: rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
    .main > *:nth-child(2) { animation-delay: 0.03s; }
    .main > *:nth-child(3) { animation-delay: 0.06s; }
    .main > *:nth-child(4) { animation-delay: 0.09s; }
    .main > *:nth-child(5) { animation-delay: 0.12s; }
    .main > *:nth-child(6) { animation-delay: 0.15s; }
    .main > *:nth-child(7) { animation-delay: 0.18s; }
    .main > *:nth-child(n+8) { animation-delay: 0.21s; }

    .toast { animation: toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
    .bar-fill { transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
    .stage-edit-panel { animation: pop-in 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 700px) {
    body { background: var(--behind); }
    .shell {
        display: flex; flex-direction: column;
        max-width: 1100px; margin: clamp(16px, 2.5vw, 32px) auto;
        min-height: calc(100dvh - clamp(32px, 5vw, 64px));
        padding: 0 clamp(30px, 5vw, 60px) 12px;
        background: var(--bg); border: 1px solid var(--line);
        border-radius: 30px; box-shadow: var(--shadow-float);
    }

    /* Navigacioni lart, jo në fund */
    .top { order: -2; padding: clamp(24px, 3.2vw, 36px) 0 14px; }
    .tabbar {
        order: -1;
        position: sticky; top: 12px; bottom: auto; left: auto; transform: none;
        width: fit-content; max-width: none; z-index: 20; margin: 0 auto;
        justify-content: center; gap: 6px;
        background: var(--card);
        border: 1px solid var(--line); border-radius: 999px;
        box-shadow: var(--shadow-card);
        padding: 6px 10px;
    }
    .tab {
        flex: 0 0 auto; flex-direction: row; gap: 9px;
        font-size: 15px; padding: 11px 20px; border-radius: 999px;
    }
    .tab .ic { width: 19px; height: 19px; padding: 0; border-radius: 0; }
    .tab-on { background: var(--accent); color: #fff; }
    .tab-on .ic { background: transparent; }

    .main {
        padding: 26px 0 90px;
        display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        gap: 12px 16px; align-content: start;
        justify-items: center;
    }
    .main > * { grid-column: 1 / -1; margin-bottom: 0; width: 100%; }
    .add-row { justify-content: center; }
    .main > .section-label { margin: 14px 4px 0; }
    .main > .link-row { margin: 0; }
    .page-head { margin: 0 0 6px; }
    .page-head h2 { font-size: 27px; }

    /* Kartat që rrinë bukur në dy shtylla */
    .main > .task,
    .main > .idea-card,
    .main > .chain-card,
    .main > .channel-card,
    .main > .person-card { grid-column: auto; }

    /* Një aks i majtë i qartë: elementet e vetme mbajnë gjerësi leximi 720px,
       vetëm rrjetat e kartave e marrin gjithë gjerësinë */
    .main > .form-card,
    .main > .danger-zone,
    .main > .progress-card,
    .main > .empty-card,
    .main > .stat-row,
    .main > .day-chips-wrap,
    .view-me-shume > .menu-card,
    .view-perdoruesit > .menu-card { width: 100%; max-width: 720px; }

    /* Kalendari i javës e mbush gjithë gjerësinë */
    .main > .week-nav { max-width: none; }
    .week-nav .day-chips { gap: 10px; }
    .main > .seg { max-width: 400px; }

    .main > .half { grid-column: auto; align-self: start; }
    .half .section-label { margin-top: 14px; }
    .half .card { margin-bottom: 0; }

    /* Butonat me gjerësi natyrale, jo blloqe gjigante */
    .main > .btn-block { width: auto; padding-left: 26px; padding-right: 26px; }
    .main > .link-row { justify-content: center; }
    .main > form > .btn-block { width: auto; padding-left: 26px; padding-right: 26px; }

    .login-wrap { max-width: 480px; margin: 0 auto; }

    /* Studio: gjithçka në një kolonë me gjerësi të njëjtë */
    .view-studio > * { width: 100%; max-width: 720px; }

    .main > .post-list {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(470px, 1fr));
        gap: 10px 16px; align-items: start;
    }
    .post-list .post-row { margin-bottom: 0; }

    .stage-block {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        gap: 10px 16px;
    }
    .stage-block > .stage-head, .stage-block > .stage-empty { grid-column: 1 / -1; }
    .stage-block > .stage-head { max-width: 720px; }
    .stage-block .item-card { margin-bottom: 0; align-self: start; }
    .main > .add-box { width: 100%; max-width: 720px; }
}


@media (min-width: 1100px) {
    .top { padding-bottom: 26px; }
    .tabbar { margin-top: -84px; margin-bottom: 30px; }
}

/* Picker: kërkimi + lista e teksteve */
.pick-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.text-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.text-list .text-pick {
    display: flex; align-items: center; gap: 10px; width: 100%; max-width: none;
    text-align: left; padding: 13px 14px; border-radius: var(--radius-sm);
    white-space: normal; line-height: 1.45; font-weight: 500; overflow: visible;
}
.text-pick-body { flex: 1; min-width: 0; }
.text-pick-check { flex: 0 0 auto; opacity: 0; color: var(--accent); }
.text-pick.sel .text-pick-check { opacity: 1; }
.pick-extra { display: none !important; }
.show-all { width: 100%; }
.pick-search {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
    background: var(--field); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 0 12px; color: var(--muted);
}
.pick-search:focus-within { border-color: var(--accent); }
.pick-search input {
    border: none; background: none; padding: 8px 0; min-height: 44px !important;
    width: 100%; font: inherit; color: var(--ink);
}
.pick-search input:focus { outline: none; }

/* Java: kthimi te sot */
.head-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.btn-today {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 15px; border-radius: 999px; text-decoration: none;
    background: var(--card); border: 1.5px solid var(--line);
    color: var(--accent); font-weight: 600; font-size: 0.92rem;
}
.btn-today:active { transform: scale(0.96); }

/* ---------- Raundi UI/UX korrik 20 ---------- */

/* Avatarë me iniciale */
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    border-radius: 999px; background: color-mix(in srgb, var(--av) 16%, var(--card));
    color: var(--av); font-weight: 700; letter-spacing: 0.02em;
}
.assignee-line { display: inline-flex; align-items: center; gap: 5px; }
.person-head { display: flex; align-items: center; gap: 9px; }

/* Hyrja me profile */
.login-hint { font-weight: 700; font-size: 16px; text-align: center; }
.login-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.login-person {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
    background: none; border: 1.5px solid transparent; border-radius: var(--radius-sm);
    padding: 10px 4px; cursor: pointer;
}
.login-person:active { transform: scale(0.95); }
.login-step2 { display: none; }
.login-back {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--accent);
    background: none; border: none; padding: 0; cursor: pointer;
}

/* Postimi i radhës */
.next-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    text-decoration: none; color: inherit; border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.next-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.next-body small { color: var(--muted); font-weight: 600; font-size: 12px; }
.next-body strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-when { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.next-when strong { color: var(--ink); font-size: 15px; }

/* Gjendjet e barit dhe afatet */
.bar-part { background: var(--accent); }
.badge-soon { background: var(--warn-soft); color: var(--warn-ink); }

/* Kanali i kryer */
.ch-done { opacity: 0.55; }
.ch-done .mini-status-btn.st-done { opacity: 1; }
.mini-status-btn.st-done .ic, .btn-check .ic { animation: check-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes check-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Banner gabimi i publikimit automatik */
.error-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border: 1.5px solid var(--err-line); background: var(--err-soft); margin-bottom: 14px;
}
.error-ic { color: var(--accent); flex: 0 0 auto; }
.error-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.error-body small { color: var(--err-ink); word-break: break-word; }

/* Parapamja e fotos së zgjedhur */
.pick-preview { position: relative; margin-bottom: 10px; }
.pick-preview img {
    width: 100%; max-height: 320px; object-fit: contain;
    background: var(--sunken); border-radius: var(--radius-sm); border: 2px solid var(--accent);
}
.pick-preview-tag {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
    padding: 5px 10px; border-radius: 999px;
}

/* Storiet 9:16 + etiketa "u përdor" */
.pick-grid-tall .pick { aspect-ratio: 9 / 16; }
.pick-grid-tall { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 900px) { .pick-grid-tall { grid-template-columns: repeat(5, 1fr); } }
.used-tag {
    position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 2;
    background: rgba(43, 34, 26, 0.72); color: #fff; font-size: 10px; font-weight: 600;
    padding: 3px 6px; border-radius: 7px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}

/* Streak-flaka kur rritet */
.streak-pop { animation: streak-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes streak-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-6deg); } 100% { transform: scale(1); } }

/* Pika e sotme te day-chip */
.day-chip { position: relative; }
.day-chip.day-today:not(.day-on)::after {
    content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 999px; background: var(--accent);
}

/* Toast me Zhbëje */
.toast { display: flex; align-items: center; gap: 14px; }
.toast-undo-form { margin: 0; }
.toast-undo {
    display: inline-flex; align-items: center; gap: 5px;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--flame-soft);
    background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap;
}

/* Pika te tab-i Sot */
.tab-ic { position: relative; display: inline-flex; }
.tab-dot {
    position: absolute; top: -4px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
    border-radius: 999px; line-height: 1;
}

/* Orët e gatshme te postimi shtesë */
.time-presets { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.time-preset.sel { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.target small { flex: 1; font-size: 13.5px; font-weight: 600; }
.person-chip { display: inline-flex; align-items: center; gap: 5px; }

/* Kutia "Më shumë opsione" si kartë e vërtetë */
.more-box {
    background: var(--sunken); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 16px; margin-top: 10px;
}

/* Logoja e vërtetë te hyrja */
.login-logo { display: block; width: min(250px, 68%); margin: 0 auto 6px; color: var(--accent); }
.login-logo svg { width: 100%; height: auto; display: block; }

/* Siguri responsive për ekranet e ngushta */
.page-head-row > div { min-width: 0; }
.page-head-row h2 { overflow-wrap: anywhere; }
.next-body, .error-body { min-width: 0; }
.toast { flex-wrap: wrap; }
.error-card { flex-wrap: wrap; }
.next-when { flex: 0 0 auto; }

/* Koka e postimit si kartë e plotë */
.head-card { padding: 14px; margin-bottom: 12px; }
.head-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none;
    margin-bottom: 10px;
}
.head-card h2 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.head-card .page-sub { margin-top: 3px; }
.head-card .progress-row { margin-top: 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; }


/* Push-banner */
.push-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.push-ic { color: var(--accent); flex: 0 0 auto; }
.push-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.push-text small { color: var(--muted); }
.push-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; }

/* Nesër pa përmbajtje */
.tomorrow-card { padding: 12px 14px; }
.tomorrow-head { display: flex; align-items: center; gap: 7px; color: var(--warn-ink); margin-bottom: 4px; font-size: 14.5px; }
.tomorrow-ok .tomorrow-head { color: var(--ok); margin-bottom: 0; }
.tomorrow-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; text-decoration: none; color: inherit; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tomorrow-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14.5px; }

/* Miniatura e përmbajtjes në listën e ditës */
.pkg-ready { display: inline-flex; align-items: center; gap: 7px; }
.task-thumb { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); }
.task-thumb-video { display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--muted); }

/* Flakët e ekipit */
.lead-card { padding: 12px 14px; }
.lead-label { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.lead-rows { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-row { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; background: var(--sunken); border-radius: 999px; padding: 5px 12px 5px 6px; }
.lead-top { background: var(--warn-soft); color: var(--warn-ink); }
.lead-flame { display: inline-flex; align-items: center; gap: 2px; color: var(--flame); font-weight: 800; }

/* Citatet e përdorura */
.text-pick-used { opacity: 0.6; }
.text-pick-when { display: block; color: var(--warn-ink); font-size: 11.5px; margin-top: 3px; }

.group-done-form { margin-top: 10px; }

/* Kutitë e kanaleve: checkbox-i mos të fryhet nga rregulli .field input */
.target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.target { min-width: 0; }
.target input, .field-check input {
    width: 22px; height: 22px; min-height: 0; padding: 0; flex: 0 0 auto;
}
.target small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Logot e zeza (X, TikTok) të bardha në temën e errët */
html[data-theme="dark"] .ch-x path,
html[data-theme="dark"] .ch-tiktok path { fill: #fff; }

/* Zgjedhja e kanaleve: vetëm ikonat, pa tekst */
.target-grid-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.target-grid-icons .target { justify-content: center; padding: 12px 0; position: relative; }
.target-grid-icons .target input { position: absolute; opacity: 0; pointer-events: none; }
.target-grid-icons .conn-ic { width: 46px; height: 46px; }
.target-grid-icons .target.sel::after,
.target-grid-icons .target:has(input:checked)::after {
    content: ''; position: absolute; top: 7px; right: 7px;
    width: 10px; height: 10px; border-radius: 999px; background: var(--accent);
}

/* Koka: vetëm logoja e plotë */
.brand-logo { display: inline-flex; color: var(--accent); }
.brand-logo svg { height: 38px; width: 94px; display: block; }

/* Profili te Më shumë */
.profile-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; }
.profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-info strong { font-size: 17px; }
.view-as-card { margin-bottom: 12px; }

/* Avatari i profilit në kokë, çon te Më shumë */
.top-avatar { display: inline-flex; border-radius: 999px; text-decoration: none; }
.top-avatar .avatar { border: 2px solid var(--card); box-shadow: var(--shadow-card); }
.top-avatar:active { transform: scale(0.92); }

/* Logot e kanaleve nëpër LISTA: minimale, njëngjyrëshe (format origjinale, vetëm pa ngjyra).
   Ngjyrat e plota mbeten vetëm ku kanali është fokusi: postimi/Kanalet, Lidhjet, zgjedhja e kanaleve. */
.post-chs .ch-ic path,
.task-when .ch-ic path,
.next-card .ch-ic path,
.mini-task .ch-ic path { fill: var(--muted); stroke: none; }
.post-chs .ch-mini { color: var(--muted); }
.task-when .ch-badge,
.next-card .ch-badge { background: var(--sunken); color: var(--muted); }


/* Kalimet mes faqeve u hoqën: shkaktonin ngrirje në iOS Safari */

/* Lightbox */
.lightbox { cursor: zoom-in; }
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 90; background: rgba(20, 15, 12, 0.92);
    display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.lightbox-overlay img { max-width: 94vw; max-height: 92vh; border-radius: 14px; }

/* Offline */
.offline-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 95;
    background: var(--warn-ink); color: #fff; text-align: center;
    font-size: 13.5px; font-weight: 700; padding: 8px 12px;
}

/* 49: unaza fokusi për tastierë */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* 42: kur admini sheh si dikush tjetër, korniza mban unazë */
body:has(.view-as-banner) .shell { box-shadow: 0 0 0 3px var(--accent), var(--shadow-float); }

/* 19: Ruaj gjithmonë i dukshëm */
.form-card > .btn-big[type=submit] {
    position: sticky; bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 5;
    box-shadow: var(--shadow-lift);
}
@media (min-width: 700px) { .form-card > .btn-big[type=submit] { bottom: 18px; } }

/* 3: festë e vogël kur dita mbyllet 100% */
.progress-done { animation: card-glow 0.9s ease; border: 1.5px solid color-mix(in srgb, var(--ok) 45%, transparent); }
@keyframes card-glow { 0% { transform: scale(0.98); } 55% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* 13: rreshtat e kryer në Java */
.post-count-ok { color: var(--ok); }

/* 11: dy slote në të njëjtën orë ngjiten */
.post-row-sametime { margin-top: -6px; }
.post-row-sametime .post-time { visibility: hidden; }

/* 9/10: pikat e ditëve + progresi i javës */
.day-chip .chip-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 999px; }
.chip-dot-late { background: var(--accent); }
.chip-dot-ok { background: var(--ok); }
.week-progress { color: var(--muted); font-size: 13.5px; font-weight: 600; }

/* 15: kanali postohet vetë */
.badge-auto { background: var(--ok-soft); color: var(--ok); }

/* 18: numëruesi i shkronjave për X */
.char-count { font-size: 12px; color: var(--muted); text-align: right; margin-top: 4px; }
.char-count-over { color: var(--accent); font-weight: 700; }

/* 12: shënimi i shpejtë nga rreshti (desktop, në hover) */
.row-check {
    display: none; width: 34px; height: 34px; border-radius: var(--radius-xs);
    border: 1.5px solid var(--line); background: var(--card); color: var(--ok);
    cursor: pointer; align-items: center; justify-content: center;
}
@media (hover: hover) and (min-width: 700px) {
    .post-row:hover .row-check { display: inline-flex; }
    .post-row:hover .post-count, .post-row:hover .mini-status.st-late { display: none; }
}
.day-chip:has(.chip-dot).day-today::after { display: none; }

/* Arkiva: filtrat + drop-zona */
.arkiva-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.arkiva-filters .btn.sel { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
body.dropping::after {
    content: 'Lësho këtu për ngarkim'; position: fixed; inset: 12px; z-index: 80;
    border: 3px dashed var(--accent); border-radius: 24px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: var(--accent); pointer-events: none;
}
.bulk-bar { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 12px; }
.bulk-bar select { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--field); font: inherit; color: var(--ink); }
body.bulk-mode .bulk-box { width: 21px; height: 21px; accent-color: var(--accent); flex: 0 0 auto; }
.avatar-img { object-fit: cover; border-radius: 999px; }
.profile-photo { position: relative; cursor: pointer; display: inline-flex; }
.photo-edit {
    position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; border-radius: 999px; border: 2px solid var(--card);
}
.pass-wrap { position: relative; display: block; }
.pass-wrap input { padding-right: 48px; }
.pass-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); padding: 10px; cursor: pointer; }
.stage-bar { display: block; max-width: 180px; margin-top: 6px; }
.stage-bar .bar-fill { display: block; height: 100%; }
.claim-form { margin: 0; }
.notfound-card { gap: 12px; padding: 40px 24px; }

/* ---------- Vala e 49-ve ---------- */

/* Muaji */
.month-card { padding: 12px; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.month-day {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 2px 8px; border-radius: var(--radius-xs); text-decoration: none; color: inherit;
    border: 1px solid transparent; min-height: 52px;
}
.month-day:active { background: var(--sunken); }
.month-out { opacity: 0.35; }
.month-today { border-color: var(--accent); }
.month-num { font-weight: 700; font-size: 14px; }
.month-info { font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--sunken); border-radius: 999px; padding: 1px 6px; }
.month-info.month-ok { background: var(--ok-soft); color: var(--ok); }
.month-info.month-late { background: var(--accent-soft); color: var(--accent); }

/* Kommentare */
.comments-card { padding: 12px 14px; }
.comment-row { display: flex; gap: 9px; padding: 7px 0; align-items: flex-start; }
.comment-row .avatar { flex: 0 0 auto; margin-top: 2px; }
.comment-body { display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; min-width: 0; }
.comment-body small { font-size: 11.5px; }
.comment-form { display: flex; gap: 8px; margin-top: 8px; }
.comment-form input[type=text] {
    flex: 1; min-width: 0; font: inherit; padding: 11px 13px; min-height: 44px;
    background: var(--field); border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink);
}
.comment-form input[type=text]:focus { outline: none; border-color: var(--accent); }
.comment-send { width: 44px; height: 44px; border-radius: 999px; }

/* Durchsage + Onboarding + Events */
.announce-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--flame) 45%, transparent); }
.onboard-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--muted); font-size: 14.5px; }
.onboard-ok { color: var(--ok); }

/* Arkivi i postimeve */
.archive-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.archive-body { color: var(--muted); font-size: 13.5px; }

/* Ndjekësit */
.follower-row .follower-ch { display: flex; align-items: center; gap: 8px; }
.trend-up { color: var(--ok); font-weight: 700; }
.trend-down { color: var(--accent); font-weight: 700; }

/* Vorrat + Kosh */
.supply { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.supply-low { color: var(--warn-ink); font-weight: 700; }

/* Mockup */
.mockup-card { display: flex; justify-content: center; padding: 16px; }
.mockup-phone { width: min(300px, 100%); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--field); }
.mockup-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: 13px; }
.mockup-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--sunken); }
.mockup-cap { padding: 9px 11px; font-size: 12.5px; line-height: 1.4; }

/* Kleinkram */
.dup-row { display: flex; gap: 8px; }
.dup-row input { flex: 1; }
.revision-row { font-size: 12.5px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.error-log { font-size: 11.5px; max-height: 60vh; overflow: auto; }
.extra-grid .pick { aspect-ratio: 1; }
.extra-media summary { margin: 8px 0 6px; }
.kb-focus { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.swap-card { border: 1.5px solid color-mix(in srgb, var(--ok) 40%, transparent); }

/* ---------- Minimal-Pass ---------- */
.line-card { padding: 0; overflow: hidden; }
.line-summary {
    display: flex; align-items: center; gap: 9px; padding: 13px 15px;
    font-weight: 700; font-size: 14.5px; cursor: pointer; list-style: none; color: var(--ink);
}
.line-summary::-webkit-details-marker { display: none; }
.line-summary .ic:last-child { margin-left: auto; color: var(--muted); transition: transform 0.18s; }
details[open] > .line-summary .ic:last-child { transform: rotate(180deg); }
.line-warn { color: var(--warn-ink); }
.line-card .tomorrow-row, .line-card .onboard-row { margin: 0 15px; }
.line-card .comment-form { margin: 4px 15px 13px; }
.line-card > *:last-child:not(summary) { padding-bottom: 6px; }

/* Erledigte Kanäle eingeklappt */
.done-fold summary { padding: 11px 10px; font-size: 13.5px; color: var(--ok); }
.done-fold .ic:last-child { margin-left: 6px; }
.row-all-done {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    font: inherit; font-weight: 700; font-size: 14.5px; color: var(--ok);
    background: transparent; border: none; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    padding: 13px 10px; cursor: pointer;
}
.group-done-row { margin: 0; }

/* Picker-Suche hinter Icon */
.pick-tools .pick-search { display: none; }
.pick-tools.tools-open .pick-search { display: flex; }
.pick-tools.tools-open .search-toggle { display: none; }

/* Arkiva-Filter hinter Icon */
.arkiva-filters .filters-inner { display: none; gap: 7px; flex-wrap: wrap; }
.arkiva-filters.filters-open .filters-inner { display: flex; }
.arkiva-filters.filters-open .filter-toggle { display: none; }

/* ---------- Minimal-Pass 2 ---------- */
.slim-progress { display: flex; align-items: center; gap: 12px; margin: 2px 4px 12px; }
.slim-progress-text { font-size: 13.5px; font-weight: 700; color: var(--muted); flex: none; }
.progress-done .slim-progress-text { color: var(--ok); }
.slim-bar { flex: 1; margin: 0; display: block; }
.slim-bar .bar-fill { display: block; height: 100%; }
.storage-line { font-size: 12.5px; text-align: center; margin: 4px 0 10px; }

.person-card .line-summary { padding: 0; }
.person-card .line-summary .ic:last-child { margin-left: auto; }

.older-comments summary { padding: 8px 0; font-size: 13px; color: var(--muted); }
.err-more { cursor: pointer; font-size: 12.5px; list-style: none; }
.err-more::-webkit-details-marker { display: none; }
.reuse-body { margin: 0 15px 8px; }
.reuse-btn { margin: 0 15px 13px; }
.howto-body { padding: 0 15px 13px; }
.tr-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tr-edit textarea {
    width: 100%; font: inherit; font-size: 14.5px; line-height: 1.55; color: var(--ink);
    background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-xs);
    padding: 11px 13px; resize: vertical; min-height: 160px;
}
.tr-edit textarea:focus { outline: none; border-color: var(--accent); }
.tr-edit .tr-why {
    width: 100%; font: inherit; font-size: 14px; color: var(--ink);
    background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-xs);
    padding: 10px 12px;
}
.tr-edit .tr-why:focus { outline: none; border-color: var(--accent); }
.line-summary-plain { padding: 0 0 6px; cursor: default; }
.quote-edit { padding: 0 4px 12px; }
.auto-note { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 0 0 10px; }
.kontribut-num { font-weight: 800; font-size: 15px; color: var(--accent); }
.comm-done { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; margin: 2px 0 0; }
.feature-intro { font-size: 15px; line-height: 1.6; color: var(--ink); }
.feature-row { padding: 9px 15px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.feature-row:first-child { border-top: 0; }
.feature-row strong { display: block; font-size: 14.5px; font-weight: 700; }
.feature-row span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.feature-note { font-size: 12.5px; text-align: center; margin: 4px 0 8px; }
.stock-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 15px; }
.stock-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.stock-num { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.stock-num.stock-short { color: var(--accent); }
.stock-when { padding: 2px 15px 4px; font-size: 12px; }
.tr-back-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 8px;
    font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.howto-body .setup-steps { margin-top: 8px; }
.announce-form { padding: 4px 15px 13px; display: flex; gap: 8px; }
.announce-form input[type=text] {
    flex: 1; min-width: 0; font: inherit; padding: 10px 13px;
    background: var(--field); border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink);
}

/* Dichtere Listen */
.task { padding: 11px 12px; }
.post-row { padding: 11px 14px; }
.text-list .text-pick { padding: 11px 13px; }
.section-label { margin-top: 15px; }
.comment-row { padding: 5px 0; }
.empty-card { padding: 20px 16px; gap: 7px; }
.form-card { gap: 13px; }
.mini-task { padding: 7px 0; }
.menu-card .menu-row { padding: 11px 10px; }

/* Udhëzuesi hap-pas-hapi për anëtarët */
.wizard-card { padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.wizard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.wizard-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; padding: 6px 0 2px; }
.wizard-step { display: flex; gap: 12px; padding: 10px 0 2px; }
.wizard-step .step-num { flex: none; }
.wizard-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wizard-step-body strong { font-size: 14.5px; }
.wizard-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.wizard-done { min-height: 46px; padding: 10px 22px; }
.wizard-detail { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-top: 10px; }

/* Fleta e profileve (avatar lart djathtas) */
.top-avatar-wrap { position: relative; }
.top-avatar { background: none; border: none; padding: 0; cursor: pointer; }
.no-scroll { overflow: hidden; }
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(25, 18, 14, 0.45);
    display: flex; align-items: flex-end; justify-content: center;
}
.avatar-sheet {
    width: 100%; max-width: 480px; max-height: 78vh;
    background: var(--card); border-radius: 22px 22px 0 0;
    display: flex; flex-direction: column;
    padding: 6px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-float);
}
@media (min-width: 700px) {
    .sheet-backdrop { align-items: center; }
    .avatar-sheet { border-radius: 22px; max-width: 400px; }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 8px; }
.sheet-head strong { font-size: 17px; }
.avatar-sheet-list { overflow-y: auto; flex: 1; }
.avatar-sheet form { margin: 0; }
.avatar-menu-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); text-align: left;
    appearance: none; -webkit-appearance: none; background: none; border: none;
    border-radius: var(--radius-xs); padding: 10px; cursor: pointer; text-decoration: none;
}
.avatar-menu-row span { flex: 1; min-width: 0; }
.avatar-menu-row:active { background: var(--sunken); }
.avatar-menu-row.sel { color: var(--accent); }
.avatar-menu-row .avatar { flex: 0 0 auto; }
.avatar-menu-more { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); margin-top: 6px; border-radius: 0; color: var(--muted); }

.folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.folder-grant { padding: 10px 12px; gap: 8px; }
.folder-grant small { font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autor-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.autor-chips .btn.sel { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.text-pick-autor { display: block; color: var(--muted); font-weight: 700; font-size: 12px; margin-top: 3px; }
#text-box .wizard-step { padding-top: 4px; }
.autor-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.sot-quote-form { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.see-all-row { font-weight: 700; color: var(--accent); }
.translation-text {
    white-space: pre-wrap; font-family: inherit; font-size: 14.5px; line-height: 1.55;
    color: var(--ink); background: var(--sunken); border-radius: var(--radius-xs);
    padding: 11px 13px; margin: 2px 0 4px;
}
.pool-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.pool-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }

/* Zinxhiri i punës */
.chain-bar { display: flex; align-items: center; gap: 0; margin: 10px 0 2px; }
.chain-step { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.chain-step small { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.chain-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 999px;
    background: var(--sunken); color: var(--muted); border: 2px solid transparent;
}
.chain-done .chain-dot { background: var(--ok-soft); color: var(--ok); }
.chain-done small { color: var(--ok); }
.chain-active .chain-dot { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); animation: chain-pulse 2s ease-in-out infinite; }
.chain-active small { color: var(--accent); }
.chain-wait .chain-dot { opacity: 0.5; }
.chain-link { flex: 1; height: 2px; background: var(--ok); margin: 0 4px 14px; min-width: 14px; }
.chain-link-open { background: transparent; border-top: 2px dashed var(--line); }
@keyframes chain-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); } }
.chain-note { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.chain-note-warn { color: var(--warn-ink); font-weight: 600; }
.chain-days { color: var(--warn-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .chain-active .chain-dot { animation: none; } }
.flow-card { padding: 12px 14px; }
.flow-done { opacity: 0.62; }
.flow-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flow-actions { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; }
.item-published { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); margin-top: 8px; }
.item-reject, .item-publish { margin-top: 8px; }
/* Detyrat brenda një karte: rreshta të sheshtë, jo karta brenda kartës */
.folded-tasks { padding: 0 0 6px; }
.folded-tasks .task {
    margin: 0; background: transparent; box-shadow: none; border: none;
    border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    border-radius: 0; padding: 10px 4px;
}
.folded-tasks .task .btn-check,
.folded-tasks .task .btn-undo { width: 40px; height: 40px; border-radius: 12px; }
.folded-tasks .task .btn-check .ic { width: 20px; height: 20px; }
.folded-tasks .task-title { font-size: 14.5px; }
.folded-tasks .ch-badge-sm { width: 28px; height: 28px; }

/* Hapat në kartat e punës: numra më të qetë */
.wizard-step .step-num {
    width: 24px; height: 24px; font-size: 12.5px; font-weight: 700;
    background: var(--sunken); color: var(--muted); border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.wizard-step { gap: 10px; padding: 8px 0 0; }
.wizard-step-body strong { font-size: 14px; }
.chain-bar { margin: 8px 0 0; }
.chain-step small { font-size: 10px; }
.chain-dot { width: 26px; height: 26px; }
.chain-note { font-size: 12px; margin-top: 5px; }
.role-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 700px) { .role-grid { grid-template-columns: 1fr 1fr; } }
.role-pick { padding: 10px 12px; gap: 10px; }
.role-pick small { font-size: 13.5px; font-weight: 600; flex: 1; }
.intro-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--flame) 40%, transparent); }
.slot-pick-form { margin: 0 0 7px; }
.slot-pick {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    font: inherit; background: var(--field); border: 1.5px solid var(--line);
    border-radius: var(--radius-xs); padding: 11px 13px; cursor: pointer; color: var(--ink);
}
.slot-pick:active { border-color: var(--accent); }
.slot-when { font-weight: 700; font-size: 13.5px; flex: 0 0 auto; }
.slot-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-ch { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.season-seg { margin-bottom: 10px; }
.season-seg .seg-item { text-decoration: none; }
.stat-line { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.stat-line .ic { vertical-align: -2px; }
/* Sot minimal: një kartë, një veprim */
.status-line { font-size: 15px; font-weight: 700; margin: 2px 0 12px; }
.one-card { display: flex; flex-direction: column; gap: 12px; }
.one-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.one-card .tr-edit { margin: 0; }
.queue-row {
    display: flex; align-items: center; gap: 9px; padding: 9px 15px;
    font-size: 14px; font-weight: 600; color: var(--muted);
    border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.queue-row .ic { flex: 0 0 auto; }
.done-line { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 12px 2px 0; }
.feed-hot span > small { color: var(--accent); font-weight: 700; }
.announce-banner { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.push-line { margin-top: 14px; }
.push-line .line-summary { background: none; border: 0; font: inherit; color: var(--ink); }

/* ============================================================
   Gramatika e komponentëve (rregulli: gjithçka njësoj, kudo)
   Karta: kokë 36px-ikonë + etiketë + titull + nëntitull.
   Butonat: primar 50px i plotë, dytësor 44px, të barabartë në rresht.
   Rreshtat: 52px min, ikonë 18 + tekst + chevron.
   ============================================================ */
.one-card { padding: 16px; gap: 14px; }
.one-card .wizard-head { display: flex; align-items: center; gap: 12px; }
.one-card .wizard-head .ch-badge { width: 38px; height: 38px; flex: 0 0 auto; }
.one-card .next-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.one-card .next-body small:first-child { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.one-card .next-body strong { font-size: 17px; line-height: 1.3; }
.one-card .next-body small.muted { font-size: 13px; }

/* dy madhësi butonash, jo më shumë */
.one-card .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; border-radius: var(--radius-sm); }
.one-card .btn-primary { min-height: 50px; width: 100%; font-size: 16px; }
.one-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.one-actions .btn { width: 100%; }

/* fushat brenda kartës: një stil */
.one-card textarea, .one-card input[type=text] {
    width: 100%; font: inherit; font-size: 15px; line-height: 1.55; color: var(--ink);
    background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-xs);
    padding: 12px 14px; resize: vertical;
}
.one-card textarea:focus, .one-card input[type=text]:focus { outline: none; border-color: var(--accent); }
.one-card .tr-edit { display: flex; flex-direction: column; gap: 10px; }
.one-card form { display: flex; flex-direction: column; gap: 10px; }
.one-card .field { gap: 6px; }
.one-card .field > span { font-size: 13px; font-weight: 700; color: var(--muted); }

/* rreshtat: një lartësi kudo (radha, meny, feed, palosje) */
.queue-row, .menu-row, .line-summary { min-height: 52px; }
.queue-row { padding: 0 16px; }
.line-summary { padding: 0 16px; font-size: 14.5px; }
.line-card > .menu-row, details.line-card .menu-row { margin: 0; }
.push-line .line-summary { min-height: 52px; padding: 0 16px; }

/* rreshtat e qetë poshtë: njësoj të dy */
.done-line { padding: 0 4px; min-height: 24px; }

/* ============================================================
   Sot: shtylla e fokusit. Një kolonë e qetë, ritëm 12px,
   njësoj në telefon dhe në desktop.
   ============================================================ */
.main.view-sot { display: flex; flex-direction: column; gap: 12px; }
.main.view-sot > * { margin-bottom: 0; }
.main.view-sot .page-head { margin: 6px 0 2px; }
.main.view-sot .done-line { margin: 0; padding: 2px 16px; }
.main.view-sot .push-line { margin: 0; }
.main.view-sot .status-line { margin: 0 2px; }

@media (min-width: 840px) {
    .main.view-sot {
        max-width: 680px; width: 100%;
        margin-inline: auto;
        padding: 30px 20px 90px;
        display: flex;
    }
    .view-as-banner { max-width: 640px; margin: 10px auto 0; border-radius: 999px; }
    .main.view-sot .page-head h2 { font-size: 26px; }
    .one-card { padding: 22px; gap: 16px; }
    .one-actions { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (min-width: 840px) {
    .main.view-sot .done-line { padding: 2px 22px; }
    .main.view-sot .status-line { margin: 0 4px; }
}

/* Zinxhirët: hartë vertikale me vijë të përbashkët */
.sys-card { padding: 16px; }
.sys-title { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; }
.sys-rail { position: relative; }
.sys-rail::before {
    content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px;
    width: 2px; background: color-mix(in srgb, var(--line) 80%, transparent);
}
.sys-step { position: relative; }
.sys-inner {
    display: flex; align-items: center; gap: 12px; min-height: 52px;
    padding: 4px 0; text-decoration: none; color: inherit;
}
.sys-dot {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 999px;
    background: var(--sunken); color: var(--muted);
    border: 2px solid var(--card);
}
.sys-dot-busy { background: var(--accent); color: #fff; }
.sys-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sys-body strong { font-size: 14.5px; }
.sys-body small { font-size: 12.5px; }
.sys-count {
    flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 800;
}
.sys-channels { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0 2px; }
.sys-ch { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sys-ch small { font-size: 11px; font-weight: 700; color: var(--muted); }
.sys-ch-manual small { color: var(--flame); }

/* ============================================================
   Zinxhirët: editori vizual (fituesi «Rrjedha» i jurisë)
   ============================================================ */
.zx-tot{ display:none; flex:none; align-items:center; gap:6px; background:var(--sunken); color:var(--muted); font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; }
.zx-tot{ display:inline-flex; }
.zx-tot-on{ background:var(--accent); color:#fff; }
.zx-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:0 2px 12px; }
.zx-legend span{ display:inline-flex; align-items:center; gap:6px; }
.zx-lg{ width:10px; height:10px; border-radius:50%; flex:none; }
.zx-lg-ring{ background:none; border:2px solid #b7a893; width:8px; height:8px; }
.zx-board{ position:relative; }
#zxWires{ position:absolute; top:0; left:0; pointer-events:none; z-index:6; overflow:visible; }
.zx-canvas{ display:flex; flex-direction:column; gap:16px; }
.zx-col{ display:contents; }
.zx-chain{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-card); }
.zx-chain-h{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:0 4px 12px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.zx-chain-h h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.zx-chain-h span{ font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }
.zx-chain-h b{ color:var(--accent); }
.zx-stations{ position:relative; display:flex; flex-direction:column; }
.zx-stations::before{ content:""; position:absolute; left:29px; top:26px; bottom:26px; width:2px; background:color-mix(in srgb, var(--line) 85%, transparent); border-radius:2px; }
.zx-station{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; padding:6px 8px; border-radius:var(--radius-sm); text-align:left; width:100%; background:none; border:0; font:inherit; color:inherit; cursor:pointer; }
.zx-station + .zx-station{ margin-top:8px; }
.zx-station:hover{ background:var(--sunken); }
.zx-station:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.zx-dot{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--card); border:2px solid #ddd2bd; display:flex; align-items:center; justify-content:center; transition:border-color .15s, box-shadow .15s; }
.zx-dot svg{ width:20px; height:20px; stroke:#63564a; }
.zx-station:hover .zx-dot{ border-color:#b7a893; }
.zx-station.zx-active .zx-dot{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.zx-station.zx-active .zx-dot svg{ stroke:var(--accent); }
.zx-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.zx-name{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zx-meta{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zx-meta svg{ width:13px; height:13px; stroke:var(--muted); flex:none; }
.zx-chev{ flex:none; }
.zx-chev svg{ width:16px; height:16px; stroke:#b7a893; }
.zx-pill{ font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; line-height:18px; }
.zx-red{ background:var(--accent); color:#fff; }
.zx-green{ background:var(--ok-soft); color:var(--ok); }
.zx-kdots{ display:inline-flex; align-items:center; gap:4px; }
.zx-kdots i{ width:7px; height:7px; border-radius:50%; border:2px solid #b7a893; display:block; }
.zx-merge{ color:var(--muted); font-size:13px; display:inline-flex; align-items:center; gap:5px; margin-top:2px; }
.zx-merge svg{ width:13px; height:13px; stroke:var(--muted); }
.zx-backdrop{ position:fixed; inset:0; background:rgba(43,33,24,.38); z-index:80; opacity:0; pointer-events:none; transition:opacity .25s; }
body.zx-open .zx-backdrop{ opacity:1; pointer-events:auto; }
.zx-panel{ position:fixed; z-index:90; background:var(--card); display:flex; flex-direction:column; left:0; right:0; bottom:0; max-height:86vh; border-radius:var(--radius) var(--radius) 0 0; border:1px solid var(--line); border-bottom:0; box-shadow:0 -12px 40px rgba(43,33,24,.18); transform:translateY(102%); transition:transform .3s cubic-bezier(.32,.72,.28,1); }
body.zx-open .zx-panel{ transform:translateY(0); }
.zx-grab{ width:44px; height:4px; border-radius:2px; background:var(--line); margin:8px auto 0; }
.zx-phead{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.zx-pico{ flex:none; width:44px; height:44px; border-radius:50%; border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 6%, transparent); }
.zx-pico svg{ width:20px; height:20px; stroke:var(--accent); }
.zx-ptit{ min-width:0; flex:1; }
.zx-ptit h3{ font-size:17px; font-weight:700; }
.zx-ptit p{ font-size:13px; color:var(--muted); margin-top:1px; }
.zx-px{ flex:none; width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--card); cursor:pointer; }
.zx-px:hover{ background:var(--sunken); }
.zx-px svg{ width:18px; height:18px; stroke:var(--muted); }
.zx-pbody{ overflow-y:auto; padding:16px; flex:1; }
.zx-sec{ margin-bottom:24px; }
.zx-sec:last-child{ margin-bottom:8px; }
.zx-secl{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.zx-secl svg{ width:14px; height:14px; stroke:var(--muted); }
.zx-secl em{ font-style:normal; color:var(--accent); }
.zx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.zx-chip{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.zx-chip svg{ width:14px; height:14px; stroke:currentColor; }
.zx-chip:hover{ border-color:#b7a893; }
.zx-chip.zx-on{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.zx-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--field); }
.zx-row + .zx-row{ margin-top:8px; }
.zx-rl{ font-size:14px; font-weight:600; }
.zx-rs{ font-size:13px; color:var(--muted); margin-top:1px; }
.zx-step{ display:flex; align-items:center; gap:8px; flex:none; }
.zx-step button{ width:32px; height:32px; border-radius:var(--radius-xs); border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.zx-step button:hover{ background:var(--sunken); }
.zx-step button svg{ width:15px; height:15px; stroke:var(--ink); }
.zx-step span{ min-width:64px; text-align:center; font-size:14px; font-weight:700; }
.zx-sw{ position:relative; flex:none; width:44px; height:26px; }
.zx-sw input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.zx-sw i{ position:absolute; inset:0; border-radius:999px; background:#e0d5c2; transition:background .15s; }
.zx-sw i::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(43,33,24,.25); transition:left .15s; }
.zx-sw input:checked + i{ background:var(--accent); }
.zx-sw input:checked + i::after{ left:21px; }
.zx-note{ font-size:13px; color:var(--muted); line-height:1.5; padding:12px; border:1px dashed var(--line); border-radius:var(--radius-sm); background:var(--field); }
.zx-pfoot{ padding:12px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.zx-btnp{ height:50px; width:100%; border-radius:var(--radius-sm); border:0; background:var(--accent); color:#fff; font:inherit; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.zx-btns{ height:44px; width:100%; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--card); font:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; }
.zx-btns:hover{ background:var(--sunken); }
html[data-theme="dark"] .zx-dot{ border-color:#4a4238; }
html[data-theme="dark"] .zx-sw i{ background:#4a4238; }
@media (min-width:900px){
    .zx-canvas{ flex-direction:row; align-items:flex-start; gap:24px; }
    .zx-col{ display:flex; flex-direction:column; gap:24px; flex:1; min-width:0; }
    .zx-panel{ left:auto; top:0; right:0; bottom:0; width:400px; max-height:none; border-radius:0; border:0; border-left:1px solid var(--line); box-shadow:-16px 0 48px rgba(43,33,24,.14); transform:translateX(102%); }
    body.zx-open .zx-panel{ transform:translateX(0); }
    .zx-grab{ display:none; }
    .main.view-zinxhiret{ max-width:1240px; }
}
/* Ndihma e parë e Zinxhirëve */
.zx-intro{ padding:16px; margin-bottom:12px; }
.zx-intro-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.zx-intro-head strong{ font-size:15px; }
.zx-intro-steps{ list-style:none; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.5; margin:0 0 12px; }
.zx-intro-steps b{ color:var(--accent); }
.zx-try{ width:100%; }
@keyframes zx-pulse { 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 25%, transparent);} 50%{ box-shadow:0 0 0 7px transparent;} }
.zx-teach .zx-station:nth-child(2) .zx-dot{ animation:zx-pulse 1.8s ease-in-out infinite; border-color:var(--accent); }
.zx-btnp:disabled{ background:var(--sunken); color:var(--muted); cursor:default; }
.zx-btnp:disabled svg{ stroke:var(--muted); }