/* Layout: staff = one-thumb phone column (status hero with the day strip, then the day's timeline, bottom tabs).
   Manager = side menu at >=900px, two-column panels at >=760px, stacked with bottom tabs below that.
   Identity: petrol blue (oil, machinery) + oil-sample amber; the "day strip" is the one bold element. */
:root{
  --ground:#EDF1F2; --surface:#FFFFFF; --surface-2:#E3EAED; --ink:#10212A; --ink-2:#4A5C66; --line:#D2DCE1;
  --accent:#0E4F61; --accent-mid:#6E9FAE; --accent-ink:#FFFFFF; --accent-soft:#D9EAF0; --accent-text:#0E4F61;
  --oil:#C98A1E; --oil-soft:#F4E4C4;
  --warn:#965300; --warn-soft:#F7E6CC;
  --danger:#A23128; --danger-soft:#F6DEDB;
  --ok:#1D6A4E; --ok-soft:#DAEEE5;
  --scrim:rgb(6 14 18 / .48);
  --shadow:0 1px 2px rgb(16 33 42 / .06), 0 12px 32px rgb(16 33 42 / .09);
  --display:'Bai Jamjuree','IBM Plex Sans Thai',system-ui,sans-serif;
  --body:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A1317; --surface:#111D23; --surface-2:#192A31; --ink:#E3ECEF; --ink-2:#9BAFB8; --line:#273A42;
    --accent:#6CC0D6; --accent-mid:#3D7C8D; --accent-ink:#04212A; --accent-soft:#143844; --accent-text:#8FD4E6;
    --oil:#E1A64A; --oil-soft:#3A2C14; --warn:#F2B35A; --warn-soft:#3A2911; --danger:#F29287; --danger-soft:#3D1A17;
    --ok:#7FD1AE; --ok-soft:#12352A; --scrim:rgb(0 0 0 / .6);
    --shadow:0 1px 2px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0A1317; --surface:#111D23; --surface-2:#192A31; --ink:#E3ECEF; --ink-2:#9BAFB8; --line:#273A42;
  --accent:#6CC0D6; --accent-mid:#3D7C8D; --accent-ink:#04212A; --accent-soft:#143844; --accent-text:#8FD4E6;
  --oil:#E1A64A; --oil-soft:#3A2C14; --warn:#F2B35A; --warn-soft:#3A2911; --danger:#F29287; --danger-soft:#3D1A17;
  --ok:#7FD1AE; --ok-soft:#12352A; --scrim:rgb(0 0 0 / .6);
  --shadow:0 1px 2px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .4);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.25;text-wrap:balance;font-weight:600}
p{margin:0}
svg.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sub{font-size:14px;color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{padding-inline:16px;padding-block:0 120px}

/* staff */
.staff{max-width:480px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
.s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.brand{font-family:var(--display);font-weight:700;letter-spacing:.12em;font-size:13px;color:var(--accent-text)}
.hello{font-size:24px}
.date{font-size:14px;color:var(--ink-2);text-align:right}
.s-right{display:flex;align-items:center;gap:10px}
.brand-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.logo{height:28px;width:auto;display:block}
.logo-slot{width:94px;height:28px;border:1.5px dashed var(--ink-2);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-2);flex:none}
.co{font-size:13px;color:var(--ink-2);font-weight:500}
.m-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bell{position:relative;background:var(--surface);border:1px solid var(--line)}
.dotn{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--warn);color:var(--surface);font-size:11px;font-weight:700;line-height:18px;padding:0 5px;text-align:center}
.offline{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:14px;font-weight:600}

.hero{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.eyebrow{font-size:15px;font-weight:600;color:var(--ink-2)}
.clock{font-family:var(--mono);font-weight:600;font-size:60px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-line{display:flex;flex-direction:column;gap:2px}
.status{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.3}

/* day strip: the signature element */
.strip{position:relative;height:46px}
.track{position:absolute;left:0;right:0;top:6px;height:22px;border-radius:7px;background:var(--ground);border:1px solid var(--line);overflow:hidden}
.track > span{position:absolute;top:0;bottom:0}
.work{background:var(--surface-2)}
.grace{background:repeating-linear-gradient(90deg,var(--accent-soft) 0 2px,transparent 2px 5px)}
.otz{background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 6px)}
.sx{border-radius:3px}
.k-cust{background:var(--accent)}
.k-office{background:var(--accent-mid)}
.k-late{background:var(--warn)}
.k-latep{background:repeating-linear-gradient(135deg,var(--warn) 0 3px,transparent 3px 6px)}
.k-ot{background:repeating-linear-gradient(135deg,var(--oil) 0 4px,var(--oil-soft) 4px 8px)}
.k-leave{background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,transparent 2px 7px);opacity:.55}
.sx.q{opacity:.45}
.now{position:absolute;top:0;height:34px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.now::before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.ticks{position:absolute;left:0;right:0;top:31px;height:14px;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ticks span{position:absolute;transform:translateX(-50%)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:8px;min-height:40px;font-size:14px;color:var(--ink-2);font-weight:500}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgb(0 0 0 / .14)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:16px;height:10px;border-radius:2px;display:inline-block}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 20px;border-radius:14px;border:0;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-size:18px;font-weight:600;text-decoration:none;width:100%;text-align:center;line-height:1.25}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:transparent;color:var(--accent-text);border:1.5px solid var(--accent)}
.btn.quiet{background:var(--surface-2);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--accent-text);padding:0 4px;width:auto;min-height:44px;justify-content:flex-start}
.btn.sm{min-height:44px;font-size:15px;border-radius:10px;padding:0 14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.icon-btn:hover{background:var(--surface-2)}

/* pills & blocks */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.accent{background:var(--accent-soft);color:var(--accent-text)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.block{display:flex;flex-direction:column;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-h h2{font-size:19px}
.kv4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kv4 div{display:flex;flex-direction:column;gap:2px}
.kv4 b{font-family:var(--display);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.kv4 b.accent{color:var(--accent-text)}
.kv4 span{font-size:13px;color:var(--ink-2)}

/* timeline */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl li{display:grid;grid-template-columns:48px 20px minmax(0,1fr);column-gap:10px}
.tl .t{font-family:var(--mono);font-size:14px;color:var(--ink-2);padding-top:14px;text-align:right;font-variant-numeric:tabular-nums}
.rail{position:relative}
.rail::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--line)}
.tl li:first-child .rail::before{top:22px}
.tl li:last-child .rail::before{bottom:auto;height:22px}
.tl li:only-child .rail::before{display:none}
.dot{position:absolute;left:3px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-2)}
.dot.done{background:var(--accent);border-color:var(--accent)}
.dot.here{border:4px solid var(--accent);background:var(--surface)}
.dot.plan{border-style:dashed}
.tl .body{padding-block:6px 12px;min-width:0}
.stop{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.stop.is-here{border:1.5px solid var(--accent)}
.stop.is-plan{background:transparent;border-style:dashed}
.stop-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.stop-h strong{font-size:16px}
.facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-2)}
.facts span{display:inline-flex;align-items:center;gap:6px}
.quote{font-size:14px;color:var(--ink);border-left:2px solid var(--line);padding-left:10px}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center}
.tb-in{display:flex;width:100%;max-width:520px}
.tabbar button{flex:1;min-height:54px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12.5px;color:var(--ink-2);position:relative;border-radius:10px}
.tabbar button[aria-current="page"]{color:var(--accent-text);font-weight:600}
.badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--warn);color:var(--surface);font-size:11px;font-weight:700;line-height:18px;padding:0 5px;text-align:center}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:15px;font-weight:600}
.hint{font-size:13px;color:var(--ink-2);line-height:1.5}
.input,.select,.textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;font-size:16px}
.textarea{min-height:84px;resize:vertical;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:15px;text-align:left;line-height:1.3}
.chip[aria-pressed="true"]{border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.err{font-size:14px;color:var(--danger);font-weight:600}
.note{border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.55;background:var(--accent-soft);color:var(--accent-text)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.effect{font-size:14px;font-weight:600;color:var(--warn)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:max-content}
.stepper button{width:52px;height:48px;border:0;background:var(--surface-2);font-size:22px;line-height:1}
.stepper output{min-width:72px;text-align:center;font-family:var(--display);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.photo{display:flex;align-items:center;justify-content:center;gap:10px;min-height:96px;border:1.5px dashed var(--ink-2);border-radius:14px;color:var(--accent-text);font-weight:600;cursor:pointer;background:var(--surface)}
.photo-img{width:100%;height:170px;object-fit:cover;border-radius:12px;display:block}
.gps{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.gps .ic{margin-top:2px;color:var(--accent-text)}
.fu{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.big-time{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.big-time .mono{font-size:40px;font-weight:600;line-height:1}

/* sheet */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.panel{background:var(--surface);width:100%;max-width:560px;max-height:92%;display:flex;flex-direction:column;border-radius:22px 22px 0 0;box-shadow:var(--shadow);animation:rise .2s ease-out}
@keyframes rise{from{transform:translateY(18px);opacity:.7}to{transform:none;opacity:1}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);align-self:center;margin-top:8px;flex:none}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 12px 0 20px;flex:none}
.panel-head h2{font-size:21px;padding-top:6px}
.panel-body{overflow:auto;padding:16px 20px 20px;display:flex;flex-direction:column;gap:20px;min-height:0}
.panel-foot{padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;flex:none}
@media (min-width:700px){.scrim{align-items:center;padding:24px}.panel{border-radius:22px;max-height:88%}.grab{display:none}}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--ground);padding:12px 16px;border-radius:12px;font-size:15px;font-weight:500;max-width:calc(100% - 32px);box-shadow:var(--shadow);text-align:center}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal .dow{font-size:12.5px;color:var(--ink-2);text-align:center;padding-block:4px}
.cal button{min-height:48px;border:0;border-radius:10px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;padding:0}
.cal button .d{width:6px;height:6px;border-radius:50%;background:transparent}
.cal button.has .d{background:var(--accent)}
.cal button.wk{color:var(--ink-2)}
.cal button.hol{color:var(--danger)}
.cal button.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.cal button[aria-pressed="true"] .d{background:var(--accent-ink)}

/* customers */
.search{position:relative}
.search .ic{position:absolute;left:12px;top:14px;color:var(--ink-2)}
.search input{padding-left:42px}
.clist{display:flex;flex-direction:column;gap:10px}
.citem{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-height:68px}
.cicon{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--accent-text)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:10px;border-top:1px solid var(--line)}
.contact:first-of-type{border-top:0}
.hist{display:flex;flex-direction:column;gap:4px;padding-block:12px;border-top:1px solid var(--line)}
.hist:first-of-type{border-top:0}
.tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile b{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--ink-2)}
.tile b.warn{color:var(--warn)}
.check{display:flex;gap:12px;align-items:flex-start;padding-block:10px;border-top:1px solid var(--line)}
.check:first-of-type{border-top:0}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.check.done .t1{text-decoration:line-through;color:var(--ink-2)}

/* manager */
.mgr{display:flex;flex-direction:column;gap:20px;max-width:1280px;margin-inline:auto}
.side{display:none}
.m-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.m-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.m-head h1{font-size:28px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid2{display:grid;gap:20px}
.person{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;row-gap:8px;padding-block:14px;border-top:1px solid var(--line)}
.person:first-of-type{border-top:0;padding-top:4px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--display);font-size:17px}
.p-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.p-top strong{font-size:16px}
.person .strip{grid-column:2}
.appr{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.appr-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.kind{font-size:13px;font-weight:600;color:var(--accent-text)}
.appr .row2 .btn{width:100%}
.done-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-block:10px;border-top:1px solid var(--line);font-size:15px}
.done-row:first-of-type{border-top:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.tbl th,.tbl td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{font-size:13px;font-weight:600;color:var(--ink-2);vertical-align:bottom}
.tbl tbody th{font-weight:600}
.tbl .warn{color:var(--warn);font-weight:600}
.tbl .muted{color:var(--ink-2);font-weight:400;font-size:12.5px;display:block}
.tbl.week td,.tbl.week th{text-align:left;white-space:normal;vertical-align:top;min-width:110px}
.rules{display:grid;gap:10px}
.rule{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding-block:10px;border-top:1px solid var(--line)}
.rule:first-of-type{border-top:0}
.rule .input,.rule .select{width:auto;min-width:110px}
.prog{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent)}
.empty{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:640px}
.empty ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

@media (min-width:760px){
  .grid2{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .ugrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .person{grid-template-columns:40px minmax(0,220px) minmax(0,1fr);align-items:center}
  .person .strip{grid-column:3}
}
@media (min-width:900px){
  .mgr{display:grid;grid-template-columns:228px minmax(0,1fr);gap:32px;align-items:start}
  .side{display:flex;flex-direction:column;gap:4px;position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}
  .side-brand{padding:4px 12px 16px;display:flex;flex-direction:column;gap:2px}
  .side button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font-size:15px;text-align:left}
  .side button:hover{background:var(--surface-2)}
  .side button[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgb(0 0 0 / .1)}
  .side .count{margin-left:auto;min-width:22px;height:22px;border-radius:11px;background:var(--warn);color:var(--surface);font-size:12px;font-weight:700;line-height:22px;text-align:center;padding:0 6px}
  .m-tabbar{display:none}
  .m-brand{display:none}
  .wrap.is-mgr{padding-bottom:48px}
}
/* ---- ผู้ประสานงานแผน: ตารางแผนทั้งทีม (คอมพิวเตอร์ >= 900px) ---- */
.staff.wide{max-width:1440px}
button.link{background:none;border:0;padding:0;font-size:14px}
.board-page{display:flex;flex-direction:column;gap:14px}
.bhead-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bpeople{display:flex;gap:10px;flex-wrap:wrap}
.bperson{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:190px}
.bperson .sub{font-size:13px}
.board{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.btable-wrap{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:auto;max-height:calc(100vh - 140px);min-height:360px}
.btable{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.btable thead th{position:sticky;top:0;z-index:2;background:var(--surface);text-align:left;padding:10px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:15px;font-weight:600}
.btable thead th:first-child{left:0;z-index:3}
.btable th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;vertical-align:top;padding:8px 10px;width:104px;white-space:nowrap;border-bottom:1px solid var(--line);font-weight:600;font-size:13.5px}
.btable td{vertical-align:top;padding:6px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);min-width:180px}
.btable tr.off th[scope="row"],.btable tr.off td{background:var(--surface-2)}
.btable tr.past th[scope="row"],.btable tr.past td{opacity:.62}
.btable tr.today th[scope="row"]{box-shadow:inset 4px 0 0 var(--accent);color:var(--accent-text)}
.btable td.is-target{box-shadow:inset 0 0 0 2px var(--accent)}
.btable .dn{display:block}
.btable .hn{display:block;font-size:12px;color:var(--danger);font-weight:500;white-space:normal;line-height:1.3}
.btable td .pill{margin-bottom:4px}
.bchip{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:var(--surface);padding:5px 8px;margin-bottom:4px;font-size:13px;line-height:1.35}
.bchip.k-sales{border-left-color:var(--oil)}
.bchip.k-office{border-left-color:var(--accent-mid)}
.bchip.k-other{border-left-color:var(--ink-2)}
.bchip:hover{background:var(--accent-soft)}
.bchip .bh{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.bchip .bt{color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bchip .bk{font-size:11.5px;font-weight:700;color:var(--oil)}
.bchip .bs{font-size:11.5px;font-weight:600;color:var(--ok)}
.bchip .btm{font-size:11px;font-weight:700;color:var(--accent-text);background:var(--accent-soft);border-radius:999px;padding:0 6px}
.bchip .btm.lead{background:var(--accent);color:var(--accent-ink)}
.team-line{display:inline-flex;align-items:center;gap:4px;color:var(--accent-text)}
.chip:disabled{opacity:.6;cursor:not-allowed}
.bchip.is-moved{opacity:.6}
.bchip.is-moved strong{text-decoration:line-through}
.bchip.is-sel{outline:2px solid var(--accent);outline-offset:1px;background:var(--accent-soft)}
.badd{width:100%;min-height:22px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center;opacity:.5}
.btable td:hover .badd,.badd:focus-visible{opacity:1;border-color:var(--accent);color:var(--accent-text)}
.bform{position:sticky;top:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 110px);overflow:auto}
.bform h2{font-size:19px}
.bform .field{gap:6px}
.bform .bdel{color:var(--danger)}
.bcal button{min-height:34px;font-size:13.5px;gap:0}
.bcal button .d{display:none}
.bcal button.main,.bcal button.main:disabled{background:var(--accent-soft);color:var(--accent-text);font-weight:700;opacity:1}
.bcal button:disabled{opacity:.35;cursor:default}
.sw.k-service{background:var(--accent)}
.sw.k-sales{background:var(--oil)}
.sw.k-officeb{background:var(--accent-mid)}
.sw.k-otherb{background:var(--ink-2)}
.sw.k-offday{background:var(--surface-2);border:1px solid var(--line)}
@media (max-width:1180px){.board{grid-template-columns:minmax(0,1fr) 300px}.btable td{min-width:150px}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- real app additions ---------- */
:root{--logo-bg:transparent;--logo-pad:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--logo-bg:#FFFFFF;--logo-pad:4px 8px}}
:root[data-theme="dark"]{--logo-bg:#FFFFFF;--logo-pad:4px 8px}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{padding-top:calc(14px + env(safe-area-inset-top,0px))}
.logo-chip{display:inline-flex;align-items:center;background:var(--logo-bg);padding:var(--logo-pad);border-radius:8px}
.logo-chip img{height:28px;width:auto;display:block}
.link{color:var(--accent-text);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:50vh;color:var(--ink-2)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.banner{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:14px;font-weight:600}
.banner.info{background:var(--accent-soft);color:var(--accent-text)}
.profile-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:12px;min-height:44px;padding:0 10px;font-weight:600}

/* login */
.login{max-width:440px;margin:0 auto;min-height:calc(100vh - 60px);display:flex;flex-direction:column;justify-content:center;gap:26px;padding-block:20px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.login-brand .logo-chip img{height:46px}
.login-brand h1{font-size:28px}
.login-brand .co{font-size:15px}
.login-user{min-height:54px;font-size:18px;letter-spacing:.02em}
.ugrid{display:grid;gap:14px}
.ucard{gap:10px}
.ucard.off{opacity:.72}
.ucard-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ucard-h strong{font-size:18px}
.uacts{display:flex;flex-wrap:wrap;gap:6px}
.uacts [data-act="del-user"]{color:var(--danger)}
.pin-dots{display:flex;gap:14px;justify-content:center;padding-block:4px}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-2)}
.pin-dots i.on{background:var(--accent);border-color:var(--accent)}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:330px;margin:0 auto;width:100%}
.pad button{height:62px;border-radius:16px;border:1px solid var(--line);background:var(--surface);font-family:var(--display);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.pad button.k2{border:0;background:transparent;font-size:15px;color:var(--ink-2);font-family:var(--body);font-weight:500}
.center{text-align:center}
.pinshow{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:.25em;text-align:center;padding:14px;border-radius:14px;background:var(--surface-2)}
.kv{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:6px 14px;font-size:15px}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0}
.inline-input{display:flex;gap:8px;align-items:center}
.month-nav{display:flex;align-items:center;gap:6px}
.review-table td,.review-table th{white-space:nowrap}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:10px;border-top:1px solid var(--line)}
.toggle-row:first-of-type{border-top:0}
.toggle-row input{width:22px;height:22px;accent-color:var(--accent)}

@media print{
  .tabbar,.side,.m-tabbar,.no-print,.m-brand,.toast,#sheet-root{display:none!important}
  body{background:#fff;color:#000}
  .wrap{padding:0}
  .mgr{display:block}
  .card{break-inside:avoid;border-color:#bbb}
}
.name-btn{border:0;background:none;padding:0;font:inherit;font-size:16px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;min-height:36px;display:inline-flex;align-items:center;gap:4px}
.name-btn:hover{color:var(--accent-text)}