:root{--ink:#203c36;--muted:#78837b;--green:#173f39;--lime:#d5e8b8;--paper:#f4f5f0;--line:#e0e5dc;--white:#fff;--red:#b85049;font-family:Arial,'Malgun Gothic',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #80a561;outline-offset:3px}a{color:inherit}button{border:0}input,select,textarea{border:1px solid #ccd6cc;background:#fff;border-radius:9px;padding:11px 12px;min-height:44px;color:var(--ink);max-width:100%}textarea{resize:vertical;min-height:80px}label{display:grid;gap:7px;font-size:13px;font-weight:600}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-1.2px}h2{font-size:19px;letter-spacing:-.5px}h3{font-size:15px}.muted{color:var(--muted);font-size:13px;line-height:1.7}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--muted);margin-bottom:10px}.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.spacer{flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:10px 17px;border-radius:9px;background:var(--green);color:#fff;font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}.btn.secondary{background:white;color:var(--ink);border:1px solid var(--line)}.btn.soft{background:#eaf0e0;color:var(--green)}.btn.danger{background:#f8e9e7;color:var(--red)}.link{background:none;color:var(--green);padding:8px;text-decoration:underline}.shell{display:grid;grid-template-columns:218px 1fr;min-height:100vh}.sidebar{background:var(--green);color:#fff;padding:32px 22px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:218px;z-index:20}.brand{font-family:Georgia,serif;font-size:35px;letter-spacing:-2px;display:flex;gap:10px;align-items:center}.brand i{width:25px;height:25px;border:2px solid var(--lime);border-radius:50%;position:relative}.brand i:after{content:'';background:var(--lime);width:8px;height:8px;border-radius:50%;position:absolute;right:-3px;top:-4px}.brand-sub{font-size:10px;color:#b2c7b7;letter-spacing:2px;margin:8px 0 42px}.nav-label{font-size:10px;color:#9ab8a8;letter-spacing:2px;margin:24px 12px 9px}.nav{display:grid;gap:6px}.nav :is(button,a[data-view]){background:transparent;color:#c4d4c9;border-radius:9px;text-align:left;min-height:47px;padding:12px 15px;font-size:14px}.nav :is(button,a[data-view]).active{background:var(--lime);color:var(--green);font-weight:700}.nav :is(button,a[data-view]):hover{background:#2b534b;color:#fff}.nav :is(button,a[data-view]).active:hover{background:var(--lime);color:var(--green)}.side-bottom{margin-top:auto;padding-top:24px;font-size:12px;line-height:1.8;color:#c3d6c7}.side-bottom button{color:#c3d6c7;font-size:12px;padding:6px 0}.main{grid-column:2;padding:0 36px 40px;min-width:0}.topbar{height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:30px}.topbar .status-dot{display:inline-block;width:7px;height:7px;background:#6a934e;border-radius:50%;margin-right:7px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 25px}.page-head p{margin-top:10px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 24px}.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;position:relative}.metric.feature{background:var(--green);color:white;border-color:var(--green)}.metric .num{font-size:37px;font-weight:600;letter-spacing:-1.5px;margin:17px 0 6px}.metric .num small{font-size:13px;margin-left:5px;letter-spacing:0;font-weight:400}.metric .muted{font-size:12px}.metric.feature .muted{color:#b9d2c3}.metric .corner{position:absolute;right:20px;top:22px;color:#92a68f}.grid-two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:20px}.card{border:1px solid var(--line);background:#fff;border-radius:14px;overflow:hidden;margin-bottom:20px}.card-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.card-body{padding:22px}.card h2{font-size:17px}.count{border-radius:7px;padding:4px 8px;background:#edf1e7;font-size:11px;color:#617b58}.empty{padding:45px 24px;text-align:center;color:var(--muted);font-size:14px;line-height:1.9}.empty strong{display:block;color:var(--ink);font-size:17px;margin-bottom:7px}.activity{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf0ea}.activity:last-child{border:0}.avatar{background:#eef1e6;border-radius:10px;width:37px;height:37px;display:grid;place-items:center;font-size:13px;font-weight:700}.activity .name{font-size:13px;font-weight:600}.activity .time{margin-left:auto;font-size:12px;color:var(--muted)}.pill{display:inline-block;border-radius:6px;padding:5px 8px;font-size:11px;white-space:nowrap}.pill.present{background:#e4f0df;color:#426939}.pill.out{background:#f0f1ed;color:#7b8179}.pill.absent{background:#fff3dc;color:#917741}.pill.late{background:#f9e7e1;color:#a36352}.notice{background:#edf2e6;border:1px solid #dce7cf;padding:14px 17px;border-radius:10px;font-size:13px;line-height:1.7;margin-bottom:18px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.toolbar input[type=search]{min-width:230px}.table-scroll{overflow:auto;max-height:70vh}table{width:100%;border-collapse:collapse;font-size:13px}th{background:#f7f8f3;text-align:left;font-weight:500;color:#778570;white-space:nowrap}td,th{padding:14px 17px;border-bottom:1px solid #e8ece3}tbody tr:hover{background:#fafbf7}td button{background:none;color:var(--green);font-size:12px;padding:7px}.attendance th,.attendance td{text-align:center;min-width:49px;padding:9px 5px;border-right:1px solid #e8ece3;font-size:11px}.attendance td:first-child,.attendance th:first-child{position:sticky;left:0;min-width:125px;text-align:left;padding-left:13px;background:white;z-index:2}.attendance th:first-child{background:#f7f8f3}.attendance .cell-event{display:block;color:#27725b;background:#e8f1e5;border-radius:4px;margin:2px 0;padding:3px}.attendance .cell-plan{display:block;color:#a2ab9d;font-size:10px}.attendance .cell-patrol{display:block;color:#1c4859;background:#e6eef2;border-radius:4px;padding:4px}.seat-map{position:relative;aspect-ratio:1052/850;min-width:670px;max-width:100%;background:#fbfcf8;border:1px solid var(--line);border-radius:12px;overflow:hidden;background-image:radial-gradient(#dce4d6 .7px,transparent .7px);background-size:18px 18px}.seat-wrap{overflow:auto;padding:14px}.seat{position:absolute;width:4.4%;height:5.1%;border:1px solid #c6d2c0;background:#edf0e7;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;padding:1px;color:#4c5b4c;touch-action:none}.seat span{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;font-size:9px}.seat.green{background:#dcefdc}.seat.pink{background:#f2e0e4}.seat.blue{background:#dfeaf4}.seat.yellow{background:#f3eccd}.seat.unoccupied{opacity:.5}.seat.selected{outline:3px solid #345f42;outline-offset:1px;opacity:1}.seat.pending:after{content:'✓';position:absolute;top:-7px;right:-6px;background:var(--green);color:#fff;border-radius:50%;width:16px;height:16px}.seat .seat-n{font-size:11px;font-weight:700}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px}.sticky-actions{position:sticky;bottom:15px;background:var(--green);color:#fff;padding:15px 22px;border-radius:12px;box-shadow:0 5px 20px #173f3926;z-index:5}.sticky-actions .btn{background:var(--lime);color:var(--green)}.sticky-actions .secondary{background:transparent;color:white;border-color:#52736c}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-art{background:var(--green);padding:65px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden}.auth-art:after{content:'';position:absolute;width:500px;height:500px;border:1px solid #789b6b;border-radius:50%;bottom:-180px;right:-160px;box-shadow:0 0 0 70px #ffffff05,0 0 0 140px #ffffff04}.auth-art h1{font-size:44px;line-height:1.45;font-weight:400;letter-spacing:-2px;z-index:1}.auth-art p{color:#bbd0bc;margin-top:23px;line-height:1.8;font-size:14px}.auth-panel{padding:40px;display:flex;justify-content:center;align-items:center}.auth-box{width:360px;max-width:100%}.auth-box h2{font-size:25px;margin:15px 0}.auth-box form{display:grid;gap:19px;margin-top:30px}.auth-box .btn{height:49px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.full{grid-column:1/-1}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}.form-note{font-size:12px;color:var(--muted);line-height:1.6}.error{color:var(--red);font-size:13px;line-height:1.6;min-height:20px}.section-label{margin:23px 0 12px;padding-top:17px;border-top:1px solid var(--line);font-size:14px;font-weight:600}.schedule-row{display:grid;grid-template-columns:45px 1fr 82px;gap:10px;align-items:center;margin:7px 0;font-size:13px}.schedule-row label{display:flex;align-items:center;gap:5px;font-size:12px}.schedule-row input[type=checkbox]{min-height:0}.schedule-row input{min-width:0}.tabs{display:flex;gap:8px;margin:15px 0}.tabs button{background:#edf1e7;color:#677662;padding:9px 15px;border-radius:8px}.tabs button.active{background:var(--green);color:#fff}dialog{border:1px solid var(--line);border-radius:17px;padding:28px;width:650px;max-width:calc(100vw - 28px);max-height:88vh;box-shadow:0 24px 100px #12392a33;color:var(--ink)}dialog::backdrop{background:#122f2866;backdrop-filter:blur(3px)}dialog h2{margin-bottom:8px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-head button{background:#eff2e9;border-radius:50%;width:33px;height:33px}.event-list{display:grid;gap:8px;margin-top:17px}.event-line{padding:11px 13px;background:#f5f7ef;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:12px}.event-line button{margin-left:auto}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.category-grid button{background:#edf3e6;color:var(--ink);padding:19px;border-radius:10px;font-weight:600;min-height:60px}.progress-track{height:8px;border-radius:6px;background:#e8eee0;margin-top:12px;overflow:hidden}.progress-fill{height:100%;background:#729359}.bar-row{display:grid;grid-template-columns:75px 1fr 40px;gap:14px;align-items:center;margin:16px 0;font-size:12px}.bar-row .progress-track{margin:0}.boot{padding:70px;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:14px 23px;border-radius:12px;z-index:100;box-shadow:0 6px 30px #0002;display:none;font-size:13px;max-width:90vw}#toast.show{display:block}.kiosk{min-height:100vh;background:var(--green);color:#fff;padding:35px;text-align:center}.kiosk .brand{justify-content:center}.kiosk .auth-box{background:#fff;color:var(--ink);padding:32px;border-radius:20px;margin:50px auto;width:420px}.kiosk input{font-size:24px;text-align:center;letter-spacing:3px}.kiosk .switch-staff{color:#c9dccf;margin-top:20px}.kiosk .clock{font-size:40px;font-weight:300;margin-top:30px}.audit-detail{max-width:450px;word-break:break-word;white-space:pre-wrap;font-size:11px}.mini-map{position:relative;height:125px;overflow:hidden;background:#f4f7eb;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}.mini-map i{width:28px;height:34px;background:#d7e5c4;border-radius:6px}.mini-map i:nth-child(2n){background:#b5d2b6}.disabled-banner{color:#a35643;background:#fff0e5;padding:12px;margin-bottom:15px;border-radius:8px;font-size:13px}
@media(min-width:1600px){.main{padding-left:55px;padding-right:55px}.page-content{max-width:1500px;margin:auto}}@media(max-width:1100px){.shell{grid-template-columns:175px 1fr}.sidebar{width:175px;padding:25px 15px}.main{padding:0 22px 30px}.grid-two{grid-template-columns:1fr}.metrics{gap:10px}.metric{padding:17px}.metric .num{font-size:30px}.auth-art{padding:40px}.auth-art h1{font-size:35px}}@media(max-width:760px){.shell{display:block}.sidebar{position:static;width:100%;padding:14px 18px}.brand{font-size:27px}.brand-sub,.nav-label,.side-bottom{display:none}.nav{display:flex;overflow:auto;gap:4px;margin-top:12px}.nav :is(button,a[data-view]){white-space:nowrap;padding:10px;min-height:40px;font-size:12px}.sidebar>.nav{margin:5px 0}.main{padding:0 15px 25px}.topbar{height:64px;margin-bottom:23px}.topbar>.muted{display:none}.page-head{align-items:flex-start;flex-direction:column}h1{font-size:25px}.metrics{grid-template-columns:1fr 1fr}.metric .num{font-size:32px;margin:10px 0}.form-grid{grid-template-columns:1fr}.auth-shell{display:block}.auth-art{min-height:235px;padding:25px}.auth-art h1{font-size:26px;margin-top:30px}.auth-art p{display:none}.auth-panel{padding:35px 22px}.form-grid .full{grid-column:auto}dialog{padding:20px}.sticky-actions{bottom:8px;flex-wrap:wrap;gap:12px}.kiosk{padding:25px 15px}.card-head{padding:16px}.card-body{padding:17px}}
@media(min-width:761px){body.test-mode .sidebar{top:var(--test-banner-height,46px);height:calc(100vh - var(--test-banner-height,46px))}}
.cell-edit-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0}.cell-edit-options button{min-height:44px;border-radius:9px;background:#edf2e7;color:var(--ink);font-size:14px;overflow-wrap:anywhere;padding:8px}.cell-edit-options button.active{background:var(--green);color:white;box-shadow:inset 0 0 0 2px #82a568}.cell-history{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.cell-history summary{cursor:pointer;font-size:13px;font-weight:600;min-height:36px}.cell-history .activity{font-size:12px}.cell-history .activity .muted{font-size:11px}#cell-form .form-actions{flex-wrap:wrap}#cell-error{font-size:12px;margin-top:8px}@media(max-width:430px){.cell-edit-options{grid-template-columns:repeat(3,minmax(0,1fr))}.cell-history .activity{flex-wrap:wrap}}
#patrol-quickbar{position:fixed;z-index:95;width:352px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;background:#fffef9;border:2px solid var(--quick-accent);border-radius:24px;padding:10px;box-shadow:0 12px 45px #173f3940;color:var(--ink)}
#patrol-quickbar header{display:flex;align-items:center;justify-content:space-between;padding-left:10px;font-size:12px;font-weight:700;color:var(--quick-accent)}
#patrol-quickbar header button{width:44px;height:44px;border-radius:50%;background:#edf1e8;color:var(--ink);font-size:24px}
.quick-dial{display:grid;grid-template-columns:64px minmax(70px,1fr) 112px;grid-template-rows:48px 112px 48px;gap:8px;align-items:center;padding:4px 0 10px}
.quick-north{grid-column:1/4;grid-row:1;display:flex;gap:8px;justify-content:center}.quick-west{grid-column:1;grid-row:2;display:grid;gap:8px}.quick-center{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}.quick-center strong{font-size:25px;color:var(--quick-accent)}.quick-center span{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quick-center small{font-size:11px;color:var(--muted)}.quick-east{grid-column:3;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:6px}.quick-south{grid-column:1/4;grid-row:3;display:flex;gap:8px;justify-content:center}
.quick-option{min-width:48px;min-height:48px;padding:8px 7px;border-radius:14px;background:#edf2e7;color:var(--ink);font-weight:700;font-size:15px;white-space:nowrap;touch-action:manipulation}.quick-option.active{background:var(--quick-accent);color:#fff}.quick-option:hover{box-shadow:inset 0 0 0 2px var(--quick-accent)}.quick-north .quick-option,.quick-south .quick-option{min-width:80px}.quick-location{display:flex;gap:8px;justify-content:center;border-top:1px solid #e3e8dd;padding-top:10px}.quick-location .quick-option{flex:1;background:#e4edf0}.quick-extra{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px}.quick-extra .quick-option{white-space:normal;overflow-wrap:anywhere}.quick-center small{max-width:100%;overflow-wrap:anywhere}
#patrol-quickbar footer{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;color:var(--muted);padding-top:6px}#patrol-quickbar footer button{min-height:44px;padding:8px;background:transparent;color:var(--quick-accent);font-size:11px;text-decoration:underline}
@media(max-width:360px){.quick-dial{grid-template-columns:52px minmax(50px,1fr) 104px;gap:6px}.quick-option{font-size:13px}}
.seat .seat-badge{max-width:76px;font-size:10px}.patrol-menu .category-grid button{white-space:nowrap}
@media(max-width:430px){.patrol-menu{gap:12px}.patrol-menu .category-grid button{padding:10px 5px;font-size:13px}}
.patrol-tools,.layout-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:14px 20px;font-size:13px}.patrol-tools label,.layout-toolbar label{display:flex;align-items:center;gap:7px}.patrol-tools input[type=checkbox],.layout-toolbar input[type=checkbox]{min-height:20px;width:18px}.layout-toolbar input[type=number]{width:86px}.map-help{padding:12px 20px}.seat{overflow:visible;z-index:2}.seat-badge{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border-radius:5px;padding:3px 5px;white-space:nowrap;font-size:10px;line-height:1.1;box-shadow:0 1px 3px #0002;z-index:3}.seat-badge.draft{background:#fff0d6;color:#925b12;border:1px solid #dcad65}.seat-badge.saved{background:#e6f0ff;color:#315f95;border:1px solid #a8c5e5}.seat.pending{outline:2px solid #cf9142;opacity:1}.seat.unoccupied:has(.seat-badge){opacity:.8}.seat-muted{opacity:.25}.patrol-menu{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:20px 0}.patrol-menu section:first-child{grid-column:1/-1}.patrol-menu h3{font-size:12px;color:var(--muted)}.patrol-menu .category-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}.patrol-menu .category-grid button{min-height:46px;padding:12px}.patrol-menu .category-grid button.active{background:var(--green);color:#fff}.attendance td .cell-open{width:100%;min-height:44px;padding:2px;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center}.cell-open:hover{background:#eaf1e4;border-radius:5px}.map-background{position:absolute;object-fit:fill;z-index:0;pointer-events:none}.map-marker{position:absolute;background:#9a9f9a;color:#fff;display:grid;place-items:center;font-size:10px;overflow:hidden;z-index:1;pointer-events:none}.map-marker.pillar{background:#6a776f}.layout-grid{background-image:linear-gradient(#7287711a 1px,transparent 1px),linear-gradient(90deg,#7287711a 1px,transparent 1px);background-size:4.9429% 6.1176%}.layout-grid [data-item]{pointer-events:auto;touch-action:none;cursor:move}.layout-grid .selected{outline:3px solid #235eab;outline-offset:1px}.layout-grid .seat{z-index:3}#layout-host{outline:none}#layout-host:focus-visible{outline:2px solid #9eaf8d}.layout-toolbar{padding:14px 0}#layout-host .seat-wrap{padding:12px}.layout-grid .map-background.selected{outline-offset:-3px}

.shell.top-layout{display:block;min-height:100vh}.top-layout .main{padding:0 14px 14px}.top-layout .page-content{max-width:none;margin:0}.app-nav{display:flex;align-items:center;gap:16px;padding:6px 14px;background:var(--green);color:white;min-height:50px}.app-nav .brand{font-size:25px;letter-spacing:-1px;flex-shrink:0}.app-nav .brand i{width:18px;height:18px}.app-nav .nav{display:flex;gap:3px;overflow-x:auto;min-width:0;margin:0;flex:1}.app-nav .nav :is(button,a[data-view]){white-space:nowrap;min-height:36px;padding:8px 11px;font-size:12px;text-align:center}.nav-user{font-size:11px;white-space:nowrap;color:#d4e1d3}.app-nav>.btn{min-height:32px;padding:6px 10px;font-size:11px}.top-layout .topbar{height:48px;margin-bottom:16px}.top-layout .topbar input,.top-layout .topbar .btn{min-height:32px;padding:5px 9px;font-size:12px}.top-layout .topbar .row{gap:7px}
body[data-page=attendance] .topbar{margin-bottom:8px;height:40px}body[data-page=attendance] .page-head{align-items:center;flex-direction:row;gap:12px;margin-bottom:10px}body[data-page=attendance] .page-head h1{font-size:21px;letter-spacing:-.5px}body[data-page=attendance] .page-head .eyebrow,body[data-page=attendance] .page-head p{display:none}body[data-page=attendance] .page-head .btn{font-size:11px;padding:5px 10px;min-height:30px}.attendance-card{border-radius:6px;margin-bottom:6px}.attendance-card .table-scroll{height:calc(100dvh - var(--test-banner-height,0px) - 166px);max-height:none;min-height:240px;overflow:auto;scrollbar-gutter:stable}.attendance{table-layout:fixed;min-width:var(--table-min);width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}.attendance .student-col{width:116px}.attendance .arrival-col{width:40px}.attendance .round-col{width:24px}.attendance th,.attendance td{min-width:0;padding:0;border:0;border-bottom:1px solid #e1e7dc;border-right:1px solid #e1e7dc;text-align:center;font-size:11px}.attendance thead th{position:sticky;background:#edf2e8;color:#405842;z-index:4;white-space:nowrap;overflow:hidden}.attendance thead tr:first-child th{top:0;height:26px;font-weight:700}.attendance thead th small{font-size:9px;font-weight:400;margin-left:3px;color:#72826e}.attendance thead tr:nth-child(2) th{top:26px;height:22px;font-size:10px}.attendance thead tr:nth-child(2) th:first-child{position:sticky;left:auto;min-width:0;padding:0;z-index:4;background:#edf2e8;text-align:center}.attendance thead .student-heading{left:0!important;z-index:6!important;text-align:left;padding-left:8px;min-width:0}.attendance tbody .student-cell{position:sticky;left:0;z-index:3;background:#fff;text-align:left;padding:0;min-width:0}.attendance tbody tr:nth-child(even) .student-cell,.attendance tbody tr:nth-child(even) td{background:#f8faf6}.attendance tbody tr:hover td,.attendance tbody tr:hover .student-cell{background:#edf4e5}.attendance .student-cell button{display:flex;align-items:center;gap:5px;width:100%;min-height:30px;padding:3px 6px;font-size:11px;text-align:left;white-space:nowrap}.student-cell strong{overflow:hidden;text-overflow:ellipsis}.seat-number{color:#829079;min-width:18px;text-align:right;font-size:10px}.student-status{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;background:#d9b15d}.student-status.present{background:#4c9964}.student-status.out{background:#9da99a}.attendance .period-start{border-left:1px solid #becbb7}.attendance td .cell-open{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:30px;width:100%;padding:1px 0;font-size:10px;line-height:12px;border-radius:0;overflow:hidden}.attendance .cell-plan{font-size:9px;line-height:11px;color:#9ba893;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attendance .cell-event{padding:0;margin:0;border-radius:2px;display:flex;flex-direction:column;align-items:center;line-height:11px;font-size:9px}.attendance .cell-event b{font-size:9px;font-weight:500}.attendance .cell-event time{font-size:9px;letter-spacing:-.5px;white-space:nowrap}.attendance .cell-patrol{padding:1px 0;border-radius:2px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attendance-key{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:10px;color:var(--muted);padding:3px 0}.attendance-key span{display:flex;align-items:center;gap:4px}.attendance-key .cell-plan{color:#8a987f}
@media(max-width:760px){.app-nav{gap:8px;padding:5px 8px;flex-wrap:wrap}.app-nav .brand{font-size:22px}.app-nav .nav{order:3;flex-basis:100%}.app-nav .nav :is(button,a[data-view]){min-height:40px}.nav-user{margin-left:auto}.top-layout .main{padding:0 8px 10px}.top-layout .topbar{margin-bottom:10px}.attendance-card .table-scroll{height:calc(100dvh - var(--test-banner-height,0px) - 208px)}body[data-page=attendance] .page-head>.row>.muted{display:none}.attendance-key{gap:8px}.attendance .student-cell button{min-height:34px}}

/* Original seat-kiosk radial design */
.legacy-ping {
  --ping-size: clamp(240px, 34vmin, 360px);
  --ping-accent: #38bdf8;
  --ping-accent-glow: rgba(56,189,248,0.5);
  position: absolute;
  width: var(--ping-size); height: var(--ping-size);
  border-radius: 50%;
  background: rgba(30,41,59,0.4);
  border: 2px solid var(--ping-accent);
  box-shadow: 0 0 30px var(--ping-accent-glow), 0 10px 30px rgba(0,0,0,0.4);
}
.ping-crosshair {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none;
}
.ping-crosshair::before, .ping-crosshair::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 140%; height: 1px; background: rgba(255,255,255,0.15);
  transform-origin: center;
}
.ping-crosshair::before { transform: translate(-50%, -50%) rotate(45deg); }
.ping-crosshair::after { transform: translate(-50%, -50%) rotate(-45deg); }

.ping-close {
  position: absolute; top: -6px; right: -6px; z-index: 20;
  width: 30px; height: 30px; border-radius: 50%;
  background: #334155; color: #cbd5e1; border: 2px solid #1e293b;
  font-size: 15px; line-height: 1; touch-action: manipulation;
}

.ping-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30%; height: 30%; border-radius: 50%;
  background: rgba(30,41,59,0.8); border: 2px solid rgba(255,255,255,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 5; pointer-events: none; text-align: center;
}
.ping-center .seat-no { color: var(--ping-accent, #22c55e); font-size: clamp(18px, 4.4vmin, 28px); font-weight: bold; line-height: 1.1; }
.ping-center .seat-nm { color: #94a3b8; font-size: clamp(10px, 2.2vmin, 13px); margin-top: 2px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ping-quadrant {
  position: absolute; z-index: 10;
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; text-align: center;
}
/* X자 구분선이 나누는 동서남북 4개 구역 각각의 중심축에 맞춰 배치한다. */
.ping-quadrant.p-north { top: 12%; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 6px; }
.ping-quadrant.p-east  { top: 50%; right: 9.5%; transform: translateY(-50%); }
.ping-quadrant.p-south { bottom: 9%; left: 50%; transform: translateX(-50%); }
.ping-quadrant.p-west  { top: 50%; left: 13%; transform: translateY(-50%); }
.ping-quadrant.p-bottom-center {
  bottom: -13%; left: 50%; transform: translateX(-50%);
  flex-direction: row; align-items: center;
  background: rgba(30,41,59,0.4); border: 2px solid var(--ping-accent, #38bdf8); border-radius: 20px;
  padding: 4px 6px; box-shadow: 0 0 16px var(--ping-accent-glow, rgba(56,189,248,0.35));
}

.ping-opt {
  background: transparent; border: none; color: #fff;
  font-size: clamp(13px, 2.8vmin, 17px); font-weight: bold;
  padding: 3px 8px; border-radius: 10px; touch-action: manipulation;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.ping-opt:not(.selected):hover { background: rgba(34,197,94,0.35); color: #fff; }
/* 국영수탐, 잠/지각-3은 기본보다 1.2배 크게 */
.ping-quadrant.p-east .ping-opt,
.ping-quadrant.p-south .ping-opt { font-size: clamp(16px, 3.4vmin, 20px); }
/* 등원/하원, O/X는 다른 항목보다 1.3배 크게 */
.ping-quadrant.p-north .ping-opt,
.ping-quadrant.p-west .ping-opt { font-size: clamp(17px, 3.6vmin, 22px); }
.ping-opt.selected { background: #22c55e; color: #0f172a; }
#radial-shade{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:90;pointer-events:none}dialog.radial-cell-dialog{border:0;outline:none}
.legacy-ping-stage{--ping-size:clamp(240px,34vmin,360px);position:relative;width:var(--ping-size);height:calc(var(--ping-size) + 54px);margin:10px auto 0;flex-shrink:0}.legacy-ping{position:relative;--ping-accent:inherit;--ping-accent-glow:rgba(56,189,248,.5)}.legacy-ping .ping-opt{min-width:0;min-height:0;line-height:1.25;padding:3px 8px;background:transparent;border:0;box-shadow:none;border-radius:10px;color:#fff}.legacy-ping .ping-opt.active{background:#22c55e;color:#0f172a}.legacy-ping .ping-opt:not(.active):hover{background:rgba(34,197,94,.35);color:#fff;box-shadow:none}.legacy-ping .ping-center strong{font-size:clamp(18px,4.4vmin,28px);color:var(--ping-accent,#22c55e)}
#patrol-quickbar{--ping-accent:#38bdf8;width:calc(clamp(240px,34vmin,360px) + 24px);border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;padding:0 12px;max-height:none}#patrol-quickbar header{color:#fff;background:rgba(30,41,59,.8);border-radius:20px;padding:2px 8px 2px 12px;gap:10px}#patrol-quickbar header button{background:#334155;color:#cbd5e1;width:30px;height:30px;font-size:18px}#patrol-quickbar footer{background:rgba(30,41,59,.8);border-radius:14px;padding:0 8px;color:#cbd5e1}#patrol-quickbar footer button{color:#d8edf5}#patrol-quickbar .quick-extra{background:rgba(30,41,59,.8);border-radius:12px;margin-bottom:6px}#patrol-quickbar .quick-extra .ping-opt{color:#fff;background:transparent}
dialog.radial-cell-dialog{--ping-accent:#38bdf8;background:transparent;box-shadow:none;width:450px;padding:14px;border-radius:0;color:#eef4f8}dialog.radial-cell-dialog::backdrop{background:rgba(15,23,42,.35);backdrop-filter:none}.radial-cell-dialog .modal-head{background:rgba(30,41,59,.85);border-radius:15px;padding:12px;margin-bottom:10px}.radial-cell-dialog .modal-head h2{font-size:17px;margin:0}.radial-cell-dialog .modal-head button{background:#334155;color:#cbd5e1}.radial-cell-dialog>.muted{background:rgba(30,41,59,.8);padding:8px 12px;border-radius:10px;font-size:11px}.radial-cell-dialog .muted{color:#c2cddd}.radial-cell-dialog #cell-form>.muted{background:rgba(30,41,59,.8);border-radius:10px;padding:8px;font-size:11px}.radial-cell-dialog .form-actions{margin-top:10px;gap:8px;justify-content:space-between}.radial-cell-dialog .form-actions .btn{font-size:12px;padding:8px 10px}.radial-cell-dialog .cell-history{background:rgba(30,41,59,.85);border:0;border-radius:12px;padding:12px;margin-top:12px}.radial-cell-dialog .activity{border-color:#526075}.radial-cell-dialog>.section-label{background:rgba(30,41,59,.85);padding:10px;border-radius:10px;margin:12px 0 6px;color:#eef4f8}.radial-cell-dialog .event-line{background:#263448;color:#eef4f8}.radial-cell-dialog .radial-extra{display:flex;flex-wrap:wrap;gap:6px;background:rgba(30,41,59,.8);border-radius:12px;padding:8px}.radial-cell-dialog #cell-error:empty{display:none}.radial-cell-dialog #cell-error:not(:empty){background:#fff1eb;padding:10px;border-radius:8px}
/* theprep desktop: charcoal surfaces, restrained mint accents, compact data. */
:root{color-scheme:dark;--ink:#e6eaee;--muted:#a0a9b2;--green:#51dadd;--lime:#51dadd;--paper:#191c20;--line:#363b42;--white:#24282d;--red:#ff9b97;background:var(--paper)}
body{background:var(--paper);color:var(--ink)}
.app-nav{position:relative;z-index:40;background:#111418;border-bottom:1px solid #343941;box-shadow:none}
.app-nav .brand{font-family:Arial,'Malgun Gothic',sans-serif;font-weight:700;letter-spacing:-1px;color:#f2f6f8}
.app-nav .nav :is(button,a[data-view]){color:#aeb7c0;border-radius:6px;background:transparent}
.app-nav .nav :is(button,a[data-view]).active,.app-nav .nav :is(button,a[data-view]).active:hover{background:#223a3d;color:#67edef;box-shadow:inset 0 -2px #51dadd}
.app-nav .nav :is(button,a[data-view]):hover{background:#2b3037;color:#fff}.nav-user{color:#b6bec7}
.app-nav .nav-group{display:flex;align-items:center;gap:3px;flex:none;border-right:1px solid #3d4750;padding-right:8px;margin-right:5px}
.app-nav .nav-group>span{color:#95a9af;font-size:10px;white-space:nowrap;padding:0 5px}
.app-nav .nav-tools{display:flex;align-items:center;gap:5px;flex:none}
.app-nav .nav-tools>button,.app-nav .admin-menu>summary{display:block;border:0;border-radius:6px;background:#252f35;color:#e5edef;cursor:pointer;font-size:11px;min-height:36px;padding:8px 10px;white-space:nowrap}
.app-nav .nav-tools>button.active,.app-nav .admin-menu button.active{background:#223a3d;color:#67edef}
.app-nav .admin-menu{position:relative}
.app-nav .admin-menu>div{position:absolute;right:0;top:100%;z-index:30;min-width:158px;background:#202a30;border:1px solid #45535c;border-radius:7px;padding:5px;box-shadow:0 12px 30px #0006}
.app-nav .admin-menu button{display:block;width:100%;text-align:left;color:#e5edef;background:transparent;border:0;border-radius:5px;padding:9px;cursor:pointer;white-space:nowrap}
.app-nav .admin-menu button:hover{background:#33444b}
@media(max-width:760px){.app-nav .nav{overflow-x:auto;order:3;flex-basis:100%}.app-nav .nav-group{flex-direction:row;flex-wrap:wrap;align-items:center;width:max-content}.app-nav .nav-group>span{flex-basis:100%;padding:2px 8px}.app-nav .nav-tools{margin-left:auto}.app-nav .nav-tools>button,.app-nav .admin-menu>summary{min-height:34px;padding:7px}.app-nav .nav-user{display:none}}
h1{font-weight:650;letter-spacing:-.8px}h2,h3{color:#e9edf1}.eyebrow{color:#7ca1a5;letter-spacing:1.5px}
.btn{background:#51dadd;color:#102326;border:1px solid transparent;border-radius:7px}
.btn.secondary{background:#2a2f35;border-color:#414852;color:#dae1e6}.btn.soft{background:#263e42;color:#79e5e7}
.btn.danger{background:#452b30;color:#ffaaa4}.link{color:#69e3e5}
input,select,textarea{background:#1b1f24;border-color:#424a54;color:#edf1f5;border-radius:6px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#51dadd}
.card,.metric{background:#24282d;border-color:#373d44;border-radius:10px;box-shadow:none}
.metric.feature{background:#243a3e;border-color:#3b666a;color:#78f0ec}.metric.feature .muted{color:#b6d9d8}
.metric .num{font-variant-numeric:tabular-nums}.metric .corner{color:#75babd}.count{background:#343b43;color:#bccbd3}
.card-head,.activity,.topbar{border-color:#373d44}.avatar{background:#30484a;color:#8af0e9}.mini-map i{background:#344e50}
.notice{background:#293338;color:#c2d8df;border-color:#405962}.error{color:#ffaaa4}.form-note{color:#a9b3bf}
.pill{background:#363d45;color:#c6d0d8}.pill.present{background:#23433c;color:#8ce2bd}.pill.out{background:#343c45;color:#b8c5d2}.pill.absent{background:#433b29;color:#ebcf8c}
table,th,td{border-color:#353b43}th{background:#282d33;color:#bbc5ce}td{color:#d9e0e7}tbody tr:hover{background:#2c343a}
.attendance-card,.attendance,.attendance td,.attendance .student-cell{background:#22262b}
.attendance thead th,.attendance .student-heading{background:#2c3239;color:#b9c8cf;border-color:#434b55}
.attendance tbody tr:nth-child(even) .student-cell,.attendance tbody tr:nth-child(even) td{background:#252a30}
.attendance tbody tr:hover td,.attendance tbody tr:hover .student-cell{background:#303d43}
.attendance .student-cell button,.attendance td .cell-open{background:transparent;color:#e0e6eb}
.attendance .period-start{border-left-color:#505a65}.attendance .cell-plan,.attendance-key .cell-plan{color:#969da6}
.attendance .cell-event{background:#26473d;color:#9aefc4}.attendance .cell-patrol{background:#254750;color:#8ae8ed}
.student-status.present{background:#67dba6}.seat-number{color:#a0acb7}
dialog:not(.radial-cell-dialog){background:#252a30;color:#e6ebf1;border:1px solid #4a535e;box-shadow:0 24px 80px #0008;border-radius:14px}
dialog::backdrop{background:#080e17a6;backdrop-filter:blur(3px)}.modal-head button{background:#363f49;color:#e2e8ed}
.cell-edit-options button{background:#323b45;color:#dce8ef;border-color:#445360}.cell-edit-options button.selected,.cell-edit-options button.active{background:#51dadd;color:#102326;border-color:#8af2ee}
.event-line{background:#303740;color:#d8e2eb}.section-label{color:#bec9d3}.cell-history{border-color:#414952}
.seat-map{background:#20262d}.patrol-tools{background:#292f36;color:#bdc8d2}.seat{color:#1c333d}.sticky-actions{background:#263c42;color:#e3f6f6}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:#20252b}::-webkit-scrollbar-thumb{background:#535e6a;border:2px solid #20252b;border-radius:8px}
.attendance th:first-child,.attendance thead tr:nth-child(2) th:first-child{background:#2c3239;color:#cbd5df}
.attendance tbody tr .student-cell{background:#22262b;color:#e0e6eb}
.attendance th,.attendance td{border-color:#3b424a}
.attendance-key span[style]{color:#8ce3d5!important}
.attendance thead small{color:#a5b1bd}
.cell-edit-options button.selected{box-shadow:0 0 0 1px #92f0ed}

.coverage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:10px 14px;font-size:12px;background:#25343a;color:#d9e9ef;border-bottom:1px solid #3b5058}.coverage-bar label{display:flex;align-items:center;gap:6px;font-size:12px}.coverage-bar input{min-height:0;width:16px;height:16px;accent-color:#51dadd}.coverage-bar small{color:#a4b6c0}.coverage-done{color:#75dfc4}.coverage-missing{color:#ffd184}.seat.coverage-unchecked{outline:2px solid #e6ac51;outline-offset:-2px}.seat-check-time{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;line-height:10px;padding:0 2px;border-radius:3px;background:#26323e;color:#e3edf3;pointer-events:none}.seat-muted{visibility:hidden}

#student-table .student-sort{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:inherit;padding:6px 0;font:inherit;font-weight:600;cursor:pointer}#student-table th[aria-sort="ascending"],#student-table th[aria-sort="descending"]{color:#51dadd}#student-table .student-sort:focus-visible{outline:2px solid #51dadd;outline-offset:3px}

:is(#student-form,#student-reservation-form) .student-weekday{display:flex;flex-direction:column;gap:12px;margin:10px 0;padding:14px;border:1px solid #414e58;border-radius:9px}:is(#student-form,#student-reservation-form) .student-weekday-title{margin:0;padding:0;font-size:14px;font-weight:700;color:#72e6de}:is(#student-form,#student-reservation-form) .student-weekday .plan-input{width:100%;min-width:0}
:is(#student-form,#student-reservation-form) .student-weekday-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}:is(#student-form,#student-reservation-form) .student-weekday-head [data-plan-add-slot]{display:inline-flex}:is(#student-form,#student-reservation-form) .student-weekday-head [data-add]{min-height:30px;padding:4px 9px;border:1px solid #52606c;border-radius:7px;background:#34424c;color:#e2edf3;font-size:12px;line-height:1.3;white-space:nowrap}
:is(#student-form,#student-reservation-form) .student-weekday .plan-time{min-width:0;min-height:32px;padding:5px 8px;font-size:13px;line-height:1.3;white-space:nowrap}
#student-form .regular-schedule-current,#student-form .regular-schedule-pending{border:1px solid var(--line,#52606c);border-radius:10px;padding:14px;margin:10px 0}
#student-form .regular-schedule-current h3,#student-form .regular-schedule-pending h3{margin:0 0 10px}
#student-form .regular-schedule-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin:10px 0}
#student-form .regular-schedule-preview>div{display:flex;gap:10px;min-width:0;overflow-wrap:anywhere}
#student-form .regular-schedule-preview strong{flex:0 0 54px;white-space:nowrap}
#student-form .regular-schedule-current details,#student-form .regular-schedule-pending details{margin-top:10px}
#student-form .regular-schedule-current summary,#student-form .regular-schedule-pending summary{cursor:pointer}
#student-form .regular-schedule-pending article{border-top:1px solid var(--line,#52606c);padding:12px 0 2px}
#student-form .regular-schedule-pending article h4{margin:0}
#student-form .regular-schedule-edit-title{margin:20px 0 12px}
#student-form .regular-schedule-edit-title small{font-size:12px;font-weight:normal;color:var(--muted,#9db0ba)}
@media(max-width:540px){#student-form .regular-schedule-preview{grid-template-columns:minmax(0,1fr)}}
#student-form[hidden],#regular-schedule-reservation-view[hidden]{display:none!important}
#student-form .schedule-tabs-row{display:flex;align-items:end;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line,#414e58);margin:18px 0 10px}
#student-form .schedule-tabs-row .schedule-set-tabs{flex:1 1 240px;margin:0;border-bottom:0}
#student-form [data-open-schedule-reservation]{white-space:nowrap;margin-bottom:5px}
#regular-schedule-reservation-view{padding:4px 0}
#regular-schedule-reservation-view>.row{align-items:center;gap:12px;flex-wrap:wrap}
#regular-schedule-reservation-view h3{margin:10px 0}
#student-reservation-form .schedule-set-tabs{margin-top:18px}
:is(#student-form,#student-reservation-form) .schedule-set-tabs{display:flex;gap:8px;margin:18px 0 10px;border-bottom:1px solid #414e58}:is(#student-form,#student-reservation-form) .schedule-set-tabs button{min-width:110px;padding:9px 14px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:inherit;cursor:pointer}:is(#student-form,#student-reservation-form) .schedule-set-tabs button[aria-selected="true"]{border-bottom-color:#38c4bf;color:#72e6de;font-weight:700}:is(#student-form,#student-reservation-form) .schedule-set-tabs button:focus-visible{outline:2px solid #38c4bf;outline-offset:-2px}:is(#student-form,#student-reservation-form) .schedule-set-panel[hidden]{display:none!important}

/* Attendance: all actual times in the summary columns, followed by observation rounds. */
.attendance-rounds .round-col{width:28px}.attendance-rounds .summary-status{font-size:10px;white-space:nowrap}.summary-status .student-status{margin-right:4px}.attendance-rounds .summary-time button{width:100%;min-height:32px;padding:2px;font-size:11px;color:#9aefc4;background:transparent;font-variant-numeric:tabular-nums}.summary-time small{display:block;color:var(--muted);font-size:9px}.attendance-rounds .cell-event{flex-direction:row;justify-content:center;gap:2px;flex-wrap:wrap}.attendance-rounds .cell-plan{white-space:normal;line-height:11px}.attendance-rounds .before-period{display:block;width:100%;min-height:16px;padding:1px;font-size:9px;line-height:12px;color:#9da9b5;background:transparent;border-top:1px dotted #424b55}.attendance-rounds .before-period.has-record{color:#8ae8ed;background:#254750}.attendance-rounds .before-period:hover,.summary-time button:hover{background:#354851}.student-note-mark{color:#ffca69}.attendance-rounds .cell-open{min-height:32px}.attendance-rounds td{vertical-align:middle}
.attendance-rounds .summary-time button{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:13px}.attendance-rounds .summary-time time{display:block;white-space:nowrap;font-size:10px}
.attendance-rounds .summary-events{display:flex;flex-direction:column;align-items:stretch;position:relative;min-height:32px}.attendance-rounds .summary-time .event-time{min-height:13px;padding:0 13px 0 0;line-height:13px}.attendance-rounds .summary-time .event-add{position:absolute;right:0;top:0;width:13px;min-height:13px;padding:0;color:#a8b8c1;font-size:12px;line-height:13px}

.attendance-rounds .round-col{width:26px}.attendance-rounds td{position:relative}.attendance-rounds .before-period:not(.has-record){position:absolute;right:0;bottom:0;width:16px;min-height:12px;line-height:10px;padding:0;border:0;opacity:.3}.attendance-rounds td:hover .before-period,.attendance-rounds .before-period:focus-visible{opacity:1}

/* One continuous daily track; each saved observation fills only its own round. */
.attendance-gauge-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 15px;padding:0 2px 10px;color:#c0cbd4;font-size:11px}
.attendance-roster-update{padding:5px 9px;border-radius:999px;background:#e7f5ee;color:#16724e;font-size:12px;font-weight:700}
.attendance-roster-update[hidden]{display:none}
.attendance-gauge-legend>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.attendance-gauge-legend i{width:10px;height:10px;border-radius:3px;background:hsl(var(--gauge-hue) 51% 46%);box-shadow:inset 0 1px 1px #ffffff65,0 1px 2px #0008}
.attendance-gauge-legend .gauge-help{margin-left:auto;color:#8e9da9;font-size:10px}
.attendance-gauge-card .table-scroll{height:calc(100dvh - var(--test-banner-height,0px) - 196px)}
.attendance-gauges .round-col{width:28px}
.attendance-gauges td.timeline-cell{padding:2px 0 1px;border-right:0}
.learning-gauge,.timeline-notes{display:grid;grid-template-columns:repeat(var(--round-count),minmax(0,1fr))}
.learning-gauge{height:25px;isolation:isolate;border-radius:7px;background:linear-gradient(#10181f,#1b252d 62%,#202c34);box-shadow:inset 0 2px 4px #0009,inset 0 -1px 0 #ffffff0e,0 1px 0 #ffffff0c;overflow:hidden}
.attendance-gauges .gauge-round{position:relative;display:block;min-width:0;height:25px;padding:0;border:0;border-right:1px solid #ffffff0b;border-radius:0;background:transparent;color:#fff;cursor:pointer}
.attendance-gauges .gauge-round.gauge-period-start{box-shadow:inset 1px 0 #73828e60}
.attendance-gauges .gauge-round:first-child{box-shadow:none}
.attendance-gauges .gauge-round:last-child{border-right:0}
.gauge-fill{position:absolute;inset:1px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,hsl(var(--gauge-hue) 58% 63%) 0%,hsl(var(--gauge-hue) 48% 45%) 12%,hsl(var(--gauge-hue) 48% 37%) 49%,hsl(var(--gauge-hue) 47% 31%) 51%,hsl(var(--gauge-hue) 44% 37%) 100%);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 2px #0005,1px 0 0 #0003}
.gauge-round:first-child .gauge-fill{border-radius:6px 0 0 6px}.gauge-round:last-child .gauge-fill{border-radius:0 6px 6px 0}
.gauge-round.fill-start .gauge-fill{border-top-left-radius:5px;border-bottom-left-radius:5px}.gauge-round.fill-end .gauge-fill{border-top-right-radius:5px;border-bottom-right-radius:5px}
.attendance-gauges .gauge-fill .cell-patrol{position:relative;display:block;max-width:100%;padding:0 1px;background:none;color:#fff;font-size:10px;font-weight:700;line-height:22px;letter-spacing:-.3px;text-shadow:0 1px 2px #0009}
.attendance-gauges .gauge-fill .gauge-label-long{font-size:9px;letter-spacing:-.5px}
.attendance-gauges .gauge-round:hover{background:#b8cfdf16;z-index:1;box-shadow:inset 0 0 0 1px #cbe9fa8c}
.gauge-round:hover .gauge-fill{filter:brightness(1.2)}
.attendance-gauges .gauge-round:focus-visible{outline:2px solid #e1f4ff;outline-offset:-2px;z-index:2}
.timeline-notes{min-height:12px;margin-top:2px;align-items:start}
.timeline-note{min-width:0;min-height:12px;display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:0 2px}
.timeline-note button{max-width:100%;min-width:0;min-height:12px;line-height:12px;padding:0;border-radius:3px;background:transparent;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-note button:hover{background:#ffffff13;color:#fff}
.timeline-note .timeline-before{font-size:8px;color:#7f919e;opacity:.65}
.timeline-note .timeline-before.has-record{color:#b6d5e4;background:#364958;opacity:1;padding:0 2px}
.timeline-note .timeline-plan{color:#99a3ae}
.attendance-gauges tbody tr:hover .timeline-before,.timeline-before:focus-visible{opacity:1}
.attendance .summary-status .attendance-case-link{display:block;width:100%;padding:2px 0;border:0;background:#5c2d25;color:#fff0df;font-size:9px;line-height:12px;cursor:pointer}
.attendance .summary-status .attendance-case-link:hover,.attendance .summary-status .attendance-case-link:focus-visible{background:#874233;outline:1px solid #ffd5ba}
.attendance .student-col{width:136px}
.attendance .student-cell.has-first-day>button[data-action="student-day"]{width:calc(100% - 29px)}
.attendance .student-cell .attendance-first-day-link{position:absolute;top:50%;right:3px;transform:translateY(-50%);display:grid;place-items:center;width:26px;min-height:26px;height:26px;padding:2px;border:1px solid #81b9a0;border-radius:6px;background:#e7f7eb;color:#18784b;cursor:pointer}
.attendance .student-cell .attendance-first-day-link.is-return{border-color:#8db4cf;background:#eaf3fa;color:#276185}
.attendance .student-cell .attendance-first-day-link .notice-icon{width:18px;height:18px}
.attendance .student-cell .attendance-first-day-link:focus-visible{outline:2px solid currentColor;outline-offset:1px}
@keyframes gauge-fill-in{from{transform:scaleX(.05);filter:brightness(1.4)}to{transform:scaleX(1);filter:brightness(1)}}
@media(prefers-reduced-motion:no-preference){.gauge-round.is-new .gauge-fill{transform-origin:left;animation:gauge-fill-in .38s ease-out both}}
@media(max-width:760px){.attendance-gauge-legend{gap:5px 10px;font-size:10px}.attendance-gauge-legend .gauge-help{flex-basis:100%;margin-left:0}.attendance-gauge-card .table-scroll{height:calc(100dvh - var(--test-banner-height,0px) - 263px)}.learning-gauge,.attendance-gauges .gauge-round{height:30px}}
@media(max-width:760px){.attendance-rounds .summary-time button{min-height:44px}}

/* Compact category navigation. Panels start quickly and settle softly. */
.app-nav .nav{overflow-x:auto;overflow-y:hidden;gap:7px;scrollbar-width:none;overscroll-behavior-x:contain}
.app-nav .nav::-webkit-scrollbar{display:none;width:0;height:0}
.app-nav .nav-group{position:relative;padding-right:7px;margin-right:0;border-color:#344149}
.app-nav .nav-group:last-child{border-right:0;padding-right:0}
.app-nav .nav .nav-trigger{display:flex;align-items:center;gap:9px;min-height:38px;padding:9px 12px;border-radius:8px;color:#c5d1d7;font-size:12px;font-weight:600;letter-spacing:.2px}
.app-nav .nav .nav-trigger::after{content:'⌄';font-size:14px;line-height:1;color:#79939a;transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s ease}
.app-nav .nav-group.open .nav-trigger::after{transform:rotate(180deg);color:#6fe5e7}
.app-nav .nav .nav-trigger.current{color:#7be9e8;background:#203238;box-shadow:inset 0 -2px #51dadd}
.app-nav .nav .nav-trigger.current:hover,.app-nav .nav-group.open .nav-trigger{color:#f2ffff;background:#273a40}
.app-nav .nav-submenu{position:fixed;top:var(--nav-menu-top,60px);left:var(--nav-menu-left,8px);z-index:45;display:flex;align-items:center;flex-wrap:wrap;gap:4px;width:max-content;max-width:calc(100vw - 16px);max-height:var(--nav-menu-height,calc(100dvh - 80px));overflow-y:auto;padding:8px;border:1px solid #455962;border-radius:10px;background:#1d272d;box-shadow:0 16px 36px #0009;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.97);transform-origin:top left;transition:opacity .16s ease-out,transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear .34s}
.app-nav .nav-group.open .nav-submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
.app-nav .nav-submenu :is(button,a[data-view]){min-height:38px;padding:9px 12px;font-size:12px;opacity:0;transform:translateY(-5px);transition:opacity .22s ease-out,transform .32s cubic-bezier(.16,1,.3,1);transition-delay:0s}
.app-nav .nav-group.open .nav-submenu :is(button,a[data-view]){opacity:1;transform:translateY(0);transition-delay:calc(var(--nav-step) * 45ms)}
.app-nav .nav-submenu :is(button,a[data-view]):focus-visible,.app-nav .nav-trigger:focus-visible{outline:2px solid #7ce8e8;outline-offset:2px}
@media(max-width:760px){.app-nav .nav{justify-content:flex-start;gap:6px}.app-nav .nav-group{position:static;padding-right:0;border:0}.app-nav .nav .nav-trigger{min-height:44px;padding:8px 10px;font-size:12px}.app-nav .nav-submenu{width:calc(100vw - 16px);transform-origin:top center}.app-nav .nav-submenu :is(button,a[data-view]){flex:1 1 auto;min-width:110px}}
@media(prefers-reduced-motion:reduce){.app-nav .nav .nav-trigger::after,.app-nav .nav-submenu,.app-nav .nav-submenu :is(button,a[data-view]){transition:none!important;transform:none!important}}

/* A small, focused editor for one actual attendance event. */
#dialog.attendance-correction-dialog{width:420px;max-width:calc(100vw - 28px);padding:20px;border-color:#50636a;border-radius:18px;box-shadow:0 24px 64px #0009}
#dialog.attendance-correction-dialog .modal-head{margin-bottom:14px}
#dialog.attendance-correction-dialog .modal-head h2{margin:0;font-size:19px;letter-spacing:-.4px}
#dialog.attendance-correction-dialog .modal-head button{width:31px;height:31px;font-size:18px}
.attendance-edit-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:#aebbc4;font-size:12px}
.attendance-edit-meta strong{color:#e9f1f4;font-size:13px}
.attendance-edit-kind{padding:4px 8px;border-radius:999px;background:#234448;color:#85e8e6;font-size:11px;font-weight:700}
.attendance-edit-field{display:flex;align-items:flex-end;gap:11px;margin-top:16px;padding:13px 14px;background:#20272d;border:1px solid #404c55;border-radius:11px}
.attendance-edit-field label{gap:6px;color:#d8e5e9}
.attendance-edit-current{padding-bottom:8px;color:#aebbc4;font-size:11px;white-space:nowrap}
.attendance-edit-note{display:flex;align-items:flex-start;gap:8px;margin-top:13px;color:#aebbc4;font-size:11px;line-height:1.55}
.attendance-edit-note>span:first-child{color:#78dedc;font-size:14px;line-height:1.2}
#dialog.attendance-correction-dialog .form-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px;padding-top:14px;border-top:1px solid #3c464e}
#dialog.attendance-correction-dialog .form-actions .btn{width:100%;min-height:40px;padding:8px 12px;border-radius:9px}
@media(max-width:430px){#dialog.attendance-correction-dialog{padding:18px}#dialog.attendance-correction-dialog .form-actions .btn{min-height:44px}}


/* Shared staff theme. Keep feature geometry, visibility, permissions and state
   selectors intact; the body scope also wins over lazily loaded feature CSS. */
:root:has(body[data-ui="soft"]) {
  color-scheme: light;
  --ink: #263638;
  --muted: #667779;
  --green: #117e88;
  --lime: #dff3f3;
  --paper: #f7f9f9;
  --line: #dce5e6;
  --white: #fff;
  --red: #ae414d;
  --ui-brand: #1fa3b0;
  --ui-soft: #e8f5f5;
  --ui-field: #f1f5f5;
  --ui-hover: #f0f8f8;
  --ui-shadow: 0 4px 18px #23494e08, 0 1px 3px #23494e05;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

body[data-ui="soft"] { background: var(--paper); color: var(--ink); }
body[data-ui="soft"] :is(h1,h2,h3) { color: var(--ink); }
body[data-ui="soft"] :is(.muted,.form-note,.nav-user,.seat-number,.section-label) { color: var(--muted); }
body[data-ui="soft"] .eyebrow { color: var(--green); }
body[data-ui="soft"] :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
body[data-ui="soft"] :is(input,select,textarea) { color-scheme: light; color: var(--ink); background: var(--ui-field); border-color: var(--line); accent-color: var(--green); }
body[data-ui="soft"] :is(input,textarea)::placeholder { color: #7a898b; opacity: 1; }
body[data-ui="soft"][data-compact-forms] :is(input,select,textarea) { border-radius: 10px; }
body[data-ui="soft"] .btn { border-radius: 11px; background: var(--green); color: #fff; }
body[data-ui="soft"] .btn:hover:not(:disabled) { filter: brightness(.96); }
body[data-ui="soft"] .btn.secondary { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: 0 1px 2px #23494e05; }
body[data-ui="soft"] .btn.soft { background: var(--ui-soft); color: var(--green); }
body[data-ui="soft"] .btn.danger { background: #fff0f1; color: var(--red); border-color: #f2dadd; }
body[data-ui="soft"] :is(.link,td button) { color: var(--green); }
body[data-ui="soft"] :is(.card,.metric) { background: #fff; border-color: #e6eded; border-radius: 20px; box-shadow: var(--ui-shadow); }
body[data-ui="soft"] :is(.card-head,.activity,.topbar,.cell-history) { border-color: var(--line); }
body[data-ui="soft"] .metric.feature { background: var(--ui-soft); border-color: #d7eded; color: var(--green); }
body[data-ui="soft"] .metric.feature .muted { color: #50777a; }
body[data-ui="soft"] .metric .corner { color: var(--ui-brand); }
body[data-ui="soft"] :is(.avatar,.count) { background: var(--ui-soft); color: var(--green); border-radius: 12px; }
body[data-ui="soft"] :is(.notice,.event-line) { background: var(--ui-hover); color: #46676b; border-color: #d7e8e9; border-radius: 12px; }
body[data-ui="soft"] .error { color: var(--red); }
body[data-ui="soft"] .pill { background: #edf1f2; color: #53666d; border-radius: 999px; }
body[data-ui="soft"] .pill.present { background: #e4f4eb; color: #26734e; }
body[data-ui="soft"] .pill.absent { background: #fff3d9; color: #856019; }
body[data-ui="soft"] .pill.late { background: #fff0e9; color: #a35135; }
body[data-ui="soft"] .pill.out { background: #edf1f2; color: #596a70; }

/* Existing four menu groups and all destinations remain in place. */
body[data-ui="soft"] .app-nav { background: #fff; border-color: var(--line); box-shadow: 0 3px 16px #23494e05; }
body[data-ui="soft"] .app-nav .brand { color: var(--ink); }
body[data-ui="soft"] .brand i { border-color: var(--ui-brand); }
body[data-ui="soft"] .brand i::after { background: var(--ui-brand); }
body[data-ui="soft"] .app-nav .nav-group { border-color: #e7eeee; }
body[data-ui="soft"] .app-nav .nav :is(button,a[data-view]) { color: #586c70; border-radius: 11px; }
body[data-ui="soft"] .app-nav .nav :is(button,a[data-view]):hover,
body[data-ui="soft"] .app-nav .nav-group.open .nav-trigger { background: var(--ui-hover); color: var(--green); }
body[data-ui="soft"] .app-nav .nav :is(button.active,a.active,.nav-trigger.current) { background: var(--ui-soft); color: var(--green); box-shadow: inset 0 -2px var(--ui-brand); }
body[data-ui="soft"] .app-nav .nav .nav-trigger::after { color: #77989b; }
body[data-ui="soft"] .app-nav .nav-group.open .nav-trigger::after { color: var(--green); }
body[data-ui="soft"] .app-nav :is(.nav-submenu,.admin-menu>div) { background: #fff; border-color: var(--line); border-radius: 16px; box-shadow: 0 12px 36px #23494e1c; }
body[data-ui="soft"] .app-nav :is(.nav-tools>button,.admin-menu>summary) { color: #48676b; background: var(--ui-field); border-radius: 10px; }
body[data-ui="soft"] .app-nav .nav-tools>button.active { background: var(--ui-soft); color: var(--green); }
body[data-ui="soft"] .app-nav .admin-menu button { color: var(--ink); }
body[data-ui="soft"] .ui-icon { width: 17px; height: 17px; flex: 0 0 auto; vertical-align: middle; }
body[data-ui="soft"] .nav-trigger .ui-icon { color: var(--green); }

/* Opaque table cells keep sticky headings and seat numbers readable. */
body[data-ui="soft"] :is(table,th,td) { border-color: var(--line); }
body[data-ui="soft"] th { background: #f0f5f5; color: #50676b; }
body[data-ui="soft"] td { color: var(--ink); }
body[data-ui="soft"] tbody tr:hover { background: var(--ui-hover); }
body[data-ui="soft"] :is(.attendance-card,.attendance,.attendance td,.attendance .student-cell) { background: #fff; }
body[data-ui="soft"] .attendance :is(thead th,.student-heading,th:first-child),
body[data-ui="soft"] .attendance thead tr:nth-child(2) th:first-child { background: #eef5f5; color: #4d686d; border-color: var(--line); }
body[data-ui="soft"] .attendance tbody tr .student-cell { background: #fff; color: var(--ink); }
body[data-ui="soft"] .attendance tbody tr:nth-child(even) :is(td,.student-cell) { background: #f7fafa; }
body[data-ui="soft"] .attendance tbody tr:hover :is(td,.student-cell) { background: #eaf5f5; }
body[data-ui="soft"] .attendance :is(th,td) { border-color: var(--line); }
body[data-ui="soft"] .attendance :is(.student-cell button,td .cell-open) { color: var(--ink); }
body[data-ui="soft"] .attendance .period-start { border-left-color: #bfced0; }
body[data-ui="soft"] :is(.attendance .cell-plan,.attendance-key .cell-plan,.attendance thead small) { color: #71878b; }
body[data-ui="soft"] .attendance .cell-event { background: #e4f4eb; color: #26734e; }
body[data-ui="soft"] .attendance .cell-patrol { background: #e8f4f5; color: #236d76; }
body[data-ui="soft"] .attendance-rounds .summary-time button { color: #26734e; }
body[data-ui="soft"] .attendance-rounds .summary-time .event-add { color: var(--green); }
body[data-ui="soft"] .attendance-rounds .before-period { color: #71878b; border-color: var(--line); }
body[data-ui="soft"] .attendance-rounds .before-period.has-record { color: var(--green); background: var(--ui-soft); }
body[data-ui="soft"] .summary-time button:hover { background: #dcefed; }
body[data-ui="soft"] .attendance-key span[style] { color: var(--green) !important; }
body[data-ui="soft"] :is(.attendance-gauge-legend,.timeline-note) { color: #567377; }
body[data-ui="soft"] :is(.attendance-gauge-legend .gauge-help,.timeline-before) { color: #6f8187; }
body[data-ui="soft"] .learning-gauge { background: #eaf0f1; box-shadow: inset 0 1px 2px #23494e0a; }
body[data-ui="soft"] .attendance-gauges .gauge-round { border-color: #d2dfe0; }
body[data-ui="soft"] .gauge-fill { background: hsl(var(--gauge-hue) 48% 86%); box-shadow: inset 0 -1px hsl(var(--gauge-hue) 35% 72%); }
body[data-ui="soft"] .attendance-gauges .gauge-fill .cell-patrol { color: hsl(var(--gauge-hue) 50% 23%); text-shadow: none; background: transparent; }
body[data-ui="soft"] .attendance-gauges .gauge-round:focus-visible { outline-color: var(--green); }
body[data-ui="soft"] .attendance .summary-status .attendance-case-link { background: #fff0e9; color: #9c4832; }
body[data-ui="soft"] .student-note-mark { color: #946219; }
body[data-ui="soft"] .seat-map { background-color: #f6f9f8; }
body[data-ui="soft"] :is(.patrol-tools,.coverage-bar) { background: var(--ui-hover); color: var(--ink); border-color: var(--line); }
body[data-ui="soft"] .coverage-bar small { color: var(--muted); }
body[data-ui="soft"] .coverage-done { color: #26734e; }
body[data-ui="soft"] .coverage-missing { color: #946219; }
body[data-ui="soft"] .seat-check-time { background: #fff; color: #476569; }
body[data-ui="soft"] .sticky-actions { background: #e3f2f2; color: var(--ink); border: 1px solid #c6e3e4; box-shadow: var(--ui-shadow); }
body[data-ui="soft"] .sticky-actions .btn { background: var(--green); color: #fff; }
body[data-ui="soft"] .sticky-actions .btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); }

/* Dialogs: preserve sizes, scrolling and every existing action. */
body[data-ui="soft"] dialog:not(.radial-cell-dialog) { background: #fff; color: var(--ink); border-color: var(--line); border-radius: 22px; box-shadow: 0 24px 80px #193d4329; }
body[data-ui="soft"] dialog::backdrop { background: #173e454d; backdrop-filter: blur(3px); }
body[data-ui="soft"] .modal-head button { background: var(--ui-field); color: #617679; }
body[data-ui="soft"] .cell-edit-options button { background: var(--ui-field); color: var(--ink); border-color: var(--line); }
body[data-ui="soft"] .cell-edit-options button:is(.active,.selected) { background: var(--ui-soft); color: var(--green); border-color: var(--ui-brand); box-shadow: 0 0 0 1px var(--ui-brand); }
body[data-ui="soft"] :is(#student-form,#student-reservation-form) .student-weekday { border-color: var(--line); }
body[data-ui="soft"] :is(#student-form,#student-reservation-form) .student-weekday-title { color: var(--green); }
body[data-ui="soft"] :is(#student-form,#student-reservation-form) .student-weekday-head [data-add] { background: var(--ui-field); color: var(--ink); border-color: var(--line); }
body[data-ui="soft"] :is(#student-form,#student-reservation-form) .schedule-set-tabs { border-color: var(--line); }
body[data-ui="soft"] :is(#student-form,#student-reservation-form) .schedule-set-tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
body[data-ui="soft"] #dialog.attendance-correction-dialog { padding: 24px; border-color: var(--line); border-radius: 24px; box-shadow: 0 24px 80px #193d4329; }
body[data-ui="soft"] #dialog.attendance-correction-dialog .modal-head h2 { display: flex; align-items: center; gap: 10px; }
body[data-ui="soft"] .attendance-title-icon { display: inline-flex; padding: 9px; background: var(--ui-soft); color: var(--green); border-radius: 12px; }
body[data-ui="soft"] .attendance-title-icon .ui-icon { width: 20px; height: 20px; }
body[data-ui="soft"] :is(.attendance-edit-meta,.attendance-edit-current,.attendance-edit-note) { color: var(--muted); }
body[data-ui="soft"] .attendance-edit-meta strong { color: var(--ink); }
body[data-ui="soft"] .attendance-edit-kind { background: var(--ui-soft); color: var(--green); }
body[data-ui="soft"] .attendance-edit-field { background: #f4f8f8; border-color: #e0ebec; border-radius: 16px; padding: 16px; }
body[data-ui="soft"] .attendance-edit-field label { color: var(--ink); }
body[data-ui="soft"] .attendance-edit-note>span:first-child { color: var(--green); }
body[data-ui="soft"] #dialog.attendance-correction-dialog .form-actions { grid-template-columns: 1fr 1.2fr; border-color: var(--line); }
body[data-ui="soft"] #dialog.attendance-correction-dialog .form-actions .btn { border-radius: 12px; }

/* Older record editors set their surface colors inline. Override only paint,
   leaving each editor's size, scrolling and controls unchanged. */
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog,#study-dialog,#reports-dialog,#handover-dialog,#guidance-dialog,#schedule-dialog,#time-picker) { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; border-radius: 22px !important; }
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog,#study-dialog,#reports-dialog,#handover-dialog,#guidance-dialog,#schedule-dialog,#time-picker)::backdrop { background: #173e454d; }
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog,#study-dialog,#reports-dialog,#handover-dialog,#guidance-dialog,#schedule-dialog,#time-picker) :is(button,input,select,textarea) { background: var(--ui-field); color: var(--ink); border-color: var(--line); border-radius: 10px; }
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog,#study-dialog,#reports-dialog,#handover-dialog,#guidance-dialog,#schedule-dialog,#time-picker) button:hover:not(:disabled) { background: var(--ui-soft); }
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog,#study-dialog) :is(.record-muted,.record-day-summary small,details) { color: var(--muted); }
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog) :is(.record-summary span,.record-badges small,.master-summary button) { background: var(--ui-soft); color: #46676b; }
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog) :is(.record-day,.record-day-content,.record-line) { border-color: var(--line); }
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog) :is(.record-day-content h4,.record-tag),
body[data-ui="soft"] :is(#student-record-dialog,#student-activity-dialog) .record-date b::before { color: var(--green); }
body[data-ui="soft"] :is(#record-error,#study-error,#report-error,#handover-error,#guidance-error,#schedule-error) { color: var(--red) !important; }
body[data-ui="soft"] :is(.record-summary span,#report-summary span) { background: var(--ui-soft); }
body[data-ui="soft"] .plan-input button { background: var(--ui-field); color: var(--ink); border-color: var(--line); }
body[data-ui="soft"] .plan-input .plan-time { color: var(--green); }
body[data-ui="soft"] #schedule-dialog .calendar-grid button[aria-pressed=true] { background: var(--green); color: #fff; border-color: var(--green); }
body[data-ui="soft"] .sticky-actions [style*="color"] { color: #46676b !important; }

/* Students, consultation, payments and staff workflows load their own sheets. */
body[data-ui="soft"] :is(.ops,.master,.ops-dialog,.master-dialog,.ops-dialog.ops),
body[data-ui="soft"] #student-record-dialog .ops { --op-border: var(--line); --op-soft: var(--ui-field); color: var(--ink); }
body[data-ui="soft"] :is(.ops-card,.master-card) { background: #fff; color: var(--ink); border-color: var(--line); border-radius: 17px; box-shadow: var(--ui-shadow); }
body[data-ui="soft"] :is(.ops button,.ops a.ops-button,.master button) { background: #fff; color: #41666c; border-color: var(--line); border-radius: 10px; }
body[data-ui="soft"] :is(.ops button,.master button):hover { background: var(--ui-hover); }
body[data-ui="soft"] :is(.ops input,.ops select,.ops textarea,.master input,.master select,.master textarea),
body[data-ui="soft"] #student-record-dialog .ops :is(input,select) { background: var(--ui-field); color: var(--ink); border-color: var(--line); }
body[data-ui="soft"] #student-record-dialog .ops button { background: #fff; color: #41666c; border-color: var(--line); }
body[data-ui="soft"] :is(.ops button.primary,.ops [aria-selected=true],.ops-choice button[aria-pressed=true],.ops-payment-check button[aria-pressed=true],.ops-trial-calendar button[aria-pressed=true]),
body[data-ui="soft"] #student-record-dialog .ops [aria-selected=true] { background: var(--green); color: #fff; border-color: var(--green); }
body[data-ui="soft"] :is(.ops small,.ops .ops-muted,.ops-trial-picker p,.ops input[readonly],.master small,.master-card dt,.master-muted,.billing-muted,.billing-breakdown small) { color: var(--muted); }
body[data-ui="soft"] :is(.ops-note,.ops-empty,.master-summary button) { background: var(--ui-hover); color: #46676b; border-color: var(--line); border-radius: 12px; }
body[data-ui="soft"] :is(.master-summary b,.master-fields h3) { color: var(--green); }
body[data-ui="soft"] :is(.master-row,.master td,.master th,.master-inline,.ops-tabs) { border-color: var(--line); }
body[data-ui="soft"] .master th button { background: transparent; }
body[data-ui="soft"] .ops-state { background: #e4f4eb; color: #26734e; border-radius: 999px; }
body[data-ui="soft"] .ops-state.warning { background: #fff3d9; color: #856019; }
body[data-ui="soft"] .ops-state.danger { background: #fff0ed; color: #a04434; }
body[data-ui="soft"] :is(.ops-error,.master-error) { color: var(--red); }
body[data-ui="soft"] .ops button.ops-danger { background: #fff0f1; color: var(--red); border-color: #f2dadd; }
body[data-ui="soft"] .ops-card.accent { border-left-color: var(--ui-brand); }
body[data-ui="soft"] :is(.billing-grid>aside,.billing-block.billing-off) { background: var(--ui-field); border-color: var(--line); }
body[data-ui="soft"] :is(.billing-context,.billing-block) { background: #f5f9f9; border-color: var(--line); }
body[data-ui="soft"] :is(.billing-total,.billing-recommendation-heading) { background: var(--ui-soft); color: var(--ink); border-color: #c6e3e4; }
body[data-ui="soft"] .billing-total strong { color: var(--green); }
body[data-ui="soft"] .billing-comparison [aria-pressed=true] { background: var(--ui-soft); color: var(--green); }
body[data-ui="soft"] :is(.billing-nav button[aria-selected=true],.billing-mobile-total) { background: var(--green); color: #fff; }

/* Settings use the same light surfaces without altering their navigation. */
body[data-ui="soft"].admin-mode { background: var(--paper); color: var(--ink); }
body[data-ui="soft"] :is(.admin-header,.admin-sidebar,.admin-page) { background: #fff; color: var(--ink); border-color: var(--line); }
body[data-ui="soft"] .admin-page { border-radius: 20px; box-shadow: var(--ui-shadow); }
body[data-ui="soft"] :is(.admin-brand,.admin-page label,.admin-period-preview,.admin-period-instruction) { color: var(--ink); }
body[data-ui="soft"] :is(.admin-user,.admin-sidebar h2,.admin-sidebar a,.admin-breadcrumb,.admin-intro,.admin-summary small,.admin-summary span,.admin-home-grid a,.admin-note,.admin-record-list small,.admin-period-library-toolbar>span,.admin-period-dialog-guide,.period-weekdays [data-day-summary]) { color: var(--muted); }
body[data-ui="soft"] :is(.admin-save-state,.admin-feedback,.period-preset-feedback,.admin-summary b,.admin-period-preview [data-period-preview-name],.admin-period-preview [data-period-preview-date]) { color: var(--green); }
body[data-ui="soft"] .admin-save-state.dirty { color: #946219; }
body[data-ui="soft"] :is(.admin-error,.period-preset-error,.admin-period-caution) { color: var(--red); }
body[data-ui="soft"] :is(.admin-sidebar a:hover,.admin-record-list>button.active,.admin-sidebar a.active,.admin-period-dialog-item.active) { background: var(--ui-soft); color: var(--green); border-color: var(--ui-brand); }
body[data-ui="soft"] :is(.admin-summary>div,.admin-record-list>button,.admin-record-list>article,.admin-period-library,.admin-period-dialog-item,.admin-page pre) { background: #f4f8f8; color: var(--ink); border-color: var(--line); border-radius: 12px; }
body[data-ui="soft"] :is(.admin-page input,.admin-page textarea,.admin-page select,.admin-search input) { background: var(--ui-field); color: var(--ink); border-color: var(--line); color-scheme: light; }
body[data-ui="soft"] :is(.admin-home-grid section,.admin-home-grid a,.admin-form-actions,.admin-student-picker,.admin-order-row,.admin-tablet-frame,.admin-page th,.admin-page td) { border-color: var(--line); }
body[data-ui="soft"] .admin-period { border-color: var(--line) !important; }
body[data-ui="soft"] .admin-page th { background: #eef5f5; color: #4d686d; }
body[data-ui="soft"] .admin-order-row button { background: #fff; color: var(--green); border-color: var(--line); }
body[data-ui="soft"] .admin-period-dialog-load { color: var(--ink); }
body[data-ui="soft"] .admin-period-dialog-load:hover { background: #dcefed; }

/* Keep urgency and status distinctions in the persistent task panel. */
body[data-ui="soft"] :is(#quest-widget,.quest-dialog) { --q-bg: #f7f9f9; --q-paper: #fff; --q-fg: #263638; --q-muted: #667779; --q-line: #dce5e6; --q-soft: #e8f5f5; --q-red: #ae414d; --q-red-bg: #fff0f1; --q-amber: #856019; }
body[data-ui="soft"] #quest-widget :is(.q-calendar,.quest-ack) { color: #567377; }
body[data-ui="soft"] #quest-widget .quest-error { background: #fff0f1; color: var(--red); }
body[data-ui="soft"] #quest-widget[data-severity=urgent] .quest-group header { background: #fff0f1; }
body[data-ui="soft"] .quest-dialog :is(.q-tabs [aria-selected=true],button[type=submit]) { background: var(--green); color: #fff; }
body[data-ui="soft"] .quest-dialog .q-feedback { color: var(--green); }
body[data-ui="soft"] :is(.learning-quickbar,.learning-report-dialog) { color: var(--ink); background: #fff; border-color: var(--line); }
body[data-ui="soft"] :is(.learning-claim.is-active,.lq-submit,.lr-tabs button[aria-pressed=true],.lr-category[aria-pressed=true]) { background: var(--green); color: #fff; }
body[data-ui="soft"] .auth-art { background: #167f89; }
body[data-ui="soft"] .auth-art h1 { color: #fff; }
body[data-ui="soft"] .auth-art p { color: #e1f4f3; }
body[data-ui="soft"] #toast { background: #254e54; }
body[data-ui="soft"] ::-webkit-scrollbar-track { background: #f1f5f5; }
body[data-ui="soft"] ::-webkit-scrollbar-thumb { background: #bacdce; border-color: #f1f5f5; }

@media (max-width: 760px) {
  body[data-ui="soft"] .app-nav .nav .nav-trigger { gap: 6px; padding: 8px 10px; min-height: 44px; letter-spacing: 0; }
  body[data-ui="soft"] .nav-trigger .ui-icon { width: 14px; height: 14px; }
  body[data-ui="soft"] .app-nav .nav-submenu :is(button,a[data-view]) { min-height: 44px; }
}
@media (max-width: 430px) {
  body[data-ui="soft"] #dialog.attendance-correction-dialog { padding: 18px; }
}
.layout-grid{touch-action:none}
.layout-grid .map-background{pointer-events:none}
.layout-grid.background-move .map-background{pointer-events:auto;cursor:move}
.layout-grid .layout-selection-box{position:absolute;z-index:10;pointer-events:none;border:2px solid #2783a4;background:#2783a433;box-sizing:border-box}
.attendance-next-plan{display:block;margin-top:3px;font-size:10px;color:#986511;white-space:nowrap}

.app-nav .nav-submenu a[data-view]{display:block;text-decoration:none}
@media(max-width:430px){
 body[data-ui="soft"] .app-nav .nav{width:100%}
 body[data-ui="soft"] .app-nav .nav-group{flex:none}
 body[data-ui="soft"] .nav-trigger .ui-icon{width:14px;height:14px;flex-shrink:0}
}

/* Row-and-column lists share one alignment rule across work screens. */
table :is(th,td){text-align:center}
.attendance thead .student-heading,.attendance tbody .student-cell{text-align:center;padding-left:0}
.attendance .student-cell button{justify-content:center;text-align:center}
.attendance .seat-number{text-align:center}
.audit-detail{text-align:left}
.app-nav .nav-session{display:flex;align-items:center;gap:8px;flex:none}
.app-nav .nav-session>.btn{min-height:32px;padding:6px 10px;font-size:11px;white-space:nowrap}
@media(max-width:760px){.app-nav .nav-session{margin-left:auto}}