/* =====================================================================
   Curling Platform — UI theme (matches the provided dashboard design)
   ===================================================================== */
:root{
    --violet:#6c5ce7; --violet-d:#5a4bd4; --violet-l:#a29bfe;
    --blue:#4d8dff; --blue-l:#74b9ff; --teal:#00cec9; --green:#00b894;
    --amber:#fdcb6e; --orange:#e17055; --pink:#fd79a8; --red:#ff6b81;
    --bg:#f3f4fb; --card:#ffffff; --ink:#1d2238; --ink-soft:#3c4263;
    --muted:#9296b0; --line:#eef0f7; --line-2:#f6f7fc;
    --dark:#11131f; --dark-2:#1b1e2e;
    --radius:20px; --radius-sm:14px; --radius-xs:10px;
    --shadow:0 18px 40px -24px rgba(45,40,110,.35);
    --shadow-sm:0 6px 18px -12px rgba(45,40,110,.4);
    --sidebar-w:248px;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}

/* ---------- Auth screens ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;
    background:linear-gradient(135deg,#edeefc,#f6f1ff 60%,#eafaf7)}
.auth-card{width:100%;max-width:420px;background:var(--card);border-radius:26px;box-shadow:var(--shadow);padding:2.6rem 2.4rem}
.auth-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1.8rem}
.auth-brand .logo-dot{width:36px;height:36px;border-radius:11px;background:conic-gradient(from 120deg,var(--violet),var(--teal),var(--pink),var(--violet))}
.auth-brand b{font-size:1.25rem;font-weight:800;letter-spacing:-.4px}
.auth-card h1{font-size:1.5rem;margin-bottom:.3rem}
.auth-card .lead{color:var(--muted);margin-bottom:1.6rem;font-size:.92rem}
.auth-card .actions-row{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem}

/* ---------- Layout shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--card);border-right:1px solid var(--line);
    display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40;transition:transform .25s}
.sidebar-head{display:flex;align-items:center;gap:.6rem;padding:1.4rem 1.5rem 1rem}
.sidebar-head .logo-dot{width:34px;height:34px;border-radius:10px;background:conic-gradient(from 120deg,var(--violet),var(--teal),var(--pink),var(--violet))}
.sidebar-head b{font-size:1.2rem;font-weight:800;letter-spacing:-.4px}
.nav{flex:1;overflow-y:auto;padding:.6rem .8rem}
.nav-section{font-size:.66rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:1rem .8rem .4rem;font-weight:700}
.nav a{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border-radius:12px;color:var(--ink-soft);
    font-weight:600;font-size:.92rem;margin-bottom:.15rem;transition:.15s;position:relative}
.nav a svg{width:19px;height:19px;min-width:19px;flex:0 0 19px;stroke-width:2}
.nav a > span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav a:hover{background:var(--line-2);color:var(--ink)}
.nav a.active{background:var(--dark);color:#fff;box-shadow:0 10px 22px -12px var(--dark)}
.nav a .badge-new{margin-left:auto;background:var(--violet-l);color:#fff;font-size:.6rem;padding:.1rem .4rem;border-radius:6px;font-weight:700;text-transform:uppercase}
.ai-card{margin:.8rem;padding:1.1rem;border-radius:18px;background:linear-gradient(150deg,#efeafe,#f6f0ff);position:relative;overflow:hidden}
.ai-card h4{font-size:.92rem;margin-bottom:.3rem}
.ai-card p{font-size:.74rem;color:var(--muted);line-height:1.4}
.ai-card .blob{position:absolute;right:-20px;bottom:-20px;width:80px;height:80px;border-radius:50%;
    background:radial-gradient(circle,var(--violet-l),transparent 70%);opacity:.5}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:1rem;padding:1.3rem 2rem .6rem;flex-wrap:wrap}
.topbar .page-title{font-size:1.6rem;font-weight:800;letter-spacing:-.6px}
.topbar .page-sub{color:var(--muted);font-size:.82rem}
.topbar .spacer{flex:1}
.topbar .icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--card);
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);transition:.15s}
.topbar .icon-btn:hover{background:var(--line-2);color:var(--violet)}
.topbar .icon-btn svg{width:19px;height:19px}
.user-chip{display:flex;align-items:center;gap:.6rem;padding:.3rem .3rem .3rem .8rem;border-radius:30px;border:1px solid var(--line);background:var(--card)}
.user-chip .nm{font-weight:700;font-size:.85rem}
.user-chip .av{width:36px;height:36px;border-radius:50%;background:var(--violet-l);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;overflow:hidden}
.topbar .ctx-switch{display:flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border:1px solid var(--line);border-radius:30px;background:var(--card);color:var(--muted)}
.ctx-switch select{border:none;background:none;font-weight:700;font-size:.85rem;color:var(--ink);cursor:pointer;padding:.15rem .2rem;max-width:170px}
.ctx-switch select:focus{outline:none;box-shadow:none}
.topbar .menu-toggle{display:none}

.content{padding:1rem 2rem 3rem;flex:1}

/* ---------- Cards & grid ---------- */
.grid{display:grid;gap:1.3rem}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:1.3rem}
.card{background:var(--card);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.card.dark{background:linear-gradient(160deg,var(--dark),var(--dark-2));color:#fff;border:none}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.card-head h3{font-size:1.05rem;font-weight:700}
.card-head .muted{color:var(--muted);font-size:.8rem}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}
.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9{grid-column:span 9}.col-12{grid-column:span 12}

/* ---------- KPI stat cards ---------- */
.stat{display:flex;flex-direction:row;align-items:center;gap:.9rem}
.stat .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.stat .ico svg{width:22px;height:22px;color:#fff}
.stat .stat-text{display:flex;flex-direction:column;min-width:0}
.stat .val{font-size:1.7rem;font-weight:800;letter-spacing:-1px;line-height:1.05}
.stat .lbl{color:var(--muted);font-size:.8rem;font-weight:600}
.card-compact{padding:1.05rem 1.2rem}
.bg-violet{background:var(--violet)}.bg-blue{background:var(--blue)}.bg-teal{background:var(--teal)}
.bg-green{background:var(--green)}.bg-amber{background:var(--amber)}.bg-orange{background:var(--orange)}
.bg-pink{background:var(--pink)}

/* ---------- Pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:30px;font-size:.74rem;font-weight:700}
.pill-green{background:#e4faf2;color:#0a8f6e}.pill-blue{background:#e8f1ff;color:#2f6fd6}
.pill-violet{background:#efeafe;color:var(--violet-d)}.pill-amber{background:#fff5e0;color:#b9821a}
.pill-grey{background:#f0f1f7;color:#6b7088}.pill-red{background:#ffe9ec;color:#d63a52}

/* ---------- Chart helpers ---------- */
.chart-box{position:relative;width:100%}
.bars{display:flex;align-items:flex-end;gap:.7rem;height:170px}
.bars .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;height:100%}
.bars .bar{width:100%;max-width:34px;border-radius:10px 10px 6px 6px;background:var(--line);align-self:flex-end;transition:.3s}
.bars .bar.full{background:linear-gradient(180deg,var(--blue),var(--blue-l))}
.bars .bar.lite{background:#e6effd}
.bars .bx{font-size:.72rem;color:var(--muted);font-weight:600}

/* ---------- Progress rings ---------- */
.rings{display:flex;justify-content:space-around;gap:1rem;flex-wrap:wrap}
.ring{position:relative;width:118px;text-align:center}
.ring svg{transform:rotate(-90deg)}
.ring .ring-val{position:absolute;top:42px;left:0;right:0;font-weight:800;font-size:1.15rem}
.ring .ring-lbl{margin-top:.5rem;color:var(--muted);font-size:.78rem;font-weight:600}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse}
table.data th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
    font-weight:700;padding:.7rem .8rem;border-bottom:1px solid var(--line)}
table.data td{padding:.85rem .8rem;border-bottom:1px solid var(--line-2);font-size:.9rem;vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:var(--line-2)}
table.data .row-actions{display:flex;gap:.4rem;justify-content:flex-end}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--violet-l);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;border-radius:12px;border:1px solid transparent;
    font-weight:700;font-size:.86rem;cursor:pointer;transition:.15s;background:var(--line-2);color:var(--ink-soft)}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet-d));color:#fff;box-shadow:0 10px 22px -12px var(--violet)}
.btn-dark{background:var(--dark);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink-soft)}
.btn-ghost:hover{background:var(--line-2)}
.btn-danger{background:#fff0f2;color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:.4rem .7rem;font-size:.78rem;border-radius:9px}
.btn-block{width:100%;justify-content:center}
.btn-icon{padding:.45rem;width:34px;height:34px;justify-content:center}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.3rem}
.form-row{display:flex;flex-direction:column;gap:.4rem}
.form-row.full{grid-column:1/-1}
label{font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.hint{font-size:.74rem;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=url],input[type=search],select,textarea{
    width:100%;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:11px;background:#fbfcff;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(108,92,231,.12)}
input[type=color]{width:48px;height:40px;padding:2px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
textarea{min-height:96px;resize:vertical}
.check{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink-soft)}
.check input{width:auto}
.form-actions{display:flex;gap:.7rem;margin-top:1.6rem}

/* ---------- Flash / alerts ---------- */
.flash{padding:.85rem 1.1rem;border-radius:13px;margin-bottom:1.2rem;font-size:.9rem;font-weight:600;display:flex;gap:.6rem;align-items:center}
.flash-success{background:#e6faf2;color:#0a8f6e}
.flash-error{background:#ffeef0;color:#d63a52}
.field-errors{list-style:none;margin:.4rem 0 0}
.field-errors li{color:var(--red);font-size:.78rem}

/* ---------- Page header ---------- */
.page-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:1.4rem;flex-wrap:wrap;gap:1rem}
.page-head:empty{display:none}
.page-head h2{font-size:1.35rem;font-weight:800;letter-spacing:-.4px}
.toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* ---------- Misc UI ---------- */
.empty{text-align:center;color:var(--muted);padding:3rem 1rem}
.empty svg{width:46px;height:46px;margin-bottom:.8rem;opacity:.5}
.tag-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.72rem;font-weight:700;color:#fff}
.stars{display:inline-flex;gap:.1rem;color:var(--amber)}
.stars svg{width:16px;height:16px}
.rate-form button{background:none;border:none;cursor:pointer;color:#d9dbe7;padding:0}
.rate-form button.on svg,.rate-form:hover button svg{color:var(--amber)}
.rate-form button svg{width:26px;height:26px}
.media-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem}
.media-thumb{border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;background:var(--line-2)}
.media-thumb img{height:90px;width:100%;object-fit:cover}
.media-thumb .doc{height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8rem}
.media-thumb .del{position:absolute;top:4px;right:4px}
.kanban{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.kanban .lane{background:var(--line-2);border-radius:16px;padding:.9rem;min-height:120px}
.kanban .lane h4{font-size:.85rem;margin-bottom:.6rem;color:var(--ink-soft)}
.kanban .item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin-bottom:.6rem;cursor:grab;box-shadow:var(--shadow-sm)}
.kanban .item.drag{opacity:.4}
.list-tile{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:14px;margin-bottom:.7rem;transition:.15s}
.list-tile:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.list-tile .tile-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.list-tile .tile-body{flex:1;min-width:0}
.list-tile .tile-body h4{font-size:.98rem;margin-bottom:.15rem}
.list-tile .tile-body p{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.video-card .frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin-bottom:.8rem}
.video-card iframe,.video-card video{width:100%;height:100%;border:none}
.modal-back{position:fixed;inset:0;background:rgba(20,18,40,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:1rem}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:20px;padding:1.8rem;width:100%;max-width:520px;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto}
.modal h3{margin-bottom:1.2rem}
.seg{display:inline-flex;background:var(--line-2);border-radius:12px;padding:.25rem}
.seg a{padding:.45rem .9rem;border-radius:9px;font-size:.82rem;font-weight:700;color:var(--muted)}
.seg a.active{background:#fff;color:var(--violet);box-shadow:var(--shadow-sm)}

/* ---------- List toolbar + view toggle ---------- */
.list-toolbar{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;flex-wrap:wrap}
.list-toolbar .lt-left{display:flex;align-items:center;gap:.7rem;flex:1 1 auto;min-width:0}
.list-toolbar .lt-left input[type=search]{max-width:300px;flex:1 1 200px}
.list-toolbar .lt-left select{max-width:220px}
.list-toolbar .lt-right{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.view-toggle{display:inline-flex;background:var(--line-2);border-radius:11px;padding:.25rem;gap:.15rem}
.view-toggle button{border:none;background:none;cursor:pointer;padding:.42rem .55rem;border-radius:8px;color:var(--muted);display:flex;align-items:center;transition:.15s}
.view-toggle button.active{background:#fff;color:var(--violet);box-shadow:var(--shadow-sm)}
.view-toggle button svg{width:18px;height:18px}

/* Content-level action toolbar (top-right inside content cards) */
.content-actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;flex-wrap:wrap}

/* Grid / list switchable item container */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.2rem}
.tr-list{display:flex;flex-direction:column;gap:.7rem}
.tr-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-sm);transition:.15s}
.tr-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tr-grid .tr-item{display:flex;flex-direction:column}
.tr-list .tr-item{display:flex;flex-direction:row;align-items:center;gap:1rem;padding:.85rem 1.1rem}
.tr-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 46px}
.tr-ico svg{width:22px;height:22px}
.tr-grid .tr-ico{margin-bottom:.7rem}
.tr-body{flex:1 1 auto;min-width:0}
.tr-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.tr-headline h3{font-size:1rem;margin-bottom:.15rem}
.tr-desc{color:var(--muted);font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tr-grid .tr-desc{min-height:1.2em}
.tr-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.tr-list .tr-body{display:flex;align-items:center;gap:1rem}
.tr-list .tr-headline{flex:0 0 30%;min-width:160px}
.tr-list .tr-headline h3{margin:0}
.tr-list .tr-desc{flex:1 1 auto}
.tr-list .tr-meta{margin-top:0;flex:0 0 auto;margin-left:auto}

/* Video items in the switchable container */
.frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.frame iframe,.frame video{width:100%;height:100%;border:none;display:block}
.vid-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff}
.tr-grid .vid-item{display:flex;flex-direction:column}
.tr-grid .vid-item .vid-frame{margin-bottom:.8rem}
.tr-grid .vid-item .vid-actions{margin-top:.8rem}
/* List view: keep a compact playable player on the left */
.tr-list .vid-item{align-items:center}
.tr-list .vid-item .vid-frame{flex:0 0 190px;width:190px;margin:0}
.tr-list .vid-item .vid-actions{margin-top:0;margin-left:auto}
.tr-list .vid-item .tr-body{display:flex;align-items:center;gap:1rem;width:100%}
.tr-list .vid-item .tr-headline{flex:1 1 auto}
@media(max-width:560px){.tr-list .vid-item{flex-direction:column;align-items:stretch}.tr-list .vid-item .vid-frame{width:100%;flex:none}}

/* Linked-video chips + picker modal (training form) */
.video-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .8rem}
.video-chip{display:inline-flex;align-items:center;gap:.45rem;background:#efeafe;color:var(--violet-d);
    border-radius:20px;padding:.35rem .4rem .35rem .8rem;font-size:.82rem;font-weight:600}
.video-chip .vc-x{border:none;background:rgba(0,0,0,.08);color:inherit;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}
.video-chip .vc-x:hover{background:var(--red);color:#fff}
.pick-list{max-height:340px;overflow-y:auto;margin-top:.4rem;display:flex;flex-direction:column;gap:.4rem}
.pick-row{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:11px}
.pick-row .pr-ico{width:34px;height:34px;border-radius:9px;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pick-row .pr-body{flex:1;min-width:0}
.pick-row .pr-body b{font-size:.9rem}
.pick-row.picked{opacity:.5}
.pick-row.picked [data-pick-add]{pointer-events:none}

/* Sequence detail (expanded steps with content + video inline) */
.seq-step{border:1px solid var(--line);border-radius:16px;padding:1rem 1.2rem;margin-bottom:.9rem}
.seq-step.pause{display:flex;align-items:center;gap:.9rem;background:var(--line-2)}
.seq-step .ss-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.seq-step .ss-head h3{font-size:1.05rem;flex:1;min-width:0}
.seq-step .ss-num{width:34px;height:34px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.seq-step .ss-main{flex:1}
.seq-step .ss-body{display:flex;gap:1.4rem;align-items:flex-start}
.seq-step .ss-text{flex:1 1 55%;min-width:0;color:var(--ink-soft)}
.seq-step .ss-text p{margin-bottom:.5rem}
.seq-step .ss-note{background:#fff7e6;border-radius:8px;padding:.4rem .6rem}
.seq-step .ss-media{flex:1 1 45%;display:flex;flex-direction:column;gap:.7rem;min-width:0}
.seq-step .ss-frame{width:100%}
.seq-step .ss-img{width:100%;border-radius:10px;border:1px solid var(--line)}
.total{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;font-weight:800;font-size:1.05rem}
@media(max-width:760px){.seq-step .ss-body{flex-direction:column}}

/* Sequence builder rows */
#seq-rows{display:flex;flex-direction:column;gap:.5rem}
.seq-row{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.seq-row.drag{opacity:.4}
.seq-grip{color:var(--muted);cursor:grab;display:flex;flex:none}
.seq-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.seq-main{flex:1 1 240px;min-width:160px}
.seq-main b{font-size:.92rem}
.seq-dur{flex:0 0 auto;max-width:120px}
.seq-durwrap{display:inline-flex;align-items:center;gap:.25rem;flex:0 0 130px;justify-content:flex-end;color:var(--muted);font-size:.8rem;white-space:nowrap}
.seq-durwrap .seq-dur{width:66px}
.seq-note{flex:1 1 220px;min-width:120px}
@media(max-width:560px){.seq-row{flex-wrap:wrap}.seq-note{flex:1 1 100%}}

/* ---------- Calendar (planning) ---------- */
.cal-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}
.cal-controls .cal-label{font-weight:800;font-size:1.05rem;margin:0 .3rem;min-width:170px}
.cal-nav{display:inline-flex;gap:.35rem}
.cal-scroll{overflow-x:auto}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:.6rem;min-width:760px}
.cal-day{background:var(--line-2);border-radius:14px;padding:.7rem;min-height:150px;display:flex;flex-direction:column}
.cal-day.today{outline:2px solid var(--violet);background:#f3f0ff}
.cd-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.cd-head .cd-wd{font-size:.7rem;color:var(--muted);font-weight:700;text-transform:uppercase}
.cd-head .cd-num{font-weight:800}
.cal-event{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.45rem .55rem;margin-bottom:.4rem;box-shadow:var(--shadow-sm)}
.cal-event .ce-top{display:flex;justify-content:space-between;align-items:center;gap:.3rem}
.cal-event .ce-time{color:var(--violet);font-weight:700;font-size:.7rem}
.cal-event .ce-title{font-size:.8rem;font-weight:600;display:block;margin-top:.1rem}
.clickable{cursor:pointer}
.cal-event.clickable:hover,.cm-ev.clickable:hover{filter:brightness(.97);outline:2px solid var(--violet-l)}
.list-tile.clickable:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.cal-event form{display:inline;line-height:0}
.cal-event .ce-del{border:none;background:none;color:#c9ccdb;cursor:pointer;padding:0;display:inline-flex}
.cal-event .ce-del:hover{color:var(--red)}
.cal-month{display:flex;flex-direction:column;gap:.4rem;min-width:680px}
.cm-head{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.cm-head span{font-size:.7rem;color:var(--muted);font-weight:700;text-transform:uppercase;text-align:center;padding:.2rem}
.cm-week{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.cm-cell{background:var(--line-2);border-radius:10px;padding:.4rem;min-height:96px}
.cm-cell.out{opacity:.45}
.cm-cell.today{outline:2px solid var(--violet);background:#f3f0ff}
.cm-cell .cm-num{font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.cm-ev{background:var(--violet);color:#fff;border-radius:6px;padding:.12rem .35rem;font-size:.66rem;margin-top:.22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-ev.seq{background:var(--teal)}

/* Rink occupancy grid (Hallenmanagement) */
/* Rink occupancy — day time-grid (resource columns, time axis) */
.daygrid{display:flex;gap:.5rem;min-width:680px;align-items:flex-start}
.dg-axis{flex:0 0 46px}
.dg-axis .dg-h{height:var(--hpx);font-size:.66rem;color:var(--muted);text-align:right;padding-right:.35rem;transform:translateY(-.55em);white-space:nowrap}
.dg-colwrap{flex:1 1 0;min-width:128px}
.dg-colhead{height:26px;display:flex;align-items:center;justify-content:center;gap:.3rem;font-weight:700;font-size:.76rem;color:var(--ink);white-space:nowrap;overflow:hidden}
.dg-colhead svg{opacity:.6}
.dg-col{position:relative;height:calc(var(--hpx) * var(--rows));background:var(--line-2);border-radius:10px;
    background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hpx) - 1px),#e3e6f2 calc(var(--hpx) - 1px),#e3e6f2 var(--hpx))}
.dg-ev{position:absolute;left:3px;right:3px;background:var(--blue);color:#fff;border-radius:7px;padding:.18rem .4rem;
    font-size:.66rem;line-height:1.2;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.dg-ev.seq{background:var(--teal)}
.dg-ev b{display:block;font-size:.68rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-ev .de-time{font-weight:800;opacity:.95}
.dg-ev .de-meta{display:block;opacity:.85;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Error page ---------- */
.error-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);padding:2rem}
.error-box{text-align:center;background:#fff;border-radius:24px;padding:3rem;box-shadow:var(--shadow);max-width:420px}
.error-box .error-code{font-size:4rem;font-weight:800;color:var(--violet)}
.error-box h1{margin:.4rem 0}
.error-box p{color:var(--muted);margin-bottom:1.4rem}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
    .col-3,.col-4,.col-5{grid-column:span 6}
    .col-7,.col-8,.col-9{grid-column:span 12}
}
@media(max-width:860px){
    :root{--sidebar-w:0px}
    .sidebar{transform:translateX(-100%);width:248px;box-shadow:var(--shadow)}
    .sidebar.open{transform:translateX(0)}
    .main{margin-left:0}
    .topbar .menu-toggle{display:flex}
    .cards{grid-template-columns:repeat(6,1fr)}
    .col-3,.col-4{grid-column:span 3}
    .col-5,.col-6,.col-7,.col-8,.col-9,.col-12{grid-column:span 6}
    .form-grid{grid-template-columns:1fr}
    .content,.topbar{padding-left:1.1rem;padding-right:1.1rem}
}
@media(max-width:520px){
    .cards{grid-template-columns:1fr}
    .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12{grid-column:span 1}
    .topbar .page-title{font-size:1.3rem}
}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(20,18,40,.4);z-index:35}
.sidebar-backdrop.open{display:block}

/* Reminder preference options (profile) */
.reminder-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}
.rem-opt{display:flex;align-items:flex-start;gap:.55rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;transition:border-color .12s,background .12s}
.rem-opt:hover{border-color:var(--violet-l)}
.rem-opt.sel{border-color:var(--violet);background:var(--violet-l)}
.rem-opt input{margin-top:.2rem;accent-color:var(--violet);flex:0 0 auto}
.rem-opt .ro-body{display:flex;flex-direction:column;gap:.15rem}
.rem-opt .ro-body b{font-size:.9rem}