:root{
  --bg:#F4F6F4; --surface:#FFFFFF; --soft:#F8FAF8; --line:#DDE3DF; --line2:#EEF2EF;
  --text:#14201A; --muted:#5B6B62; --accent:#146C43; --accent-dark:#0E4F31; --on-accent:#FFFFFF;
  --chip-line:#C9D3CD; --bar:#0F1A15; --bar-text:#F3F1EA; --bar-muted:#A9B8AF;
  --warn:#D98B12; --ok:#1E9E5A; --danger:#B42318; --pink-bg:#FBE3EE; --pink-text:#8A1F52;
  --radius:12px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.45;
  overflow-x:clip;-webkit-text-size-adjust:100%;touch-action:manipulation}
a{color:var(--accent)} a:hover{color:var(--accent-dark)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0}
.loading{padding:48px 24px;color:var(--muted)}

/* top bar */
.bar{background:var(--bar);color:var(--bar-text)}
.bar-in{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.brand{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--bar-text);text-decoration:none}
.brand:hover{color:#fff}
.bar-nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:15px}
.bar-nav a{color:#CFE8DA;text-decoration:none;padding:10px 4px}
.bar-nav a:hover,.bar-nav a.on{color:#fff;text-decoration:underline;text-underline-offset:4px}
.bar-user{color:var(--bar-muted);font-size:14px}
.show-pick{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid #2F4A3D;background:#16261F;color:var(--bar-text);font-weight:600}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:28px 20px 72px;display:flex;flex-direction:column;gap:22px}
.head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between}
.head h1{font-family:var(--serif);font-size:34px;line-height:1.1}
.sub{color:var(--muted);font-size:15px;margin-top:4px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:8px;border:1px solid rgba(0,0,0,.15)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line)}
.tabs a{padding:12px 14px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.card-h{padding:12px 18px;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted);background:var(--soft);border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;text-transform:uppercase}
.card-b{padding:16px 18px}
.cols{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.col-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px}
.col-side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:18px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.muted{color:var(--muted)} .small{font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spread{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:10px}
hr{border:0;border-top:1px solid var(--line2);margin:6px 0}

/* buttons & inputs */
.btn{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--chip-line);background:var(--surface);color:var(--text);
  font-weight:600;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#9FB1A7}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-dark)}
.btn.danger{color:var(--danger);border-color:#E7B4AE}
.btn.small{min-height:36px;padding:0 12px;font-size:14px}
.btn.icon{width:40px;min-height:40px;padding:0}
.btn:disabled{opacity:.5;cursor:default}
label.f{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--text)}
label.f .hint{font-weight:400;color:var(--muted);font-size:13px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{
  min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--chip-line);background:#fff;width:100%;font-size:16px}
input:focus,select:focus,textarea:focus,.btn:focus-visible,.chip:focus-visible,a:focus-visible{outline:3px solid #7FB89A;outline-offset:2px}
input[type=color]{width:52px;height:44px;padding:2px;border:1px solid var(--chip-line);border-radius:10px;background:#fff}
.check{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.check input{width:20px;height:20px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

/* status */
.status{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:16px 18px}
.status .s{display:flex;gap:12px;align-items:center;min-width:0}
.light{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.light.ok{background:var(--ok)} .light.warn{background:var(--warn)} .light.none{background:#9AA8A1}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:1px}
.tag.cover{background:var(--pink-bg);color:var(--pink-text)}
.tag.ok{background:#DFF3E7;color:#14562F} .tag.warn{background:#FCEBCB;color:#7A4A05} .tag.grey{background:#ECEFED;color:#3E4D45}
.err{color:var(--danger);font-size:14px;font-weight:600}
.notice{padding:12px 14px;border-radius:10px;background:#FFF7E6;border:1px solid #F3D9A4;font-size:14px}
.linkbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border-radius:10px;background:var(--soft);border:1px dashed var(--chip-line)}
.linkbox code{flex:1 1 280px;min-width:0;overflow-wrap:anywhere;font-size:13px}

/* performance picker */
.perfs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.perf{flex:0 0 auto;min-height:56px;padding:6px 14px;border-radius:10px;border:1px solid var(--chip-line);background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left}
.perf .pl{font-weight:600;font-size:14px;white-space:nowrap}
.perf .ps{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.perf.on{border-color:var(--accent);background:var(--accent);color:#fff}
.perf.on .ps{color:#CFE8DA}
.perf .light{width:9px;height:9px}

/* role rows & chips */
.role{display:flex;flex-wrap:wrap;gap:10px 18px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.role:last-child{border-bottom:0}
.role-name{flex:0 0 220px;display:flex;flex-direction:column;gap:6px}
.role-name b{font-size:16px}
.chips{flex:1 1 320px;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--chip-line);background:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-size:15px}
.chip .u{font-size:12px;color:var(--muted)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip.on .u{color:#CFE8DA}
.chip svg{flex-shrink:0}
.sticky-actions{position:sticky;bottom:0;z-index:5;background:rgba(244,246,244,.96);border-top:1px solid var(--line);
  margin:0 -20px;padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

/* roles editor */
.redit{padding:14px 18px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.redit:last-child{border-bottom:0}
.person{display:flex;gap:8px;align-items:center}
.person input[type=text]{flex:1;min-width:0}
.person .usual{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);min-height:44px;white-space:nowrap}
.person .usual input{width:20px;height:20px}

/* tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:10px 14px;white-space:nowrap}
td{padding:12px 14px;border-top:1px solid var(--line2);vertical-align:middle}

/* sign-in pages */
.auth{max-width:440px;margin:56px auto;padding:0 20px}
.auth .card-b{padding:24px;display:flex;flex-direction:column;gap:14px}
.auth h1{font-family:var(--serif);font-size:30px}
.qr{display:flex;justify-content:center;padding:10px;background:#fff;border-radius:10px;border:1px solid var(--line)}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.code-input{font-size:28px !important;letter-spacing:8px;text-align:center}

/* schedule editor */
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.day{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.day b{font-size:14px}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:14px}
.tchip button{border:0;background:transparent;cursor:pointer;width:28px;height:28px;border-radius:50%;color:var(--muted)}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#14201A;color:#fff;padding:12px 18px;border-radius:10px;
  font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100% - 32px);z-index:50}
#toast.show{opacity:1}
#toast.bad{background:var(--danger)}

@media (max-width:640px){
  .head h1{font-size:28px}
  .role-name{flex-basis:100%}
  .wrap{padding:20px 14px 72px}
  .sticky-actions{margin:0 -14px;padding:10px 14px}
}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- slide editor ---- */
.ed{padding:12px 16px 40px;display:flex;flex-direction:column;gap:12px}
.ed-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.ed-top input[type=number]{min-height:38px}
.ed-body{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.ed-layers{flex:0 0 260px;min-width:220px;max-height:calc(100vh - 150px);overflow:auto}
.ed-props{flex:0 0 320px;min-width:260px;max-height:calc(100vh - 150px);overflow:auto}
.ed-props input[type=number],.ed-props input[type=text],.ed-props select,.ed-props textarea{min-height:38px;font-size:15px}
.ed-canvas{flex:1 1 480px;min-width:0}
.ed-holder{position:relative;margin:0 auto;background:#000;box-shadow:0 0 0 1px var(--line),0 6px 24px rgba(0,0,0,.18);overflow:hidden;touch-action:none;user-select:none}
.ed-stage{transform-origin:0 0}
.ed-ov{position:absolute;inset:0;pointer-events:none}
.ed-sel{position:absolute;border:2px solid #4DA3FF;box-sizing:border-box;pointer-events:none}
.ed-h{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #4DA3FF;box-sizing:border-box;pointer-events:auto}
.ed-h-nw{left:-7px;top:-7px;cursor:nwse-resize}.ed-h-ne{right:-7px;top:-7px;cursor:nesw-resize}
.ed-h-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.ed-h-se{right:-7px;bottom:-7px;cursor:nwse-resize}
.ed-h-n{left:calc(50% - 6px);top:-7px;cursor:ns-resize}.ed-h-s{left:calc(50% - 6px);bottom:-7px;cursor:ns-resize}
.ed-h-w{top:calc(50% - 6px);left:-7px;cursor:ew-resize}.ed-h-e{top:calc(50% - 6px);right:-7px;cursor:ew-resize}
.ed-lrow{display:flex;align-items:center;gap:2px;padding:2px 6px;border-bottom:1px solid var(--line2)}
.ed-lrow.on{background:#E6F1FB}
.ed-lsel{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;border:0;background:transparent;cursor:pointer;text-align:left;padding:0 4px}
.ed-lname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.ed-tag{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 6px;border-radius:6px;background:#ECEFED;color:#3E4D45}
.ed-roles{max-height:260px;overflow:auto;border:1px solid var(--line2);border-radius:8px;padding:6px}
.btn.icon.small{width:34px;min-height:34px}

/* ---- schedule week view ---- */
.wk-row{display:grid;grid-template-columns:90px 1fr 160px;gap:10px;align-items:center;margin:3px 0}
.wk-bar{position:relative;height:22px;border-radius:6px;background:#EEF2EF;overflow:hidden}
.wk-seg{position:absolute;top:0;bottom:0}
.wk-scale{display:flex;justify-content:space-between;margin-left:100px;margin-right:170px}
.wk-perfs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.wk-row{grid-template-columns:70px 1fr}.wk-perfs{display:none}.wk-scale{margin-left:80px;margin-right:0}}
.note{padding:12px 16px;border-radius:10px;background:var(--soft);border:1px solid var(--line);color:var(--muted)}
.note b{color:var(--text)}
.wk-seg{cursor:pointer}
.btn.primary .muted{color:inherit;opacity:.75}