:root{--bg:#f5f7fb;--card:#fff;--line:#e5eaf2;--text:#172033;--muted:#6c7890;--brand:#2563eb;--brand2:#4f46e5;--green:#16a34a;--amber:#d97706;--red:#dc2626;--shadow:0 16px 45px rgba(15,23,42,.08);--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.55}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.wrap{width:min(1180px,calc(100% - 36px));margin:auto}.muted{color:var(--muted)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:#7c89a3;text-transform:uppercase}.error{color:#b91c1c;font-size:13px;min-height:18px}.btn{border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px 16px;font-weight:800;color:#344056}.btn:hover{background:#f8fafc}.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 22px rgba(37,99,235,.22)}.btn.ghost{background:#fff}.btn.large{padding:14px 22px;font-size:15px}.btn.tiny{padding:7px 11px;font-size:12px;border-radius:9px}.btn.wide{width:100%}.link-btn{border:0;background:transparent;color:var(--brand);font-weight:800;padding:4px}.icon-action{border:1px solid var(--line);background:#fff;width:38px;height:38px;border-radius:11px;display:grid;place-items:center}.badge{font-size:11px;font-weight:900;border-radius:999px;padding:4px 8px}.badge.warn{background:#fff7ed;color:#c2410c}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#2563eb,#4f46e5);color:#fff;font-weight:950;box-shadow:0 8px 20px rgba(37,99,235,.22)}.brand-mark.big{width:52px;height:52px;border-radius:16px;font-size:20px;margin-bottom:10px}
/* public */.public-site{background:#fff}.public-header{height:78px;display:flex;align-items:center;gap:32px}.public-brand{display:flex;align-items:center;gap:10px;margin-right:auto}.public-brand b{display:block;font-size:15px}.public-brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:.08em}.public-nav{display:flex;gap:28px;color:#536078;font-size:14px;font-weight:700}.hero{min-height:580px;padding:80px 0 70px;display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:70px}.hero-kicker{display:inline-flex;background:#eef4ff;color:#2456c9;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900}.hero h1{font-size:50px;line-height:1.14;letter-spacing:-.045em;margin:20px 0}.hero h1 em{font-style:normal;color:var(--brand)}.hero-copy>p{font-size:17px;color:#5b6880;max-width:620px}.hero-actions{display:flex;gap:12px;margin:28px 0 20px}.hero-points{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:#66748d;font-weight:700}.hero-board{border:1px solid #e1e8f4;border-radius:26px;padding:18px;background:linear-gradient(145deg,#f8fbff,#eff4fb);box-shadow:0 30px 70px rgba(15,23,42,.12);transform:perspective(1000px) rotateY(-3deg)}.mini-top{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:13px;padding:12px 14px;font-size:13px;font-weight:900}.mini-top b{font-size:10px;color:#16a34a}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.mini-zone{height:122px;border:1px solid #e0e7f1;background:#fff;border-radius:16px;padding:12px;position:relative}.mini-zone small{display:block;font-weight:800;color:#7a879c;margin-bottom:14px}.mini-avatar{display:inline-grid;width:35px;height:35px;border-radius:50%;place-items:center;color:#fff;font-size:12px;font-weight:900;margin-right:7px}.mini-avatar.green{background:#16a34a}.mini-avatar.blue{background:#2563eb}.mini-avatar.amber{background:#d97706}.mini-avatar.purple{background:#7c3aed}.mini-avatar.cyan{background:#0891b2}.mini-seat{position:absolute;right:9px;bottom:9px;border:1px dashed #9eb5d7;border-radius:8px;padding:5px 7px;font-size:10px;color:#6b7c98}.mini-summary{display:flex;gap:8px}.mini-summary span{flex:1;text-align:center;background:#fff;padding:9px 4px;border-radius:10px;font-size:10px;font-weight:800}.section{padding:90px 0}.section.soft{background:#f6f8fc}.section-head{text-align:center;max-width:720px;margin:0 auto 45px}.section-head>span{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--brand)}.section-head h2{font-size:34px;letter-spacing:-.03em;margin:8px 0 10px}.section-head p{color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-grid article{border:1px solid #e8edf5;border-radius:18px;padding:25px;background:#fff;box-shadow:0 8px 25px rgba(15,23,42,.035)}.feature-grid i{font-style:normal;font-size:28px}.feature-grid h3{margin:11px 0 7px}.feature-grid p{font-size:13px;color:#66748c;margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.steps>div{background:#fff;border:1px solid #e7ecf4;border-radius:20px;padding:28px}.steps b{font-size:32px;color:#dbe5f8}.steps p{color:var(--muted)}.content-columns{display:grid;grid-template-columns:1fr 1fr;gap:80px}.content-columns h2{font-size:27px;line-height:1.3}.content-columns p{color:#66748c}.faq{max-width:900px}.faq details{background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:18px 20px;margin:10px 0}.faq summary{font-weight:850;cursor:pointer}.faq p{color:var(--muted)}.public-footer{padding:35px 0;background:#111827;color:#cbd5e1}.public-footer .wrap{display:flex;align-items:center;justify-content:space-between}.public-footer b{color:#fff}.public-footer p{font-size:12px;margin:4px 0}.public-footer span{font-size:12px}.ad-shell{min-height:110px;padding:18px 0}.ad-placeholder{height:90px;border:1px dashed #d7dde7;border-radius:12px;display:grid;place-items:center;color:#a2adbd;font-size:11px;background:#fafbfc}
/* modal */.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.54);backdrop-filter:blur(5px)}.login-card{position:relative;width:min(430px,100%);background:#fff;border-radius:24px;padding:34px;box-shadow:0 30px 100px rgba(0,0,0,.25);z-index:1}.login-card h2{margin:8px 0}.login-card form{display:grid;gap:14px;margin-top:22px}.login-card label,.stack-form label,.reservation-form label{font-size:12px;font-weight:850;color:#536078;display:grid;gap:6px}.login-card input,.stack-form input,.stack-form select,.stack-form textarea,.reservation-form input,.reservation-form select,.reservation-form textarea,.inline-form input,.inline-form select,.status-create input,.status-create select{width:100%;border:1px solid #dce3ed;border-radius:10px;background:#fff;color:var(--text);padding:10px 12px;outline:none}.login-card input:focus,.stack-form input:focus,.stack-form select:focus,.stack-form textarea:focus{border-color:#8fb1ef;box-shadow:0 0 0 3px #eef4ff}.modal-close{position:absolute;top:15px;right:17px;border:0;background:transparent;font-size:25px;color:#7b8799}.demo-note{font-size:11px;color:#8a95a8;margin-top:18px}.csv-card textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px;margin:12px 0}
/* app shell */.app-shell{min-height:100vh}.app-header{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:40}.app-brand{display:flex;align-items:center;gap:10px;width:255px}.app-brand b{display:block;font-size:14px}.app-brand small{display:block;color:var(--muted);font-size:10px}.app-nav{display:flex;align-self:stretch;gap:3px}.app-nav button{border:0;background:transparent;padding:0 16px;color:#66738a;font-size:13px;font-weight:800;border-bottom:2px solid transparent}.app-nav button.active{color:#1d4ed8;border-bottom-color:#2563eb}.app-account{margin-left:auto;display:flex;align-items:center;gap:9px}.app-account>div b{display:block;font-size:12px}.app-account>div small{display:block;font-size:10px;color:var(--muted)}.avatar{width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#dbeafe,#c7d2fe);color:#1e40af;display:grid;place-items:center;font-weight:900;border:1px solid #c8d7f2}.avatar.small{width:33px;height:33px;border-radius:10px;font-size:11px}.mobile-nav{display:none}.view{max-width:1500px;margin:auto;padding:20px 22px 55px}.summary-row{display:grid;grid-template-columns:190px 1fr 200px;gap:14px;margin-bottom:14px}.date-card,.forecast-card,.status-summary{background:#fff;border:1px solid var(--line);border-radius:16px}.date-card{display:grid;grid-template-columns:1fr auto;align-items:center;padding:14px 16px}.date-card b{font-size:12px;color:#56647b}.date-card strong{font-size:28px;letter-spacing:-.04em}.date-card small{grid-column:2;color:#9aa4b3;font-size:9px;text-align:right}.status-summary{display:flex;overflow:auto;padding:8px}.status-stat{min-width:100px;flex:1;padding:8px 10px;border-right:1px solid #edf1f6}.status-stat:last-child{border:0}.status-stat span{display:flex;align-items:center;gap:6px;font-size:10px;color:#77849a}.status-stat b{display:block;font-size:21px;margin-top:2px}.forecast-card{padding:12px 15px}.forecast-card span{display:block;font-size:10px;color:#7b8799}.forecast-card b{font-size:19px}.forecast-card button{border:0;background:transparent;padding:0;display:block;color:var(--brand);font-size:10px;font-weight:800}.today-banner{background:linear-gradient(90deg,#eff6ff,#f5f3ff);border:1px solid #dce7f8;border-radius:14px;padding:10px 13px;display:flex;align-items:center;gap:18px;margin-bottom:14px;min-height:54px}.today-banner>div:first-child{display:flex;gap:8px;align-items:center;white-space:nowrap}.today-banner b{font-size:12px}.today-plan-items{display:flex;gap:7px;overflow:auto}.plan-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #dfe6f1;border-radius:999px;padding:6px 10px;white-space:nowrap;font-size:10px;font-weight:800}.office-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:15px}.office-panel,.card,.calendar-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 5px 18px rgba(15,23,42,.035)}.office-panel{padding:15px}.panel-head,.card-head,.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.panel-head h1,.page-head h1{font-size:22px;margin:2px 0}.panel-actions{display:flex;align-items:center;gap:8px}.panel-actions select,.filters select,.filters input,#reservationRange,.page-head input{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px;color:#536078;font-size:11px}.live-dot{font-size:10px;font-weight:900;color:#16a34a}.office-map{height:690px;border-radius:16px;margin-top:12px;position:relative;overflow:hidden;background:linear-gradient(135deg,#edf5fb,#f8fbfe 45%,#eef3f7);border:1px solid #dfe8f0}.office-map:before{content:"";position:absolute;left:13%;top:42%;width:62%;height:50%;border-radius:20px;background:repeating-linear-gradient(0deg,rgba(108,134,158,.05) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(108,134,158,.05) 0 1px,transparent 1px 28px);border:1px solid rgba(129,151,173,.18)}.map-zone{position:absolute;border:1px solid rgba(149,166,185,.32);background:rgba(255,255,255,.7);backdrop-filter:blur(4px);border-radius:15px;padding:10px;overflow:hidden}.map-zone>b{font-size:11px}.map-zone>small{display:block;font-size:8px;color:#91a0b1}.z-entrance{left:2%;top:3%;width:25%;height:32%;background:linear-gradient(145deg,rgba(236,253,245,.9),rgba(255,255,255,.7))}.z-meeting{left:29%;top:3%;width:27%;height:32%}.z-lounge{right:2%;top:3%;width:25%;height:32%;background:linear-gradient(145deg,rgba(255,251,235,.92),rgba(255,255,255,.72))}.z-remote{right:2%;top:39%;width:20%;height:22%;background:linear-gradient(145deg,rgba(236,254,255,.92),rgba(255,255,255,.72))}.z-outside{right:2%;bottom:4%;width:26%;height:30%;background:linear-gradient(145deg,rgba(245,243,255,.92),rgba(239,246,255,.8))}.z-activity{left:2%;bottom:4%;width:22%;height:22%;background:linear-gradient(145deg,rgba(240,253,250,.9),rgba(255,255,255,.7))}.desk-label{position:absolute;left:14%;top:40%;font-size:11px;font-weight:900;color:#6d7c90}.zone-people{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;align-items:flex-start}.person-token{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #dde6ef;border-radius:10px;padding:5px 7px;box-shadow:0 4px 10px rgba(15,23,42,.06);font-size:9px;font-weight:800;max-width:120px}.person-token .dot{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:8px}.person-token .plan-mini{display:block;font-size:7px;color:#8a5b00}.seat-node{position:absolute;transform:translate(-50%,-50%);width:90px;height:64px;border-radius:11px;border:1px solid #c8d5e3;background:linear-gradient(155deg,#fff,#eaf0f6);box-shadow:0 6px 14px rgba(39,63,85,.10);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:.15s}.seat-node:hover{transform:translate(-50%,-50%) scale(1.03)}.seat-node.empty{border-style:dashed;color:#708298}.seat-node.selected{outline:3px solid #60a5fa;border-color:#2563eb}.seat-node.occupied{background:#eef5ff;border-color:#92b8ea}.seat-node.reserved:after{content:"予約";position:absolute;top:-8px;right:-7px;background:#7c3aed;color:#fff;font-size:7px;font-weight:900;border-radius:999px;padding:2px 5px}.seat-node b{font-size:10px}.seat-node small{font-size:7px;color:#8391a4}.seat-node .seat-person{margin-top:3px;font-size:8px;font-weight:900;color:#1f4f9d}.seat-node.dragging{z-index:20;opacity:.85;cursor:grabbing}.off-strip{position:absolute;left:28%;bottom:3%;width:38%;min-height:48px;border-top:1px dashed #cbd5e1;padding-top:7px;display:flex;gap:10px;align-items:flex-start}.off-strip>b{font-size:9px;color:#8491a4}.off-strip .zone-people{margin:0}.layout-edit-bar{margin-top:10px;padding:9px 11px;border-radius:11px;background:#fff7ed;border:1px solid #fed7aa;display:flex;align-items:center;gap:8px;font-size:11px}.layout-edit-bar span{margin-right:auto}.office-side{display:grid;gap:12px;align-content:start}.card{padding:15px}.card h2{font-size:14px;margin:0}.card-head small{font-size:10px;color:var(--muted)}.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.status-btn{border:1px solid #dfe6ef;background:#fff;border-radius:11px;padding:9px 5px;min-height:58px;display:grid;place-items:center;gap:2px;font-size:10px;font-weight:900;color:#526079}.status-btn i{font-style:normal;font-size:18px}.status-btn.selected{border-color:var(--status);background:color-mix(in srgb,var(--status) 9%,white);color:var(--status);box-shadow:0 0 0 2px color-mix(in srgb,var(--status) 18%,transparent)}.seat-choice{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:8px;margin:8px 0}.seat-choice small{color:var(--muted)}.seat-choice b{font-size:12px;margin-right:auto}.my-card>input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:9px}.reservation-callout{margin-top:10px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:11px;padding:10px;font-size:10px}.reservation-callout b{display:block;color:#6d28d9}.collapse-head{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;font-weight:850;color:#536078;padding:0}.settings-body{display:grid;gap:10px;padding-top:12px}.settings-body>label:not(.switch-row){font-size:11px;font-weight:800}.settings-body input[type=time]{border:1px solid var(--line);border-radius:8px;padding:7px}.switch-row{display:flex!important;grid-template-columns:1fr auto!important;align-items:center;gap:10px}.switch-row span{margin-right:auto}.switch-row b{display:block;color:#39475c}.switch-row small{display:block;color:#8894a7;font-size:9px}.switch-row input[type=checkbox]{width:38px;height:20px;accent-color:#2563eb}.field-caption{font-size:10px;color:#77849a}.weekday-pills{display:flex;gap:4px;flex-wrap:wrap}.weekday-pills label{display:block}.weekday-pills input{display:none}.weekday-pills span{display:grid;place-items:center;width:30px;height:27px;border:1px solid #dce3ec;border-radius:8px;background:#fff;font-size:9px;font-weight:800;color:#768399}.weekday-pills input:checked+span{background:#2563eb;border-color:#2563eb;color:#fff}.tiny-message{font-size:10px;color:#16733b}.filters{display:grid;grid-template-columns:1fr 110px;gap:6px;margin:10px 0}.member-list{max-height:355px;overflow:auto}.member-row{display:grid;grid-template-columns:31px 1fr auto auto;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid #edf1f5}.member-row .avatar{width:29px;height:29px;border-radius:9px;font-size:9px}.member-main b{display:block;font-size:11px}.member-main small{display:block;font-size:8px;color:#8b97aa}.member-status{display:flex;align-items:center;gap:4px;border-radius:999px;padding:3px 7px;background:#f2f5f8;font-size:8px;font-weight:900;color:var(--status)}.fav-btn{border:0;background:transparent;color:#cad2dd;font-size:15px;padding:2px}.fav-btn.on{color:#f59e0b}.history-list{max-height:230px;overflow:auto}.history-item{padding:8px 2px;border-bottom:1px solid #eef2f6;font-size:9px;color:#637087}.history-item b{color:#334155}.history-item time{float:right;color:#9aa4b2}
/* pages */.page-head{padding:10px 2px 18px}.page-head h1{margin:2px 0 0}.page-head p{margin:4px 0;color:var(--muted);font-size:12px}.month-switch{display:flex;align-items:center;gap:9px}.month-switch>button{border:1px solid var(--line);background:#fff;border-radius:8px;width:32px;height:32px}.schedule-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:15px}.calendar-card{padding:12px}.week-head,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.week-head span{text-align:center;padding:7px;font-size:10px;color:#7e8a9d;font-weight:800}.calendar-grid{border-left:1px solid #e8edf3;border-top:1px solid #e8edf3}.calendar-day{min-height:122px;border:0;border-right:1px solid #e8edf3;border-bottom:1px solid #e8edf3;background:#fff;text-align:left;padding:7px;overflow:hidden}.calendar-day:hover{background:#f8fbff}.calendar-day.other{background:#fafbfc;color:#a8b0bd}.calendar-day.selected{box-shadow:inset 0 0 0 2px #3b82f6;background:#f7fbff}.calendar-day.today .day-num{background:#2563eb;color:#fff}.day-num{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;font-size:10px;font-weight:900}.day-events{margin-top:4px;display:grid;gap:3px}.day-event{padding:3px 5px;border-radius:5px;background:#eef4ff;border-left:3px solid var(--event);font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.schedule-side{display:grid;gap:12px;align-content:start}.stack-form{display:grid;gap:10px;margin-top:12px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.repeat-options{display:grid;gap:8px;padding:10px;border-radius:10px;background:#f7f9fc}.plan-list{display:grid;gap:7px;max-height:360px;overflow:auto}.plan-item{border:1px solid #e4e9f1;border-left:4px solid var(--plan);border-radius:9px;padding:9px}.plan-item b{font-size:10px}.plan-item small{display:block;font-size:8px;color:#8894a5}.plan-actions{display:flex;gap:7px;margin-top:5px}.plan-actions button{border:0;background:transparent;color:#2563eb;font-size:9px;padding:0}.plan-actions .danger{color:#dc2626}.reservation-layout{display:grid;grid-template-columns:430px minmax(0,1fr);gap:15px}.reservation-rule{text-align:right}.reservation-rule b{display:block;color:#7c3aed}.reservation-rule span{font-size:9px;color:#7f8ba0}.reservation-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.reservation-form label:nth-last-of-type(1){grid-column:1/-1}.reservation-form button{grid-column:1/-1}.seat-availability{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:15px}.availability-seat{border:1px solid #dce4ed;border-radius:8px;padding:7px;text-align:center;font-size:9px}.availability-seat.busy{background:#f8fafc;color:#a1aab7;text-decoration:line-through}.reservation-list{display:grid;gap:7px;margin-top:12px}.reservation-item{display:grid;grid-template-columns:75px 70px 1fr auto auto;gap:10px;align-items:center;padding:10px;border:1px solid #e5eaf0;border-radius:10px;font-size:10px}.reservation-item .seat-code{font-weight:950;font-size:14px}.reservation-item .state{font-size:8px;border-radius:999px;padding:3px 6px;background:#f3f4f6}.reservation-item button{border:0;background:transparent;color:#2563eb;font-size:9px}.reservation-item button.danger{color:#dc2626}.report-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}.metric-card span{font-size:10px;color:#7c899c}.metric-card b{display:block;font-size:29px;letter-spacing:-.04em}.metric-card small{font-size:9px;color:#97a1af}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.bar-chart{display:grid;gap:9px;margin-top:15px}.bar-row{display:grid;grid-template-columns:90px 1fr 35px;align-items:center;gap:8px;font-size:9px}.bar-track{height:9px;border-radius:999px;background:#eef2f6;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#6366f1)}.report-note p{font-size:11px;color:var(--muted)}
/* admin */.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-wide{grid-column:1/-1}.inline-form{display:grid;grid-template-columns:120px 1fr 1fr 120px 110px auto;gap:7px;margin:12px 0}.admin-list{display:grid;gap:5px;max-height:380px;overflow:auto}.admin-row{display:grid;grid-template-columns:100px 1.2fr 1fr 1fr auto;align-items:center;gap:8px;border-bottom:1px solid #edf1f5;padding:7px;font-size:10px}.admin-row button{border:0;background:#fff1f2;color:#be123c;border-radius:7px;padding:5px 7px;font-size:8px}.status-create{display:grid;grid-template-columns:1fr 80px 80px 150px 120px auto;gap:7px;margin:12px 0}.status-admin-row{display:grid;grid-template-columns:45px 1fr 110px 110px 90px auto;gap:8px;align-items:center;padding:8px;border-bottom:1px solid #edf1f5;font-size:10px}.status-swatch{width:24px;height:24px;border-radius:8px;background:var(--c);display:grid;place-items:center;color:#fff}.qr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.qr-card{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center}.qr-card img{width:76px;height:76px}.qr-card b{display:block}.qr-card small{font-size:8px;color:var(--muted)}
/* TV */.tv-view{position:fixed;inset:0;background:#eef3f8;z-index:100;padding:15px;display:grid;grid-template-rows:60px auto 1fr;gap:12px}.tv-view header{background:#fff;border-radius:15px;padding:0 18px;display:flex;align-items:center;justify-content:space-between}.tv-view header>div{display:flex;align-items:center;gap:10px}.tv-view header strong{font-size:26px}.tv-view header button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px}.tv-plans{display:flex;gap:7px;overflow:auto;background:#fff;border-radius:13px;padding:9px}.tv-main{display:grid;grid-template-columns:1fr 300px;gap:12px;min-height:0}.tv-map{background:#fff;border-radius:15px;overflow:auto;padding:12px}.tv-map .office-map{height:100%;min-height:620px;margin:0}.tv-main aside{background:#fff;border-radius:15px;padding:14px;overflow:auto}.tv-main aside h2{font-size:13px}.tv-summary-row{display:flex;justify-content:space-between;border-bottom:1px solid #edf1f5;padding:7px 0;font-size:11px}.tv-member{padding:6px 0;border-bottom:1px solid #eef2f6;font-size:10px;display:flex;justify-content:space-between}
@media(max-width:1100px){.hero{grid-template-columns:1fr;gap:30px}.hero-board{max-width:680px}.feature-grid{grid-template-columns:repeat(2,1fr)}.office-layout{grid-template-columns:1fr}.office-side{grid-template-columns:repeat(2,1fr)}.my-card,.member-card{grid-row:span 2}.schedule-layout{grid-template-columns:1fr}.schedule-side{grid-template-columns:1fr 1fr}.reservation-layout{grid-template-columns:1fr}.app-brand{width:auto;margin-right:15px}.app-nav button{padding:0 10px}.qr-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.wrap{width:min(100% - 24px,1180px)}.public-header{height:64px}.public-nav{display:none}.hero{padding:52px 0}.hero h1{font-size:38px}.feature-grid,.steps,.content-columns{grid-template-columns:1fr}.section{padding:60px 0}.public-footer .wrap{display:grid;gap:15px}.public-ad{padding-inline:12px}.app-header{padding:0 12px;height:60px}.app-brand small,.app-account>div,.app-nav{display:none}.app-account{margin-left:auto}.mobile-nav{position:fixed;z-index:50;left:8px;right:8px;bottom:8px;height:58px;border:1px solid #dfe5ed;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-radius:17px;display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 12px 30px rgba(15,23,42,.17)}.mobile-nav button{border:0;background:transparent;font-size:17px;color:#6b778a}.mobile-nav button span{display:block;font-size:8px;font-weight:800}.view{padding:12px 10px 85px}.summary-row{grid-template-columns:130px 1fr}.forecast-card{display:none}.status-summary{gap:0}.status-stat{min-width:73px}.status-stat b{font-size:16px}.today-banner{align-items:flex-start}.office-panel{padding:8px}.office-map{height:570px}.panel-actions select{display:none}.office-side{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(4,1fr)}.seat-node{width:72px;height:55px}.schedule-side{grid-template-columns:1fr}.calendar-day{min-height:88px;padding:4px}.day-event{font-size:6px}.page-head{align-items:flex-start}.page-head p{max-width:260px}.month-switch{flex-wrap:wrap;justify-content:flex-end}.reservation-form{grid-template-columns:1fr}.reservation-form label:nth-last-of-type(1),.reservation-form button{grid-column:auto}.reservation-item{grid-template-columns:65px 55px 1fr}.reservation-item .state,.reservation-item button{grid-column:auto}.report-cards{grid-template-columns:1fr 1fr}.report-grid{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}.admin-wide{grid-column:auto}.inline-form,.status-create{grid-template-columns:1fr 1fr}.admin-row{grid-template-columns:70px 1fr auto}.admin-row>*:nth-child(3),.admin-row>*:nth-child(4){display:none}.status-admin-row{grid-template-columns:35px 1fr 90px auto}.status-admin-row>*:nth-child(4),.status-admin-row>*:nth-child(5){display:none}.qr-grid{grid-template-columns:1fr 1fr}.tv-main{grid-template-columns:1fr}.tv-main aside{display:none}.tv-view{padding:7px}.tv-view header strong{font-size:18px}}
@media(max-width:450px){.hero h1{font-size:33px}.hero-actions{display:grid}.hero-board{transform:none}.mini-grid{grid-template-columns:1fr}.mini-zone{height:95px}.feature-grid{grid-template-columns:1fr}.office-map{height:520px}.status-grid{grid-template-columns:repeat(3,1fr)}.summary-row{grid-template-columns:120px 1fr}.status-stat{min-width:67px}.calendar-day{min-height:76px}.day-events .day-event:nth-child(n+3){display:none}.qr-grid{grid-template-columns:1fr}}
.footer-links{display:flex;align-items:center;gap:16px;font-size:11px}.footer-links a:hover{text-decoration:underline}.legal{max-width:900px;padding-top:55px;padding-bottom:90px}.legal h1{font-size:36px;letter-spacing:-.03em}.legal h2{font-size:18px;margin-top:32px}.legal p{color:#5f6d82}.legal-note{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:14px;font-size:12px}@media(max-width:760px){.footer-links{align-items:flex-start;flex-direction:column;gap:7px}.legal h1{font-size:29px}}
.pin-change{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:end;padding-top:4px}.pin-change .field-caption{grid-column:1/-1}.pin-change input{border:1px solid var(--line);border-radius:8px;padding:7px;min-width:0}@media(max-width:450px){.pin-change{grid-template-columns:1fr}.pin-change .field-caption{grid-column:auto}}

/* multi-company auth / invitation */
.public-auth-actions{display:flex;gap:8px;align-items:center}.auth-card{width:min(94vw,470px)}.auth-switch{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px}.auth-help{font-size:9px;color:var(--muted);line-height:1.65;margin-top:13px}.company-code-badge{font-size:10px;font-weight:900;letter-spacing:.08em;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:7px 10px}.invite-form{display:grid;grid-template-columns:130px 1fr 120px 130px auto;gap:8px;align-items:end;margin:14px 0}.invite-result{margin:10px 0 14px}.invite-created{display:grid;grid-template-columns:1fr auto 115px;gap:8px;align-items:center;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px}.invite-created b{grid-column:1/-1}.invite-created input{min-width:0;border:1px solid #bfd1eb;background:#fff;border-radius:8px;padding:8px;font-size:9px}.invite-created img{width:105px;height:105px;grid-row:2/4;grid-column:3}.invite-list{display:grid;gap:6px}.invite-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px;border:1px solid #e5eaf0;border-radius:10px}.invite-row.inactive{opacity:.55;background:#f8fafc}.invite-row b{display:block;font-size:10px}.invite-row small{display:block;font-size:8px;color:var(--muted);margin-top:3px}.invite-row>div:last-child{display:flex;align-items:center;gap:8px}.danger-text{color:#dc2626!important}
@media(max-width:760px){.public-auth-actions #openCreateCompany{display:none}.invite-form{grid-template-columns:1fr 1fr}.invite-form button{grid-column:1/-1}.invite-created{grid-template-columns:1fr}.invite-created img{grid-column:auto;grid-row:auto;width:150px;height:150px;margin:auto}.invite-row{align-items:flex-start;flex-direction:column}.invite-row>div:last-child{flex-wrap:wrap}}

.company-login-info{font-size:9px;color:var(--muted);padding:9px 10px;background:#f8fafc;border:1px solid var(--line);border-radius:9px;display:flex;justify-content:space-between;gap:8px}.company-login-info b{color:#334155;letter-spacing:.05em}

/* =====================================================================
   v1.0.1 UI UPDATE: 現実の会社オフィスに近いフロアマップ
   - 既存の座席クリック / 在席表示 / 配置編集機能は維持
   - 純CSSの家具表現なので外部画像不要
   ===================================================================== */
.office-map.office-map-v2{
  height:720px;
  margin-top:12px;
  border:1px solid #cfd9e5;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(rgba(89,116,145,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(89,116,145,.035) 1px,transparent 1px),
    #f7fafc;
  background-size:26px 26px;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.78);
}
.office-map.office-map-v2:before{content:none}
.office-map-v2 .office-floor-shell{position:absolute;inset:12px;border:5px solid #9aa8b8;border-radius:8px;pointer-events:none;z-index:0;box-shadow:inset 0 0 0 2px #e7edf3}
.office-map-v2 .office-corridor{position:absolute;z-index:0;background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(245,248,251,.92));border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;pointer-events:none}
.office-map-v2 .corridor-top{left:2%;right:2%;top:39%;height:4.5%}
.office-map-v2 .corridor-main{left:14%;right:23%;top:42.5%;bottom:7%;border:1px solid #e1e8ef;border-radius:15px;background:rgba(255,255,255,.62)}
.office-map-v2 .map-zone,.office-map-v2 .meeting-room{position:absolute;border:2px solid #b8c4d0;background:rgba(255,255,255,.94);border-radius:5px;box-shadow:0 4px 13px rgba(42,61,81,.07);overflow:hidden;z-index:1}
.office-map-v2 .map-zone{padding:11px}
.office-map-v2 .room-heading{position:relative;z-index:4;line-height:1.15}
.office-map-v2 .room-heading b{display:block;font-size:12px;color:#182235;letter-spacing:.01em}
.office-map-v2 .room-heading small{display:block;margin-top:4px;font-size:8px;color:#8090a4;font-weight:700}
.office-map-v2 .z-entrance{left:2%;top:3%;width:31.5%;height:34.5%;background:linear-gradient(145deg,#effcf5,#fff 68%)}
.office-map-v2 .meeting-a{left:35%;top:3%;width:14.5%;height:34.5%;background:linear-gradient(180deg,#fff,#f9fbfd)}
.office-map-v2 .meeting-b{left:50.5%;top:3%;width:15%;height:34.5%;background:linear-gradient(180deg,#fff,#f9fbfd)}
.office-map-v2 .meeting-room{padding:11px}
.office-map-v2 .z-lounge{left:67%;right:2%;top:3%;height:34.5%;background:linear-gradient(145deg,#fffbeb,#fff 72%)}
.office-map-v2 .z-activity{left:2%;top:45%;width:11%;height:47%;background:linear-gradient(155deg,#effcf9,#fff)}
.office-map-v2 .z-remote{right:2%;top:43%;width:20%;height:23%;background:linear-gradient(150deg,#ecfeff,#f8fdff)}
.office-map-v2 .z-outside{right:2%;top:68%;width:20%;height:24%;background:linear-gradient(150deg,#f5f3ff,#f8fbff)}
.office-map-v2 .zone-people{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;align-items:flex-start}
.office-map-v2 .z-entrance .zone-people,.office-map-v2 .z-lounge .zone-people{position:absolute;left:10px;right:10px;bottom:9px;margin:0}
.office-map-v2 .side-zone .zone-people,.office-map-v2 .compact-zone .zone-people{margin-top:12px;align-content:flex-start}
.office-map-v2 .compact-zone .person-token{max-width:100%;padding:4px 5px;font-size:8px}
.office-map-v2 .compact-zone .person-token .dot{width:18px;height:18px}

/* 受付 */
.reception-scene,.lounge-scene,.activity-scene,.remote-scene,.outside-scene{position:absolute;inset:0;pointer-events:none;z-index:2}
.reception-counter{position:absolute;left:17%;top:34%;width:40%;height:19%;border:1px solid #aebccc;border-radius:5px;background:linear-gradient(#f8fafc,#dce4ec);box-shadow:0 8px 13px rgba(58,76,95,.10)}
.reception-counter:before{content:"";position:absolute;left:8%;right:8%;top:-6px;height:7px;border-radius:4px;background:#a6b5c6}
.reception-counter i{position:absolute;left:14%;top:28%;width:15px;height:15px;border-radius:50%;background:#79a06f;box-shadow:0 0 0 4px #e8f2e7}
.reception-counter em{font-style:normal;position:absolute;right:16%;top:27%;font-size:9px;font-weight:900;color:#5d6b7e}
.waiting-sofa{position:absolute;left:6%;top:63%;width:27%;height:11%;border-radius:8px 8px 4px 4px;background:#cad5df;border:1px solid #b1bfcd;box-shadow:inset 0 -5px 0 rgba(112,132,151,.12)}
.plant{position:absolute;width:18px;height:18px;color:#5f9a65;font-size:18px;line-height:18px;text-shadow:-5px 2px 0 #7aad6e,5px 2px 0 #83b777}
.plant:after{content:"";position:absolute;left:6px;top:13px;width:8px;height:7px;background:#b8875c;border-radius:1px 1px 4px 4px}
.plant.p1{left:5%;top:40%}.plant.p2{right:5%;top:17%}.plant.lp{right:5%;top:10%}
.entry-door{position:absolute;right:-2px;bottom:18%;width:38px;height:38px;border-left:2px solid #8fa0b1;border-radius:100% 0 0 0;transform:rotate(-8deg);opacity:.8}

/* 会議室 */
.meeting-monitor{position:absolute;top:18%;left:32%;width:36%;height:7%;border-radius:2px;background:#566477;box-shadow:0 0 0 3px #dbe2e9}
.meeting-table{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#e7bc81,#d8a866);box-shadow:0 4px 9px rgba(92,65,31,.15);z-index:1}
.meeting-table.rectangular{width:54%;height:36%;border-radius:7px}
.meeting-table.round{width:50%;aspect-ratio:1;border-radius:50%}
.meeting-table i{position:absolute;width:20%;height:16%;border-radius:4px;background:#8795a4;border:1px solid #738291}
.meeting-table.rectangular i:nth-child(1){left:12%;top:-19%}.meeting-table.rectangular i:nth-child(2){right:12%;top:-19%}.meeting-table.rectangular i:nth-child(3){left:12%;bottom:-19%}.meeting-table.rectangular i:nth-child(4){right:12%;bottom:-19%}
.meeting-table.round i:nth-child(1){left:40%;top:-22%}.meeting-table.round i:nth-child(2){right:-20%;top:42%}.meeting-table.round i:nth-child(3){left:40%;bottom:-22%}.meeting-table.round i:nth-child(4){left:-20%;top:42%}
.meeting-door{position:absolute;left:6%;bottom:-1px;width:28px;height:28px;border-top:2px solid #91a0b0;border-radius:0 100% 0 0;opacity:.75}

/* ラウンジ */
.lounge-sofa{position:absolute;left:35%;top:28%;width:36%;height:19%;border-radius:9px 9px 6px 6px;background:#bfd4e5;border:1px solid #adc3d5;box-shadow:inset 0 -8px 0 rgba(100,134,162,.08)}
.lounge-chair{position:absolute;top:35%;width:16%;height:17%;border-radius:10px;background:#cfe1bf;border:1px solid #bed0ad}
.lounge-chair.lc1{left:12%;transform:rotate(14deg)}.lounge-chair.lc2{right:8%;transform:rotate(-14deg)}
.coffee-table{position:absolute;left:46%;top:54%;width:18%;height:12%;border-radius:50%;background:#ddb77f;border:1px solid #c99f65}
.kitchen-counter{position:absolute;right:2%;top:62%;width:43%;height:10%;border-radius:4px;background:#d8ad72;border:1px solid #c3975d}
.coffee-mark{position:absolute;right:7%;top:15%;font-size:16px;opacity:.55}

/* デスクエリア */
.desk-area-floor{position:absolute;left:14%;right:23%;top:44%;bottom:6%;z-index:1;border:1px solid #d8e0e8;border-radius:14px;background:linear-gradient(rgba(105,125,147,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(105,125,147,.04) 1px,transparent 1px),rgba(250,252,254,.86);background-size:28px 28px;pointer-events:none}
.desk-area-title{position:absolute;left:2%;top:2%;display:flex;align-items:center;gap:6px;color:#5e6e80}
.desk-area-title b{font-size:11px;color:#536274}.desk-area-title small{font-size:7px;color:#91a0af}.desk-title-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#eef3f7;color:#64748b}
.desk-island{position:absolute;left:4%;right:4%;height:22%;border:1px solid #c8d3de;border-radius:6px;background:linear-gradient(180deg,#f1d7b0,#e3bf89);box-shadow:0 5px 10px rgba(86,67,44,.08)}
.desk-island.row-a{top:19%}.desk-island.row-b{top:58%}
.desk-island:before,.desk-island:after{content:"";position:absolute;left:1%;right:1%;height:13%;border-radius:4px;background:repeating-linear-gradient(90deg,#7e8d9a 0 9%,transparent 9% 23%)}
.desk-island:before{top:-14%}.desk-island:after{bottom:-14%}
.desk-line{position:absolute;left:0;right:0;top:49%;border-top:1px solid rgba(128,92,51,.24)}
.desk-island .divider{position:absolute;top:8%;bottom:8%;width:1px;background:rgba(123,88,49,.26)}
.desk-island .d1{left:25%}.desk-island .d2{left:50%}.desk-island .d3{left:75%}
.planter{position:absolute;width:5%;height:12%;border:1px solid #a8b99d;border-radius:4px;background:repeating-linear-gradient(90deg,#6c9b63 0 5px,#86b77a 5px 10px);box-shadow:inset 0 -4px 0 #c3a277}
.planter.pl1{left:23%;top:43%}.planter.pl2{left:48%;top:43%}.planter.pl3{left:73%;top:43%}
.printer{position:absolute;left:1.8%;bottom:5%;width:26px;height:31px;border-radius:4px;background:linear-gradient(#8ea0b2 0 29%,#dce5ed 29% 69%,#9aabba 69%);box-shadow:0 3px 7px rgba(38,54,70,.12)}

/* 活動・リモート・外出 */
.activity-table{position:absolute;left:18%;top:36%;width:52%;aspect-ratio:1;border-radius:50%;background:#ddb77e;border:1px solid #c69a5f}
.activity-scene i{position:absolute;width:18%;height:8%;border-radius:5px;background:#8898a8}
.activity-scene i:nth-child(2){left:35%;top:26%}.activity-scene i:nth-child(3){left:6%;top:49%;transform:rotate(90deg)}.activity-scene i:nth-child(4){left:58%;top:49%;transform:rotate(90deg)}
.remote-scene{height:42%;top:auto;bottom:0;background:rgba(255,255,255,.38)}
.laptop{position:absolute;left:12%;top:15%;width:45px;height:27px;border:2px solid #69798b;border-radius:3px;background:#e8f1f8;display:grid;place-items:center;color:#6b7f93;font-size:12px}.laptop:after{content:"";position:absolute;left:-5px;right:-5px;bottom:-5px;height:4px;border-radius:4px;background:#8797a7}
.remote-line{position:absolute;left:45%;right:8%;top:35%;height:5px;border-radius:999px;background:#d5dee7;box-shadow:0 12px 0 #e3e9ef}
.outside-scene span{position:absolute;font-size:18px;color:#8492a5;opacity:.55}.outside-scene span:first-child{left:11%;top:25%}.outside-scene span:last-child{right:10%;top:23%;font-size:24px;transform:rotate(-10deg)}

/* 座席カード: 既存操作を維持しつつ家具上に自然に配置 */
.office-map-v2 .seat-layer{position:absolute;inset:0;z-index:5}
.office-map-v2 .seat-node{z-index:8;width:84px;height:57px;border-radius:9px;border:1px solid #bfcddd;background:rgba(255,255,255,.96);box-shadow:0 4px 10px rgba(43,63,83,.10);backdrop-filter:blur(2px)}
.office-map-v2 .seat-node.desk-seat{background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(242,247,251,.97))}
.office-map-v2 .seat-node.meeting-seat{width:70px;height:47px;background:rgba(250,252,255,.94);border-color:#b9c7d5}
.office-map-v2 .seat-node:hover{transform:translate(-50%,-50%) scale(1.045);box-shadow:0 7px 16px rgba(37,73,113,.16)}
.office-map-v2 .seat-node.empty{border-style:dashed;color:#6e8195}
.office-map-v2 .seat-node.occupied{background:#eef6ff;border-color:#6da7ec;box-shadow:0 5px 13px rgba(37,99,235,.12)}
.office-map-v2 .seat-node.selected{outline:3px solid rgba(37,99,235,.36);border-color:#2563eb;background:#f0f6ff}
.office-map-v2 .seat-node b{font-size:10px}.office-map-v2 .seat-node small{font-size:7px}.office-map-v2 .seat-node .seat-person{font-size:8px}
.office-map-v2 .meeting-seat small:first-of-type{display:none}
.office-map-v2 .off-strip{left:27%;bottom:1.4%;width:40%;min-height:37px;padding-top:5px;z-index:6;background:rgba(248,250,252,.86);border-top:1px dashed #c5d0dc}

/* 長い認証フォームを必ずスクロール可能にする */
.modal{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px}
.login-card{flex:0 0 auto;margin:auto 0}

@media(max-width:1100px){
  .office-map.office-map-v2{height:690px}
  .office-map-v2 .room-heading b{font-size:11px}
  .office-map-v2 .seat-node{width:78px;height:54px}
  .office-map-v2 .seat-node.meeting-seat{width:66px;height:45px}
}
@media(max-width:760px){
  .office-map.office-map-v2{height:585px}
  .office-map-v2 .office-floor-shell{inset:7px;border-width:3px}
  .office-map-v2 .map-zone,.office-map-v2 .meeting-room{border-width:1px;padding:6px}
  .office-map-v2 .room-heading b{font-size:9px}.office-map-v2 .room-heading small{font-size:6px}
  .office-map-v2 .seat-node{width:66px;height:48px}.office-map-v2 .seat-node.meeting-seat{width:58px;height:41px}
  .office-map-v2 .seat-node b{font-size:8px}.office-map-v2 .seat-node small,.office-map-v2 .seat-node .seat-person{font-size:6px}
  .desk-area-title small{display:none}.desk-area-title b{font-size:9px}
  .reception-counter em,.coffee-mark{display:none}
  .plant{transform:scale(.72)}
  .office-map-v2 .person-token{padding:3px 4px;font-size:7px;gap:3px}.office-map-v2 .person-token .dot{width:16px;height:16px}
  .modal{padding:10px}.login-card{margin:0;width:min(430px,100%);padding:24px 20px}
}
@media(max-width:450px){
  .office-map.office-map-v2{height:535px}
  .office-map-v2 .seat-node{width:59px;height:44px}.office-map-v2 .seat-node.meeting-seat{width:52px;height:38px}
  .office-map-v2 .z-activity{width:12%}.office-map-v2 .compact-zone .room-heading small{display:none}
}


/* =========================================================
   v1.0.2 完成グラフィック背景版
   生成済み高精細オフィスマップを背景にして、操作UIのみ重ねる。
   ========================================================= */
.office-map-scroll{width:100%;overflow:visible;border-radius:16px;margin-top:12px}
.office-map.office-map-v3{
  position:relative;width:100%;height:auto!important;min-height:0!important;aspect-ratio:1476/1065;
  margin-top:0;border-radius:16px;overflow:hidden;background:#f8fafc;border:1px solid #dce4ec;
  box-shadow:0 6px 18px rgba(15,23,42,.045);isolation:isolate
}
.office-map.office-map-v3:before{content:none!important}
.office-map-v3 .office-map-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:0;user-select:none;pointer-events:none}
.office-map-v3 .overlay-zone{position:absolute!important;z-index:3!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;overflow:visible!important;pointer-events:none}
.office-map-v3 .z-entrance{left:2.7%!important;top:4.5%!important;width:23%!important;height:31%!important}
.office-map-v3 .z-lounge{left:66%!important;right:auto!important;top:4.2%!important;width:30.5%!important;height:31.5%!important}
.office-map-v3 .z-activity{left:3.2%!important;top:67%!important;bottom:auto!important;width:13.5%!important;height:26%!important}
.office-map-v3 .z-remote{left:auto!important;right:2.1%!important;top:41%!important;width:17.4%!important;height:23.5%!important}
.office-map-v3 .z-outside{left:auto!important;right:2.1%!important;top:68%!important;bottom:auto!important;width:17.4%!important;height:25%!important}
.office-map-v3 .overlay-zone .zone-people{position:absolute!important;left:4%!important;right:4%!important;bottom:4%!important;display:flex;align-items:flex-end;align-content:flex-end;gap:4px;margin:0!important;pointer-events:auto}
.office-map-v3 .z-activity .zone-people,.office-map-v3 .z-remote .zone-people,.office-map-v3 .z-outside .zone-people{top:20%;bottom:auto!important;align-content:flex-start;align-items:flex-start}
.office-map-v3 .person-token{background:rgba(255,255,255,.91);border:1px solid rgba(203,213,225,.92);box-shadow:0 3px 10px rgba(15,23,42,.10);backdrop-filter:blur(4px);padding:4px 6px;font-size:8px;max-width:112px}
.office-map-v3 .person-token .dot{width:19px;height:19px;border-radius:7px}
.office-map-v3 .seat-layer{position:absolute;inset:0;z-index:5}
.office-map-v3 .seat-node{position:absolute;z-index:8;width:70px;height:42px;border-radius:9px;border:1px solid rgba(148,163,184,.88);background:rgba(255,255,255,.84);box-shadow:0 3px 10px rgba(15,23,42,.11);backdrop-filter:blur(3px);transition:.15s}
.office-map-v3 .seat-node.desk-seat{background:rgba(255,255,255,.82)}
.office-map-v3 .seat-node.meeting-seat{width:58px;height:35px;background:rgba(248,250,252,.88)}
.office-map-v3 .seat-node:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(255,255,255,.98);box-shadow:0 7px 17px rgba(37,73,113,.18)}
.office-map-v3 .seat-node.empty{border-style:dashed;color:#60758a}
.office-map-v3 .seat-node.occupied{background:rgba(235,245,255,.96);border-color:#60a5fa;box-shadow:0 5px 14px rgba(37,99,235,.17)}
.office-map-v3 .seat-node.selected{outline:3px solid rgba(37,99,235,.34);border-color:#2563eb;background:rgba(239,246,255,.98)}
.office-map-v3 .seat-node b{font-size:9px;line-height:1.05}.office-map-v3 .seat-node small{font-size:7px;line-height:1.05}.office-map-v3 .seat-node .seat-person{font-size:7px;line-height:1.05;margin-top:2px}
.office-map-v3 .seat-node>small:first-of-type{display:none}
.office-map-v3 .meeting-seat b{font-size:8px}.office-map-v3 .meeting-seat small,.office-map-v3 .meeting-seat .seat-person{font-size:6px}
.office-map-v3 .off-strip{position:absolute;left:30%;bottom:1.3%;width:42%;min-height:34px;padding:4px 7px;z-index:7;background:rgba(255,255,255,.78);border:1px solid rgba(203,213,225,.70);border-radius:9px;backdrop-filter:blur(4px);display:flex;gap:7px;align-items:center}
.office-map-v3 .off-strip>b{font-size:8px;color:#64748b;white-space:nowrap}.office-map-v3 .off-strip .zone-people{margin:0;gap:3px;display:flex;overflow:hidden;flex-wrap:nowrap}
.office-map-v3 .off-strip .person-token{padding:2px 4px}.office-map-v3 .off-strip .person-token .dot{width:16px;height:16px}

@media(max-width:760px){
  .office-panel{overflow:hidden}
  .office-map-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .office-map.office-map-v3{width:900px;max-width:none;height:auto!important;min-height:0!important}
  .office-map-v3 .seat-node{width:66px;height:40px}.office-map-v3 .seat-node.meeting-seat{width:56px;height:34px}
}
@media(max-width:450px){
  .office-map.office-map-v3{width:820px;height:auto!important}
}


/* v1.0.3: company-editable area names over the fixed office artwork */
.office-map-v3 .area-name-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.office-map-v3 .area-name-chip{
  position:absolute;display:flex;align-items:center;min-height:27px;padding:4px 9px;
  border-radius:8px;background:rgba(255,255,255,.94);border:1px solid rgba(203,213,225,.72);
  box-shadow:0 2px 7px rgba(15,23,42,.08);backdrop-filter:blur(5px);
  color:#14223a;font-size:12px;font-weight:850;line-height:1.1;white-space:nowrap;
}
.office-map-v3 .area-label-entrance{left:10.0%;top:10.1%;min-width:118px}
.office-map-v3 .area-label-meeting-a{left:32.5%;top:10.1%;min-width:104px}
.office-map-v3 .area-label-meeting-b{left:53.0%;top:10.1%;min-width:104px}
.office-map-v3 .area-label-lounge{left:70.6%;top:10.1%;min-width:92px}
.office-map-v3 .area-label-desk{left:20.8%;top:39.6%;min-width:116px}
.office-map-v3 .area-label-activity{left:8.2%;top:70.3%;min-width:112px}
.office-map-v3 .area-label-remote{left:82.1%;top:43.1%;min-width:92px}
.office-map-v3 .area-label-outside{left:81.8%;top:70.5%;min-width:118px}
.area-name-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.area-name-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#475569}
.area-name-form input{width:100%}
.area-name-form-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:2px}
@media(max-width:760px){
  .office-map-v3 .area-name-chip{font-size:10px;min-height:24px;padding:3px 7px}
  .area-name-form{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.area-name-form{grid-template-columns:1fr}}


/* v1.0.4: clean text-free map artwork.
   All visible area names are HTML overlays and therefore editable. */
.office-map-v3 .area-name-chip{
  background:rgba(255,255,255,.96);
  border-color:rgba(203,213,225,.88);
  box-shadow:0 3px 10px rgba(15,23,42,.10);
}


/* =========================================================
   v1.0.6 User avatars
   ========================================================= */
.avatar{overflow:hidden;flex:0 0 auto}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-uploaded{background:#eef2f7;color:transparent}
.avatar-preset{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:19px;line-height:1}
.avatar.small.avatar-preset{font-size:17px}
.avatar-tone-blue{background:linear-gradient(145deg,#dbeafe,#bfdbfe);border-color:#93c5fd}
.avatar-tone-green{background:linear-gradient(145deg,#dcfce7,#bbf7d0);border-color:#86efac}
.avatar-tone-purple{background:linear-gradient(145deg,#ede9fe,#ddd6fe);border-color:#c4b5fd}
.avatar-tone-orange{background:linear-gradient(145deg,#ffedd5,#fed7aa);border-color:#fdba74}
.avatar-tone-blue2{background:linear-gradient(145deg,#e0f2fe,#bae6fd);border-color:#7dd3fc}
.avatar-tone-mint{background:linear-gradient(145deg,#ccfbf1,#99f6e4);border-color:#5eead4}
.avatar-tone-pink{background:linear-gradient(145deg,#fce7f3,#fbcfe8);border-color:#f9a8d4}
.avatar-tone-cyan{background:linear-gradient(145deg,#cffafe,#a5f3fc);border-color:#67e8f9}
.avatar-tone-yellow{background:linear-gradient(145deg,#fef9c3,#fef08a);border-color:#fde047}
.avatar-tone-violet{background:linear-gradient(145deg,#f3e8ff,#e9d5ff);border-color:#d8b4fe}
.avatar-tone-navy{background:linear-gradient(145deg,#dbeafe,#cbd5e1);border-color:#94a3b8}
.avatar-tone-mint2{background:linear-gradient(145deg,#ecfdf5,#d1fae5);border-color:#a7f3d0}

.avatar-settings{border:1px solid #dfe7f0;border-radius:12px;background:#f8fbff;padding:11px;display:grid;gap:9px}
.avatar-settings-head{display:flex;align-items:center;gap:10px}
.avatar-settings-head>div b{display:block;font-size:11px;color:#344257}
.avatar-settings-head>div small{display:block;font-size:8px;color:#8894a7;margin-top:2px}
.avatar-profile-preview{width:48px;height:48px;border-radius:14px;font-size:13px}
.avatar-profile-preview.avatar-preset{font-size:25px}
.avatar-preset-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.avatar-preset-choice{border:1px solid #dce5ef;background:#fff;border-radius:9px;padding:4px;display:grid;place-items:center;cursor:pointer}
.avatar-preset-choice:hover{border-color:#93b7e7;background:#f7fbff}
.avatar-preset-choice.selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.13)}
.avatar-preset-choice .avatar{width:30px;height:30px;border-radius:9px;font-size:16px}
.avatar-upload-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.avatar-upload-label{cursor:pointer}
.avatar-help{color:#8491a4;font-size:8px;line-height:1.5}

.avatar-map{width:21px!important;height:21px!important;border-radius:7px!important;font-size:11px!important}
.person-token{position:relative}
.person-token .person-copy{min-width:0}
.person-status-dot{width:6px;height:6px;border-radius:50%;background:var(--status);position:absolute;left:20px;bottom:3px;border:1px solid #fff}

.seat-occupant{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:2px;max-width:88px}
.avatar-seat{width:18px!important;height:18px!important;border-radius:6px!important;font-size:10px!important}
.seat-node .seat-occupant .seat-person{margin-top:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58px}

.member-row .avatar-member{width:29px;height:29px;border-radius:9px;font-size:15px}
.admin-user-id{display:flex;align-items:center;gap:6px;min-width:0}
.admin-user-id>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-admin{width:25px!important;height:25px!important;border-radius:8px!important;font-size:13px!important}

.tv-member-person{display:flex;align-items:center;gap:7px;min-width:0}
.avatar-tv{width:27px!important;height:27px!important;border-radius:8px!important;font-size:14px!important}
.tv-member{align-items:center;gap:8px}
.tv-member>span{min-width:0}
.tv-member>span>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:760px){
  .avatar-preset-grid{grid-template-columns:repeat(4,1fr)}
  .avatar-profile-preview{width:44px;height:44px}
  .seat-occupant{gap:2px}
  .avatar-seat{width:15px!important;height:15px!important;font-size:8px!important}
}


/* =========================================================
   v1.0.7 Status fields
   ========================================================= */
.office-map-v3 .area-label-meeting-a{left:32.5%;top:8.8%;min-width:104px}
.office-map-v3 .area-label-meeting-b{left:53.0%;top:8.8%;min-width:104px}
.office-map-v3 .area-label-desk{left:20.2%;top:40.0%;min-width:116px}
.office-map-v3 .overlay-zone{overflow:visible!important}
.office-map-v3 .presence-field{position:absolute;z-index:7;pointer-events:auto;display:flex;flex-direction:column;gap:5px;padding:7px;border:1px solid rgba(148,163,184,.72);border-radius:11px;background:rgba(255,255,255,.90);box-shadow:0 4px 14px rgba(15,23,42,.10);backdrop-filter:blur(6px);min-width:0;max-width:100%;box-sizing:border-box}
.office-map-v3 .presence-field-head{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0}
.office-map-v3 .presence-field-head b{font-size:10px;line-height:1.1;color:#16243a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.office-map-v3 .presence-field-head span{flex:0 0 auto;font-size:7px;font-weight:800;color:#66768a;background:#edf2f7;border-radius:999px;padding:2px 5px}
.office-map-v3 .presence-field .zone-people{position:static!important;inset:auto!important;margin:0!important;width:100%;min-height:26px;max-height:76px;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px!important;align-items:start!important;align-content:start!important;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:0 1px 1px}
.office-map-v3 .presence-field:not(.has-people) .zone-people:after{content:'現在 0名';display:flex;align-items:center;justify-content:center;grid-column:1/-1;min-height:24px;font-size:7px;color:#94a3b8}
.office-map-v3 .presence-field .person-token{width:100%;max-width:none;min-width:0;box-sizing:border-box;padding:4px;gap:4px;border-radius:8px;background:rgba(248,250,252,.97);box-shadow:none}
.office-map-v3 .presence-field .person-copy{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.office-map-v3 .presence-field .person-copy>b{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.office-map-v3 .presence-field .plan-mini{font-size:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.office-map-v3 .presence-field .avatar-map{width:19px!important;height:19px!important;border-radius:6px!important}
.office-map-v3 .presence-field .person-status-dot{left:18px;bottom:3px}
.office-map-v3 .z-entrance .presence-field{left:6%;right:6%;bottom:6%;max-height:38%}
.office-map-v3 .z-lounge .presence-field{left:5%;right:5%;top:5%;max-height:38%}
.office-map-v3 .z-activity .presence-field{left:5%;right:5%;top:4%;max-height:45%}
.office-map-v3 .z-remote .presence-field{left:5%;right:5%;top:5%;max-height:54%}
.office-map-v3 .z-outside .presence-field{left:5%;right:5%;top:5%;max-height:54%}
.office-map-v3 .z-remote .presence-field .zone-people,.office-map-v3 .z-outside .presence-field .zone-people,.office-map-v3 .z-activity .presence-field .zone-people{grid-template-columns:1fr}
.office-map-v3 .off-strip.presence-field{left:29%;bottom:1.0%;width:44%;min-height:35px;max-height:78px;padding:5px 7px;display:flex;flex-direction:row;align-items:center;gap:7px}
.office-map-v3 .off-strip.presence-field .presence-field-head{flex:0 0 auto;min-width:66px}
.office-map-v3 .off-strip.presence-field .zone-people{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));min-height:24px;max-height:60px}
.office-map-v3 .off-strip.presence-field:not(.has-people) .zone-people:after{min-height:22px}
.avatar-help{font-size:9px;line-height:1.55}.tiny-message#avatarMessage{min-height:16px;line-height:1.45;color:#475569;font-weight:650}
.search-guide .content-columns{margin-top:18px}.guide-link-row{text-align:center;margin-top:18px}
@media(max-width:760px){.office-map-v3 .presence-field{padding:6px;border-radius:9px}.office-map-v3 .presence-field-head b{font-size:9px}.office-map-v3 .presence-field-head span{font-size:6px}.office-map-v3 .presence-field .zone-people{max-height:68px}.office-map-v3 .presence-field .person-copy>b{font-size:7px}}


/* =========================================================
   v1.0.8 MULTI-USER PRESENCE FIELDS
   Multiple remote/offsite/off-duty users never spill outside
   their assigned map field. Full list remains available from
   the clickable count badge.
   ========================================================= */

.office-map-v3 .presence-field{
  overflow:hidden!important;
  contain:layout paint;
}

.office-map-v3 .presence-field-head{
  position:relative;
  z-index:3;
  flex:0 0 auto;
}

.office-map-v3 .zone-count-button{
  appearance:none;
  border:0;
  cursor:pointer;
  flex:0 0 auto;
  font:inherit;
  font-size:7px;
  font-weight:900;
  line-height:1.2;
  color:#53657b;
  background:#edf2f7;
  border-radius:999px;
  padding:3px 6px;
  transition:.15s;
}
.office-map-v3 .zone-count-button:hover,
.office-map-v3 .zone-count-button:focus-visible{
  color:#1d4ed8;
  background:#dbeafe;
  outline:2px solid rgba(37,99,235,.20);
}
.office-map-v3 .zone-count-button.has-many:after{
  content:' ↗';
  font-size:6px;
}

.office-map-v3 .presence-field .zone-people{
  flex:1 1 auto;
  min-height:0!important;
  max-height:none!important;
  height:auto;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  padding:1px 2px 2px 1px!important;
}

/* Empty / one person */
.office-map-v3 .presence-field.people-1 .zone-people{
  grid-template-columns:minmax(0,1fr)!important;
}

/* Two people: side by side only in sufficiently wide rooms. */
.office-map-v3 .presence-field.people-2 .zone-people,
.office-map-v3 .presence-field.people-3-4 .zone-people,
.office-map-v3 .presence-field.people-5-8 .zone-people,
.office-map-v3 .presence-field.people-many .zone-people{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Narrow fields always keep one readable column. */
.office-map-v3 .z-remote .presence-field .zone-people,
.office-map-v3 .z-outside .presence-field .zone-people,
.office-map-v3 .z-activity .presence-field .zone-people{
  grid-template-columns:minmax(0,1fr)!important;
}

/* Give side fields a stable window height instead of allowing growth. */
.office-map-v3 .z-remote .presence-field{
  height:45%;
  max-height:45%!important;
}
.office-map-v3 .z-outside .presence-field{
  height:45%;
  max-height:45%!important;
}
.office-map-v3 .z-activity .presence-field{
  height:38%;
  max-height:38%!important;
}
.office-map-v3 .z-entrance .presence-field{
  height:32%;
  max-height:32%!important;
}
.office-map-v3 .z-lounge .presence-field{
  height:32%;
  max-height:32%!important;
}

/* Person cards get more compact as occupancy rises. */
.office-map-v3 .presence-field.people-1 .person-token{
  min-height:32px;
}
.office-map-v3 .presence-field.people-3-4 .person-token,
.office-map-v3 .presence-field.people-5-8 .person-token,
.office-map-v3 .presence-field.people-many .person-token{
  padding:3px 4px;
  gap:3px;
}
.office-map-v3 .presence-field.people-5-8 .avatar-map,
.office-map-v3 .presence-field.people-many .avatar-map{
  width:17px!important;
  height:17px!important;
  border-radius:5px!important;
}
.office-map-v3 .presence-field.people-5-8 .person-copy>b,
.office-map-v3 .presence-field.people-many .person-copy>b{
  font-size:6.5px;
}

/* OFF / clocked-out is a dedicated horizontal window:
   1 user = one column, 2 = two columns, 3+ = four columns,
   maximum two visible rows, then internal scrolling. */
.office-map-v3 .off-strip.presence-field{
  left:28%!important;
  bottom:.8%!important;
  width:46%!important;
  min-height:76px!important;
  height:76px!important;
  max-height:76px!important;
  padding:6px 8px!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:7px!important;
}
.office-map-v3 .off-strip.presence-field .presence-field-head{
  min-width:0!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:5px;
}
.office-map-v3 .off-strip.presence-field .zone-people{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:minmax(27px,auto);
  max-height:none!important;
  overflow-y:auto!important;
  align-content:start!important;
}
.office-map-v3 .off-strip.presence-field.people-1 .zone-people{
  grid-template-columns:minmax(0,1fr)!important;
}
.office-map-v3 .off-strip.presence-field.people-2 .zone-people{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.office-map-v3 .off-strip.presence-field:not(.has-people) .zone-people:after{
  min-height:48px!important;
}

/* Hide plan text only in the tightest high-density field;
   full information stays available in the member-list modal. */
.office-map-v3 .presence-field.people-many .plan-mini{
  display:none;
}

/* Full-area roster modal */
body.modal-open{overflow:hidden}
.zone-roster-card{
  width:min(760px,calc(100vw - 28px))!important;
  max-width:760px!important;
  max-height:min(82vh,760px);
  padding:24px!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
}
.zone-roster-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-right:34px;
}
.zone-roster-head h2{
  margin:3px 0 0;
  font-size:22px;
}
.zone-roster-count{
  flex:0 0 auto;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  padding:7px 10px;
}
.zone-roster-list{
  margin-top:12px;
  min-height:80px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:2px 3px 6px 1px;
}
.zone-roster-member{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.avatar-roster{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  font-size:20px!important;
}
.zone-roster-member-main{
  min-width:0;
}
.zone-roster-member-main>b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#182338;
  font-size:12px;
}
.zone-roster-member-main>div{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 7px;
  margin-top:4px;
  color:#728096;
  font-size:9px;
}
.zone-roster-status{
  color:var(--status);
  font-weight:900;
}
.zone-roster-status:before{
  content:'● ';
}
.zone-roster-note{
  flex-basis:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#55657a;
}
.zone-roster-empty{
  grid-column:1/-1;
  display:grid;
  place-items:center;
  min-height:120px;
  color:#94a3b8;
  font-size:12px;
  border:1px dashed #d7e0ea;
  border-radius:12px;
}

/* When the overall map becomes narrow, side-by-side cards are no longer useful. */
@media(max-width:1050px){
  .office-map-v3 .presence-field.people-2 .zone-people,
  .office-map-v3 .presence-field.people-3-4 .zone-people,
  .office-map-v3 .presence-field.people-5-8 .zone-people,
  .office-map-v3 .presence-field.people-many .zone-people{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .office-map-v3 .off-strip.presence-field .zone-people{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:640px){
  .zone-roster-card{
    width:calc(100vw - 16px)!important;
    max-height:88vh;
    padding:18px 14px!important;
  }
  .zone-roster-list{
    grid-template-columns:1fr;
  }
  .zone-roster-head h2{font-size:18px}
  .office-map-v3 .off-strip.presence-field{
    grid-template-columns:58px minmax(0,1fr)!important;
  }
  .office-map-v3 .off-strip.presence-field .zone-people{
    grid-template-columns:minmax(0,1fr)!important;
  }
}


/* =========================================================
   v1.0.9 STATUS/TOMORROW SUMMARY USER LISTS
   ========================================================= */
.status-summary{align-items:stretch}
.status-stat-clickable{
  appearance:none;
  background:transparent;
  border:0;
  border-right:1px solid #edf1f6;
  text-align:left;
  color:inherit;
  cursor:pointer;
  transition:background .14s,box-shadow .14s;
}
.status-stat-clickable:last-child{border-right:0}
.status-stat-clickable:hover,
.status-stat-clickable:focus-visible{
  background:#f8fbff;
  box-shadow:inset 0 0 0 1px #dbeafe;
  outline:none;
  border-radius:10px;
}
.status-stat-clickable small{
  display:block;
  margin-top:2px;
  font-size:7px;
  font-weight:800;
  color:#9aa6b6;
  opacity:.2;
  transition:.14s;
}
.status-stat-clickable:hover small,
.status-stat-clickable:focus-visible small,
.status-stat-clickable.has-users small{opacity:1;color:#2563eb}

.forecast-card-clickable{
  cursor:pointer;
  transition:.14s;
}
.forecast-card-clickable:hover,
.forecast-card-clickable:focus-visible{
  border-color:#b8cdf3;
  box-shadow:0 7px 20px rgba(37,99,235,.08);
  outline:none;
  background:#fbfdff;
}
.forecast-card-clickable.has-plans b{color:#1d4ed8}

.summary-detail-card{
  width:min(820px,calc(100vw - 28px))!important;
  max-width:820px!important;
  max-height:min(84vh,820px);
  padding:24px!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
}
.summary-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-right:34px;
}
.summary-detail-head h2{margin:3px 0 2px;font-size:22px}
.summary-detail-head p{margin:0;max-width:560px}
.summary-detail-count{
  flex:0 0 auto;
  min-width:48px;
  text-align:center;
  border-radius:999px;
  padding:7px 10px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:950;
}
.summary-detail-body{
  min-height:100px;
  margin-top:14px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:2px 3px 6px 1px;
}
.summary-user-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.summary-user-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.avatar-summary{width:42px!important;height:42px!important;border-radius:12px!important;font-size:20px!important}
.summary-user-main{min-width:0}
.summary-user-main>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#182338}
.summary-user-main>div{display:flex;gap:4px 8px;flex-wrap:wrap;margin-top:4px;color:#728096;font-size:8.5px}
.summary-user-note{flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#53657b}
.summary-user-status{
  align-self:center;
  white-space:nowrap;
  border-radius:999px;
  padding:4px 7px;
  background:color-mix(in srgb,var(--status) 10%,white);
  color:var(--status);
  font-size:8px;
  font-weight:900;
}
.summary-detail-empty{
  min-height:140px;
  display:grid;
  place-items:center;
  color:#94a3b8;
  border:1px dashed #d6e0eb;
  border-radius:12px;
  font-size:12px;
}

.tomorrow-group-list{display:grid;gap:12px}
.tomorrow-plan-group{
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.tomorrow-plan-group>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 11px;
  background:#f8fafc;
  border-bottom:1px solid #e8edf3;
}
.tomorrow-plan-group>header span{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:900;color:#334155}
.tomorrow-plan-group>header i{font-style:normal}
.tomorrow-plan-group>header b{font-size:9px;color:#77849a}
.tomorrow-plan-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tomorrow-user-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  min-width:0;
  border-bottom:1px solid #eef2f6;
}
.tomorrow-user-row:nth-last-child(-n+2){border-bottom:0}
.tomorrow-user-main{min-width:0}
.tomorrow-user-main>b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tomorrow-user-main>div{display:flex;flex-wrap:wrap;gap:3px 7px;margin-top:3px;color:#7c899b;font-size:8px}
.tomorrow-plan-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  border-radius:999px;
  background:color-mix(in srgb,var(--plan) 10%,white);
  color:var(--plan);
  padding:4px 7px;
  font-size:8px;
  font-weight:900;
}
.tomorrow-plan-badge i{font-style:normal}

@media(max-width:760px){
  /* Tomorrow list must remain accessible on mobile. */
  .summary-row{grid-template-columns:130px minmax(0,1fr)!important}
  .forecast-card{
    display:block!important;
    grid-column:1/-1;
    min-height:64px;
  }
  .forecast-card button{margin-top:3px}
  .summary-user-list{grid-template-columns:1fr}
  .tomorrow-plan-group>div{grid-template-columns:1fr}
  .tomorrow-user-row:nth-last-child(-n+2){border-bottom:1px solid #eef2f6}
  .tomorrow-user-row:last-child{border-bottom:0}
  .summary-detail-card{
    width:calc(100vw - 16px)!important;
    max-height:88vh;
    padding:18px 14px!important;
  }
  .summary-detail-head h2{font-size:18px}
}
@media(max-width:450px){
  .summary-row{grid-template-columns:120px minmax(0,1fr)!important}
  .status-stat-clickable{min-width:67px}
  .summary-user-row{grid-template-columns:36px minmax(0,1fr);gap:8px}
  .summary-user-status{grid-column:2;justify-self:start}
  .avatar-summary{width:36px!important;height:36px!important;border-radius:10px!important;font-size:17px!important}
}


/* =========================================================
   v1.0.10 LARGE MAP / READABLE PRESENCE UI
   - Desktop map gets priority over the right-side menu.
   - Right-side controls become compact.
   - Presence cards use readable names instead of tiny text.
   - Optional one-click right-side hide/show for maximum map size.
   ========================================================= */

@media(min-width:1101px){
  /* Use more of a large monitor instead of stopping at 1500px. */
  #view-office.view{
    max-width:1900px;
    padding:14px 14px 48px;
  }

  /* 340px -> 252px side rail. The reclaimed width goes to the map. */
  #view-office .office-layout{
    grid-template-columns:minmax(0,1fr) 252px;
    gap:10px;
    align-items:start;
  }

  #view-office .office-panel{
    padding:10px;
    min-width:0;
  }

  #view-office .office-side{
    gap:8px;
    min-width:0;
  }

  #view-office .office-side .card{
    padding:10px;
    border-radius:12px;
  }
  #view-office .office-side .card h2{font-size:12px}
  #view-office .office-side .eyebrow{font-size:7px}
  #view-office .office-side .card-head{gap:8px}

  /* Status controls stay fully usable in a smaller rail. */
  #view-office .office-side .status-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    margin:8px 0;
  }
  #view-office .office-side .status-btn{
    min-height:47px;
    border-radius:9px;
    padding:5px 2px;
    font-size:8px;
  }
  #view-office .office-side .status-btn i{font-size:15px}

  #view-office .office-side .seat-choice{
    padding:6px 7px;
    gap:5px;
    margin:6px 0;
  }
  #view-office .office-side .seat-choice small{font-size:8px}
  #view-office .office-side .seat-choice b{font-size:10px}
  #view-office .office-side .my-card>input{
    padding:8px 9px;
    margin-bottom:6px;
    font-size:10px;
  }
  #view-office .office-side .btn.wide{
    min-height:35px;
    font-size:10px;
  }

  #view-office .office-side .filters{
    grid-template-columns:minmax(0,1fr) 80px;
    gap:4px;
    margin:7px 0;
  }
  #view-office .office-side .filters input,
  #view-office .office-side .filters select{
    min-width:0;
    padding:6px 7px;
    font-size:9px;
  }
  #view-office .office-side .member-list{max-height:260px}
  #view-office .office-side .member-row{
    grid-template-columns:27px minmax(0,1fr) auto auto;
    gap:5px;
    padding:6px 0;
  }
  #view-office .office-side .member-row .avatar{
    width:26px!important;
    height:26px!important;
    border-radius:8px!important;
  }
  #view-office .office-side .member-main b{font-size:9px}
  #view-office .office-side .member-main small{font-size:7px}
  #view-office .office-side .member-status{
    max-width:58px;
    padding:2px 5px;
    font-size:7px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #view-office .office-side .fav-btn{font-size:12px}
  #view-office .office-side .history-list{max-height:135px}
  #view-office .office-side .history-item{padding:6px 0;font-size:8px}

  /* Personal settings stay compact when expanded. */
  #view-office .office-side .settings-body{gap:7px;padding-top:8px}
  #view-office .office-side .avatar-settings{padding:8px;gap:6px}
  #view-office .office-side .avatar-preset-grid{grid-template-columns:repeat(6,1fr);gap:3px}
  #view-office .office-side .avatar-preset-choice{padding:2px}
  #view-office .office-side .avatar-preset-choice .avatar{
    width:25px;height:25px;border-radius:7px;font-size:13px
  }
  #view-office .office-side .avatar-help{font-size:7px}

  /* Maximum-map mode. */
  #view-office .office-layout.side-collapsed{
    grid-template-columns:minmax(0,1fr);
  }
  #view-office .office-layout.side-collapsed .office-side{
    display:none;
  }
}

/* Map controls */
.side-rail-toggle{white-space:nowrap}
@media(max-width:1100px){.side-rail-toggle{display:none!important}}

/* Give the office art almost the entire panel. */
.office-map-scroll{margin-top:8px}
.office-map.office-map-v3{
  border-radius:13px;
}

/* Larger and much more readable seat buttons. */
.office-map-v3 .seat-node{
  width:80px;
  height:50px;
  border-radius:10px;
}
.office-map-v3 .seat-node.meeting-seat{
  width:66px;
  height:42px;
}
.office-map-v3 .seat-node b{
  font-size:11px;
  line-height:1.08;
}
.office-map-v3 .seat-node small,
.office-map-v3 .seat-node .seat-person{
  font-size:8.5px;
  line-height:1.12;
}
.office-map-v3 .meeting-seat b{font-size:10px}
.office-map-v3 .meeting-seat small,
.office-map-v3 .meeting-seat .seat-person{font-size:8px}

/* Area labels should be legible at a glance. */
.office-map-v3 .area-name-chip{
  min-height:30px;
  padding:5px 10px;
  font-size:13px;
  border-radius:9px;
}

/* Widen the real side rooms slightly so people names have enough room. */
.office-map-v3 .z-activity{
  left:2.8%!important;
  width:15.2%!important;
}
.office-map-v3 .z-remote{
  right:1.6%!important;
  width:18.7%!important;
}
.office-map-v3 .z-outside{
  right:1.6%!important;
  width:18.7%!important;
}

/* Presence window typography: no more 6-7px primary names. */
.office-map-v3 .presence-field{
  padding:8px;
  gap:6px;
  border-radius:12px;
}
.office-map-v3 .presence-field-head b{
  font-size:12px;
  line-height:1.15;
  letter-spacing:.01em;
}
.office-map-v3 .zone-count-button{
  font-size:9px;
  padding:4px 7px;
}
.office-map-v3 .presence-field:not(.has-people) .zone-people:after{
  min-height:30px;
  font-size:9px;
}
.office-map-v3 .presence-field .person-token{
  min-height:36px;
  padding:5px 6px;
  gap:6px;
  border-radius:9px;
}
.office-map-v3 .presence-field .avatar-map{
  width:25px!important;
  height:25px!important;
  border-radius:8px!important;
  font-size:12px!important;
}
.office-map-v3 .presence-field .person-status-dot{
  left:23px;
  bottom:3px;
  width:7px;
  height:7px;
}
.office-map-v3 .presence-field .person-copy>b{
  font-size:10px;
  line-height:1.16;
  white-space:normal;
  overflow:hidden;
  text-overflow:clip;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-word;
}
.office-map-v3 .presence-field .plan-mini{
  margin-top:2px;
  font-size:7.5px;
  line-height:1.15;
}

/* For one or two people, use the room height to show names clearly. */
.office-map-v3 .presence-field.people-1 .person-token,
.office-map-v3 .presence-field.people-2 .person-token{
  min-height:40px;
}
.office-map-v3 .presence-field.people-1 .person-copy>b,
.office-map-v3 .presence-field.people-2 .person-copy>b{
  font-size:10.5px;
}

/* High density: still readable, but compact enough to stay inside the field. */
.office-map-v3 .presence-field.people-3-4 .person-copy>b{
  font-size:9px;
  -webkit-line-clamp:2;
}
.office-map-v3 .presence-field.people-5-8 .person-copy>b,
.office-map-v3 .presence-field.people-many .person-copy>b{
  font-size:8px;
  white-space:nowrap;
  display:block;
  text-overflow:ellipsis;
}
.office-map-v3 .presence-field.people-5-8 .plan-mini,
.office-map-v3 .presence-field.people-many .plan-mini{
  display:none;
}

/* Narrow room windows: use more of each actual room. */
.office-map-v3 .z-activity .presence-field{
  left:3%;
  right:3%;
  top:3%;
  height:50%;
  max-height:50%!important;
}
.office-map-v3 .z-remote .presence-field,
.office-map-v3 .z-outside .presence-field{
  left:4%;
  right:4%;
  top:4%;
  height:50%;
  max-height:50%!important;
}

/* Clocked-out field: larger names, but still fixed and scrollable. */
.office-map-v3 .off-strip.presence-field{
  left:26%!important;
  width:50%!important;
  height:82px!important;
  min-height:82px!important;
  max-height:82px!important;
  grid-template-columns:78px minmax(0,1fr)!important;
}
.office-map-v3 .off-strip.presence-field .presence-field-head b{
  font-size:11px;
}
.office-map-v3 .off-strip.presence-field .person-token{
  min-height:31px;
  padding:4px 5px;
}
.office-map-v3 .off-strip.presence-field .avatar-map{
  width:22px!important;
  height:22px!important;
}
.office-map-v3 .off-strip.presence-field .person-copy>b{
  font-size:9px;
}

/* On mid-size desktops, keep the map useful and side rail still compact. */
@media(min-width:1101px) and (max-width:1350px){
  #view-office .office-layout{grid-template-columns:minmax(0,1fr) 228px}
  #view-office .office-side .status-grid{grid-template-columns:repeat(4,1fr)}
  #view-office .office-side .status-btn{font-size:7px;min-height:44px}
  #view-office .office-side .status-btn i{font-size:14px}
}

/* Mobile/tablet retains the existing horizontal map scroll, with readable labels. */
@media(max-width:760px){
  .office-map-v3 .presence-field-head b{font-size:10px}
  .office-map-v3 .zone-count-button{font-size:7px;padding:3px 5px}
  .office-map-v3 .presence-field .person-copy>b{font-size:8px}
  .office-map-v3 .presence-field .avatar-map{width:20px!important;height:20px!important}
  .office-map-v3 .area-name-chip{font-size:11px;min-height:26px;padding:4px 8px}
}


/* =========================================================
   v1.0.12 ADSENSE SAFE PLACEMENTS
   Fixed manual units only. No ads in the office map or modals.
   ========================================================= */
.safe-app-ad{
  width:min(970px,100%);
  min-height:110px;
  margin:28px auto 4px;
  padding:12px 14px;
  border:1px solid #e4eaf2;
  border-radius:14px;
  background:#fbfcfe;
  box-shadow:none;
  overflow:hidden;
  clear:both;
}
.safe-app-ad:before{
  content:'SPONSORED';
  display:block;
  margin-bottom:7px;
  color:#a1aaba;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}
.ad-safe-label{
  color:#a1aaba;
  font-size:8px;
  text-align:center;
  margin-bottom:4px;
}
.guide-ad{
  width:min(970px,calc(100% - 24px));
  min-height:110px;
  margin:30px auto;
  padding:12px;
  border:1px solid #e4eaf2;
  border-radius:14px;
  background:#fbfcfe;
}
.ad-shell.hidden{display:none!important}

/* Keep advertising away from primary form actions and destructive controls. */
#view-schedule .safe-app-ad,
#view-reservation .safe-app-ad,
#view-report .safe-app-ad,
#view-admin .safe-app-ad{
  margin-top:36px;
}
@media(max-width:760px){
  .safe-app-ad,.guide-ad{
    min-height:90px;
    margin-top:24px;
    border-radius:11px;
    padding:9px;
  }
}


/* ============================================================
   v1.0.12 Stylish readable office UI redesign
   - map priority layout
   - compact zone cards that no longer hide seats/rooms
   - slimmer side rail / larger map area
   ============================================================ */
:root{--office-side-width:290px;--office-panel-gap:12px}
.view{max-width:1720px;padding:18px 18px 48px}
.summary-row{grid-template-columns:170px 1fr 185px;gap:10px;margin-bottom:10px}
.office-layout{grid-template-columns:minmax(0,1fr) var(--office-side-width);gap:var(--office-panel-gap);align-items:start}
.office-panel{padding:12px 12px 14px}
.office-side{gap:10px}
.office-panel .panel-head{align-items:flex-start}
.office-panel .panel-head h1{font-size:24px;letter-spacing:-.02em}
.office-panel .panel-actions{flex-wrap:wrap;justify-content:flex-end}
.office-map-scroll{overflow:auto;padding-bottom:2px}
.office-map.office-map-v3{width:min(100%,1560px);max-width:none;height:auto!important;min-height:720px;aspect-ratio:1500/1009;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#eef4f7,#edf3f7)}
.office-map-v3 .office-map-art{object-fit:fill}
.office-map-v3 .area-name-chip{min-height:32px;padding:5px 12px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid rgba(203,213,225,.92);box-shadow:0 10px 25px rgba(15,23,42,.09);font-size:12px;font-weight:900;color:#16243a;letter-spacing:.01em}
.office-map-v3 .presence-field{position:absolute;z-index:7;pointer-events:auto;display:flex;flex-direction:column;gap:5px;padding:7px 8px;border:1px solid rgba(203,213,225,.85);border-radius:14px;background:rgba(255,255,255,.78);box-shadow:0 10px 24px rgba(15,23,42,.10);backdrop-filter:blur(10px);min-width:126px;max-width:196px;width:auto;box-sizing:border-box}
.office-map-v3 .presence-field-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.office-map-v3 .presence-field-head b{font-size:12px;line-height:1.1;color:#132238;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.office-map-v3 .presence-field-head span,.office-map-v3 .zone-count-button{flex:0 0 auto}
.office-map-v3 .zone-count-button{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:28px;padding:0 9px;border:1px solid rgba(191,219,254,.95);border-radius:999px;background:linear-gradient(180deg,#f8fbff,#e8f1ff);color:#234a8d;font-size:12px;font-weight:900;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.92);transition:.15s ease}
.office-map-v3 .zone-count-button:hover,.office-map-v3 .zone-count-button:focus-visible{transform:translateY(-1px);border-color:#60a5fa;background:linear-gradient(180deg,#ffffff,#e9f2ff);color:#1d4ed8;outline:none}
.office-map-v3 .zone-count-button.has-many:after{display:none}
.office-map-v3 .presence-field .zone-people{position:static!important;inset:auto!important;margin:0!important;width:100%;min-height:0;max-height:none;padding:1px 0 0;display:flex!important;flex-wrap:nowrap!important;gap:6px!important;align-items:center!important;align-content:center!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.office-map-v3 .presence-field:not(.has-people) .zone-people{display:none!important}
.office-map-v3 .presence-field .person-token{width:auto;min-width:84px;max-width:118px;flex:0 0 auto;min-height:34px;box-sizing:border-box;padding:4px 6px;gap:5px;border-radius:10px;background:rgba(248,250,252,.96);border:1px solid rgba(226,232,240,.96);box-shadow:none}
.office-map-v3 .presence-field .person-copy{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.office-map-v3 .presence-field .person-copy>b{font-size:10px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.office-map-v3 .presence-field .plan-mini{display:none}
.office-map-v3 .presence-field .avatar-map{width:22px!important;height:22px!important;border-radius:7px!important}
.office-map-v3 .presence-field .person-status-dot{left:20px;bottom:2px}
.office-map-v3 .z-entrance .presence-field{left:4%;top:6%;right:auto;bottom:auto;max-height:none}
.office-map-v3 .z-lounge .presence-field{left:4%;top:6%;right:auto;bottom:auto;max-height:none;max-width:210px}
.office-map-v3 .z-activity .presence-field{left:5%;top:6%;right:auto;bottom:auto;min-width:110px;max-width:150px}
.office-map-v3 .z-remote .presence-field{left:6%;top:6%;right:auto;bottom:auto;min-width:112px;max-width:150px}
.office-map-v3 .z-outside .presence-field{left:6%;top:6%;right:auto;bottom:auto;min-width:126px;max-width:164px}
.office-map-v3 .off-strip.presence-field{left:28%;bottom:1.5%;top:auto;width:42%;min-width:240px;max-width:none;min-height:44px;max-height:62px;padding:6px 8px;display:flex;flex-direction:row;align-items:center;gap:8px;background:rgba(255,255,255,.82)}
.office-map-v3 .off-strip.presence-field .presence-field-head{flex:0 0 auto;min-width:76px}
.office-map-v3 .off-strip.presence-field .zone-people{flex:1;min-width:0}
.office-map-v3 .off-strip.presence-field .person-token{min-width:96px;max-width:132px}
.office-map-v3 .seat-node{width:86px;height:52px;border-radius:12px;border:1px solid rgba(148,163,184,.85);background:rgba(255,255,255,.90);box-shadow:0 6px 16px rgba(15,23,42,.10);backdrop-filter:blur(4px)}
.office-map-v3 .seat-node.meeting-seat{width:70px;height:42px;background:rgba(248,250,252,.92)}
.office-map-v3 .seat-node b{font-size:11px;line-height:1.05}.office-map-v3 .seat-node small{font-size:8px;line-height:1.05}.office-map-v3 .seat-node .seat-person{font-size:8px;line-height:1.05;margin-top:2px}
.office-map-v3 .seat-node>small:first-of-type{display:none}
.office-map-v3 .meeting-seat b{font-size:10px}.office-map-v3 .meeting-seat small,.office-map-v3 .meeting-seat .seat-person{font-size:7px}
.office-map-v3 .seat-node:hover{transform:translate(-50%,-50%) scale(1.04);box-shadow:0 10px 24px rgba(37,73,113,.18)}
.office-map-v3 .seat-node.occupied{background:rgba(241,247,255,.96);border-color:#60a5fa;box-shadow:0 8px 18px rgba(37,99,235,.15)}
.office-map-v3 .seat-node.selected{outline:3px solid rgba(37,99,235,.28)}
.office-map-v3 .seat-occupant{display:flex;align-items:center;gap:4px;margin-top:2px}
.office-map-v3 .seat-occupant .avatar-seat{width:18px!important;height:18px!important;border-radius:6px!important}
.office-side .card{padding:13px}
.office-side .card h2{font-size:13px}
.office-side .member-list{max-height:300px}
.office-side .history-list{max-height:160px}
@media (max-width:1480px){:root{--office-side-width:270px}.view{max-width:1640px}.office-map.office-map-v3{min-height:670px}.office-map-v3 .seat-node{width:80px;height:48px}.office-map-v3 .seat-node.meeting-seat{width:66px;height:40px}.office-map-v3 .presence-field{min-width:118px;max-width:178px}.office-map-v3 .off-strip.presence-field{width:44%}}
@media (max-width:1280px){.office-layout{grid-template-columns:minmax(0,1fr) 250px}.office-map.office-map-v3{min-height:620px}.office-map-v3 .presence-field{padding:6px 7px}.office-map-v3 .presence-field-head b{font-size:11px}.office-map-v3 .zone-count-button{min-width:44px;height:26px;font-size:11px}.office-map-v3 .person-token{min-width:78px;max-width:102px}.office-map-v3 .person-copy>b{font-size:9px}.office-map-v3 .seat-node{width:74px;height:46px}.office-map-v3 .seat-node.meeting-seat{width:61px;height:37px}}
@media (max-width:1100px){.office-layout{grid-template-columns:minmax(0,1fr)}.office-side{order:2}.office-panel{order:1}.office-map.office-map-v3{min-height:580px}.office-map-v3 .off-strip.presence-field{left:24%;width:52%}}
@media (max-width:820px){.view{padding:12px 10px 34px}.summary-row{grid-template-columns:1fr;gap:8px}.office-map-scroll{padding-bottom:0}.office-map.office-map-v3{width:1180px;min-height:auto}.office-map-v3 .presence-field{min-width:104px;max-width:148px;padding:5px 6px}.office-map-v3 .presence-field-head b{font-size:10px}.office-map-v3 .zone-count-button{min-width:38px;height:24px;padding:0 7px;font-size:10px}.office-map-v3 .person-token{min-width:72px;max-width:92px;padding:4px 5px}.office-map-v3 .presence-field .avatar-map{width:18px!important;height:18px!important;border-radius:6px!important}.office-map-v3 .person-copy>b{font-size:8px}.office-map-v3 .seat-node{width:64px;height:38px}.office-map-v3 .seat-node.meeting-seat{width:54px;height:33px}.office-map-v3 .seat-node b{font-size:9px}.office-map-v3 .seat-node .seat-person,.office-map-v3 .seat-node small{font-size:6px}.office-map-v3 .off-strip.presence-field{left:23%;width:54%;min-height:38px;padding:4px 6px}.office-map-v3 .off-strip.presence-field .presence-field-head{min-width:62px}}


/* ============================================================
   v1.0.12 FINAL: clean map / external presence dock
   ============================================================ */
#view-office.view{max-width:1940px;padding:14px 14px 46px}
#view-office .office-layout{grid-template-columns:minmax(0,1fr) 236px;gap:10px;align-items:start}
#view-office .office-panel{padding:10px 10px 12px}
#view-office .office-side{gap:8px}
#view-office .office-side .card{padding:10px;border-radius:12px}
#view-office .office-side .status-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
#view-office .office-side .status-btn{min-height:44px;padding:4px 2px;font-size:7.5px}
#view-office .office-side .status-btn i{font-size:14px}

/* Zone state is outside the office artwork, so rooms and furniture remain visible. */
.map-presence-dock{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  margin:8px 0 8px;
  min-width:0;
}
.map-presence-dock .presence-field{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:48px!important;
  max-height:none!important;
  padding:7px 8px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto 18px!important;
  gap:2px 6px!important;
  border:1px solid #e0e7ef!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96))!important;
  box-shadow:0 5px 16px rgba(15,23,42,.055)!important;
  backdrop-filter:none!important;
  overflow:hidden!important;
  contain:layout paint;
}
.map-presence-dock .presence-field-head{
  grid-column:1/-1;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  min-width:0;
}
.map-presence-dock .presence-field-head b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px!important;
  line-height:1.1!important;
  color:#1e293b!important;
  font-weight:900;
}
.map-presence-dock .zone-count-button{
  min-width:38px!important;
  height:22px!important;
  padding:0 7px!important;
  border:0!important;
  border-radius:999px!important;
  background:#eef4fb!important;
  color:#46617e!important;
  font-size:9px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
.map-presence-dock .zone-count-button:hover,
.map-presence-dock .zone-count-button:focus-visible{
  background:#dbeafe!important;
  color:#1d4ed8!important;
  transform:none!important;
  outline:2px solid rgba(37,99,235,.14)!important;
}
.map-presence-dock .zone-people{
  grid-column:1/-1;
  position:static!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:18px!important;
  max-height:18px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  overflow:hidden!important;
}
.map-presence-dock .presence-field:not(.has-people) .zone-people:after{
  content:'現在 0名'!important;
  display:block!important;
  min-height:0!important;
  color:#a0aec0!important;
  font-size:8px!important;
  line-height:18px!important;
}
.map-presence-dock .person-token{
  width:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  height:22px!important;
  min-height:22px!important;
  margin-right:-4px!important;
  padding:0!important;
  display:block!important;
  flex:0 0 22px!important;
  border:2px solid #fff!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:0 2px 5px rgba(15,23,42,.08)!important;
  overflow:visible!important;
}
.map-presence-dock .person-token:nth-child(n+5){display:none!important}
.map-presence-dock .person-token .person-copy,
.map-presence-dock .person-token .person-status-dot{display:none!important}
.map-presence-dock .person-token .avatar-map{
  width:18px!important;
  height:18px!important;
  border-radius:6px!important;
  font-size:9px!important;
}

/* The office map itself contains only room labels and seat controls. */
.office-map.office-map-v3{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1500/1009!important;
  margin-top:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:0 12px 34px rgba(15,23,42,.08)!important;
}
.office-map-v3 .area-name-chip{
  min-height:27px!important;
  padding:4px 10px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(203,213,225,.86)!important;
  box-shadow:0 5px 13px rgba(15,23,42,.08)!important;
  font-size:11px!important;
}

/* Empty seats are compact pins; occupied seats expand slightly. */
.office-map-v3 .seat-node{
  width:62px!important;
  height:38px!important;
  border-radius:10px!important;
  border:1px solid rgba(148,163,184,.82)!important;
  background:rgba(255,255,255,.90)!important;
  box-shadow:0 4px 11px rgba(15,23,42,.09)!important;
  backdrop-filter:blur(3px)!important;
}
.office-map-v3 .seat-node.meeting-seat{width:56px!important;height:34px!important}
.office-map-v3 .seat-node.occupied{width:82px!important;height:44px!important;background:rgba(239,246,255,.96)!important;border-color:#60a5fa!important}
.office-map-v3 .seat-node b{font-size:10px!important;line-height:1!important}
.office-map-v3 .seat-node small{font-size:7px!important;line-height:1!important}
.office-map-v3 .seat-node>small:first-of-type{display:none!important}
.office-map-v3 .seat-node .seat-person{font-size:7px!important;line-height:1!important;max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.office-map-v3 .seat-occupant{display:flex!important;align-items:center!important;gap:3px!important;margin-top:2px!important;max-width:72px!important}
.office-map-v3 .seat-occupant .avatar-seat{width:15px!important;height:15px!important;border-radius:5px!important;font-size:7px!important}
.office-map-v3 .seat-node:hover{transform:translate(-50%,-50%) scale(1.04)!important;box-shadow:0 8px 18px rgba(37,73,113,.16)!important}

/* v1.0.15: legacy hide rule removed; on-map pods are intentionally visible. */

@media(max-width:1450px){
  #view-office .office-layout{grid-template-columns:minmax(0,1fr) 220px}
  .map-presence-dock{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px){
  #view-office .office-layout{grid-template-columns:minmax(0,1fr)}
  .map-presence-dock{grid-template-columns:repeat(3,minmax(150px,1fr));overflow-x:auto}
}
@media(max-width:760px){
  #view-office.view{padding:10px 8px 34px}
  .map-presence-dock{display:flex;overflow-x:auto;gap:6px;padding-bottom:2px}
  .map-presence-dock .presence-field{flex:0 0 142px!important;min-width:142px!important}
  .office-map.office-map-v3{width:980px!important;max-width:none!important}
  .office-map-v3 .seat-node{width:58px!important;height:35px!important}
  .office-map-v3 .seat-node.occupied{width:76px!important;height:41px!important}
}


/* ==========================================================
   v1.0.15 MAP PRESENCE PODS + PERSONAL REMINDERS
   Presence stays on the map, but only as compact glass pods.
   ========================================================== */
/* v1.0.12 external dock is no longer used. */
.map-presence-dock{display:none!important}

.office-map-v3 .overlay-zone{position:absolute!important;z-index:6!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;pointer-events:none;overflow:visible!important}
.office-map-v3 .z-entrance{left:2.7%!important;top:4.5%!important;width:23%!important;height:31%!important}
.office-map-v3 .z-lounge{left:66%!important;top:4.2%!important;width:30.5%!important;height:31.5%!important}
.office-map-v3 .z-activity{left:3.2%!important;top:67%!important;width:13.5%!important;height:26%!important}
.office-map-v3 .z-remote{right:2.1%!important;top:41%!important;width:17.4%!important;height:23.5%!important}
.office-map-v3 .z-outside{right:2.1%!important;top:68%!important;width:17.4%!important;height:25%!important}

.office-map-v3 .map-presence-pod{
  position:absolute!important;z-index:9!important;pointer-events:auto!important;
  width:auto!important;min-width:112px!important;max-width:184px!important;min-height:42px!important;height:auto!important;max-height:72px!important;
  padding:6px 7px!important;border:1px solid rgba(203,213,225,.86)!important;border-radius:13px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,250,253,.89))!important;
  box-shadow:0 7px 20px rgba(15,23,42,.11)!important;backdrop-filter:blur(9px)!important;
  display:flex!important;flex-direction:column!important;gap:4px!important;overflow:hidden!important;contain:layout paint;
}
.office-map-v3 .z-entrance .map-presence-pod{left:5%!important;top:7%!important}
.office-map-v3 .z-lounge .map-presence-pod{right:4%!important;top:7%!important;left:auto!important}
.office-map-v3 .z-activity .map-presence-pod{left:5%!important;bottom:6%!important;top:auto!important;min-width:105px!important;max-width:130px!important}
.office-map-v3 .z-remote .map-presence-pod{right:5%!important;top:6%!important;left:auto!important;min-width:108px!important;max-width:144px!important}
.office-map-v3 .z-outside .map-presence-pod{right:5%!important;bottom:6%!important;top:auto!important;left:auto!important;min-width:116px!important;max-width:154px!important}
.office-map-v3 .map-presence-pod .presence-field-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;min-width:0!important}
.office-map-v3 .map-presence-pod .presence-field-head b{font-size:10.5px!important;line-height:1.05!important;color:#17243a!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.office-map-v3 .map-presence-pod .zone-count-button{min-width:36px!important;height:22px!important;padding:0 7px!important;border:0!important;border-radius:999px!important;background:#eaf2ff!important;color:#24539a!important;font-size:9px!important;font-weight:950!important;box-shadow:none!important}
.office-map-v3 .map-presence-pod .zone-count-button:hover{background:#d9e9ff!important;color:#1d4ed8!important}
.office-map-v3 .map-presence-pod .zone-people{position:static!important;inset:auto!important;margin:0!important;width:100%!important;min-height:0!important;max-height:34px!important;padding:0!important;display:flex!important;flex-wrap:nowrap!important;gap:3px!important;align-items:center!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important}
.office-map-v3 .map-presence-pod .zone-people::-webkit-scrollbar{display:none}
.office-map-v3 .map-presence-pod:not(.has-people) .zone-people{display:none!important}
.office-map-v3 .map-presence-pod .person-token{position:relative!important;display:flex!important;align-items:center!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:100px!important;min-height:26px!important;padding:2px 4px!important;gap:4px!important;border:1px solid rgba(226,232,240,.94)!important;border-radius:9px!important;background:rgba(255,255,255,.95)!important;box-shadow:none!important}
.office-map-v3 .map-presence-pod .avatar-map{width:20px!important;height:20px!important;border-radius:7px!important;font-size:10px!important;flex:0 0 auto!important}
.office-map-v3 .map-presence-pod .person-copy{min-width:0!important;max-width:66px!important}
.office-map-v3 .map-presence-pod .person-copy>b{font-size:8px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}
.office-map-v3 .map-presence-pod .plan-mini,.office-map-v3 .map-presence-pod .person-status-dot{display:none!important}
/* 3+ users: avatar stack only, so the room remains visible. */
.office-map-v3 .map-presence-pod.people-3-4 .person-copy,
.office-map-v3 .map-presence-pod.people-5-8 .person-copy,
.office-map-v3 .map-presence-pod.people-many .person-copy{display:none!important}
.office-map-v3 .map-presence-pod.people-3-4 .person-token,
.office-map-v3 .map-presence-pod.people-5-8 .person-token,
.office-map-v3 .map-presence-pod.people-many .person-token{padding:2px!important;border-radius:999px!important}

/* Clocked-out: one thin strip at the bottom edge of the art. */
.office-map-v3 .off-strip.map-presence-pod{left:29%!important;bottom:1.1%!important;top:auto!important;width:42%!important;min-width:280px!important;max-width:none!important;min-height:38px!important;max-height:48px!important;padding:5px 7px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important;background:rgba(255,255,255,.90)!important}
.office-map-v3 .off-strip.map-presence-pod .presence-field-head{flex:0 0 auto!important;min-width:78px!important}
.office-map-v3 .off-strip.map-presence-pod .zone-people{flex:1!important;min-width:0!important}
.office-map-v3 .off-strip.map-presence-pod .person-token{max-width:96px!important}

/* Personal reminder mini card */
.reminder-card{background:linear-gradient(180deg,#fff,#fbfcff)}
.reminder-mini-list{display:grid;gap:5px;margin-top:8px}
.reminder-empty-mini{padding:9px;border:1px dashed #dbe3ee;border-radius:9px;text-align:center;color:#9aa7b7;font-size:9px}
.reminder-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;padding:7px 7px;border:1px solid #e5eaf1;border-radius:10px;background:#fff}
.reminder-row:not(.full){grid-template-columns:22px minmax(0,1fr);padding:6px}
.reminder-bell{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:#fff7ed;font-size:11px}
.reminder-row-main{min-width:0}
.reminder-row-main b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#263548}
.reminder-row-main small{display:block;margin-top:2px;font-size:7.5px;color:#7c8999}
.reminder-row-main em{display:block;margin-top:3px;font-style:normal;font-size:8px;color:#64748b;white-space:pre-wrap}
.reminder-open-all{display:block;margin:7px 0 0 auto;font-size:8px}
.reminder-row-actions{display:flex;gap:4px;white-space:nowrap}

.reminder-modal-card{width:min(900px,calc(100vw - 28px))!important;max-width:900px!important;max-height:min(86vh,840px);padding:24px!important;display:flex;flex-direction:column;overflow:hidden!important}
.reminder-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-right:34px}
.reminder-modal-head h2{margin:3px 0 4px;font-size:22px}.reminder-modal-head p{margin:0;max-width:650px}
.reminder-modal-grid{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px;min-height:0;margin-top:15px}
.reminder-form{padding:13px;border:1px solid #e3e9f1;border-radius:13px;background:#f9fbfd;align-self:start}
.reminder-form-actions{display:flex;gap:7px}.reminder-full-list{display:grid;gap:7px;max-height:480px;overflow:auto;padding-right:3px;scrollbar-gutter:stable}
.reminder-full-list .reminder-row{padding:9px}.reminder-full-list .reminder-row-main b{font-size:11px}.reminder-full-list .reminder-row-main small{font-size:8.5px}
.reminder-toast-host{position:fixed;right:18px;bottom:18px;z-index:120;display:grid;gap:8px;width:min(360px,calc(100vw - 28px));pointer-events:none}
.reminder-toast{pointer-events:auto;display:grid;grid-template-columns:30px minmax(0,1fr) 24px;align-items:center;gap:8px;padding:11px 12px;border:1px solid #d7e3f1;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 16px 44px rgba(15,23,42,.18);backdrop-filter:blur(10px)}
.reminder-toast>span{font-size:17px}.reminder-toast b{display:block;font-size:11px;color:#1e293b}.reminder-toast small{display:block;margin-top:2px;font-size:8.5px;color:#64748b}.reminder-toast button{border:0;background:#f1f5f9;border-radius:7px;width:22px;height:22px;color:#64748b;cursor:pointer}

@media(max-width:1100px){.reminder-modal-grid{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:760px){.reminder-modal-card{width:calc(100vw - 14px)!important;max-height:92vh;padding:17px 13px!important}.reminder-modal-grid{grid-template-columns:1fr;overflow:auto}.reminder-full-list{max-height:none}.office-map-v3 .map-presence-pod{transform:scale(.9);transform-origin:top left}.office-map-v3 .z-lounge .map-presence-pod,.office-map-v3 .z-remote .map-presence-pod,.office-map-v3 .z-outside .map-presence-pod{transform-origin:top right}.office-map-v3 .off-strip.map-presence-pod{transform:none}}


/* ==========================================================
   v1.0.15 DEBUGGED MAP STATUS PODS + REMINDER FORM
   Fixes the v1.0.15 specificity bug that hid all non-seat pods.
   ========================================================== */
/* Explicitly win over every previous presence-field layout rule. */
.office-map-v3 .overlay-zone .presence-field.map-presence-pod{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
.office-map-v3 .off-strip.presence-field.map-presence-pod{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Empty pods remain as small area/status locators; occupied pods expand only as needed. */
.office-map-v3 .map-presence-pod:not(.has-people){
  min-height:34px!important;
  max-height:38px!important;
  padding:5px 7px!important;
}
.office-map-v3 .map-presence-pod.has-people{
  min-height:48px!important;
  max-height:86px!important;
}
.office-map-v3 .map-presence-pod:not(.has-people) .zone-status-breakdown,
.office-map-v3 .map-presence-pod:not(.has-people) .zone-people{display:none!important}

/* Show exactly what the non-seat people are doing: 4S / 出張 / 外出 / 在宅 / 休憩 etc. */
.office-map-v3 .zone-status-breakdown{
  display:flex;align-items:center;gap:3px;max-width:100%;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;min-height:17px;
}
.office-map-v3 .zone-status-breakdown::-webkit-scrollbar{display:none}
.office-map-v3 .zone-status-chip{
  display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;height:17px;padding:0 5px;
  border:1px solid color-mix(in srgb,var(--status) 22%,#e2e8f0);border-radius:999px;
  background:color-mix(in srgb,var(--status) 8%,white);color:var(--status);
  font-size:7px;font-weight:900;white-space:nowrap;
}
.office-map-v3 .zone-status-chip i{font-style:normal;font-size:8px}
.office-map-v3 .zone-status-chip b{font-size:7px;color:inherit}
.office-map-v3 .zone-status-chip em{font-style:normal;font-size:7px;color:#506078}
.office-map-v3 .map-status-mini{
  display:block!important;margin-top:1px;font-size:6.8px!important;line-height:1!important;
  color:var(--status)!important;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.office-map-v3 .map-presence-pod.people-3-4 .map-status-mini,
.office-map-v3 .map-presence-pod.people-5-8 .map-status-mini,
.office-map-v3 .map-presence-pod.people-many .map-status-mini{display:none!important}

/* Keep pods in room corners and away from desks/seats. */
.office-map-v3 .z-entrance .map-presence-pod{left:4%!important;top:5%!important;max-width:176px!important}
.office-map-v3 .z-lounge .map-presence-pod{right:3%!important;top:5%!important;max-width:180px!important}
.office-map-v3 .z-activity .map-presence-pod{left:4%!important;bottom:5%!important;max-width:142px!important}
.office-map-v3 .z-remote .map-presence-pod{right:4%!important;top:5%!important;max-width:152px!important}
.office-map-v3 .z-outside .map-presence-pod{right:4%!important;top:5%!important;bottom:auto!important;max-width:158px!important}
.office-map-v3 .off-strip.map-presence-pod{left:29%!important;bottom:1.0%!important;width:42%!important;max-height:58px!important}

/* Reminder: registration must always be discoverable at common laptop heights. */
.reminder-modal-card{
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
.reminder-modal-head{
  position:sticky;top:-24px;z-index:8;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);padding-top:24px;padding-bottom:10px;margin-top:-24px;
  border-bottom:1px solid rgba(226,232,240,.78);
}
.reminder-modal-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.reminder-header-submit{min-width:92px;min-height:36px;padding:0 14px;white-space:nowrap}
.reminder-modal-grid{align-items:start;overflow:visible!important}
.reminder-form{
  max-height:calc(86vh - 175px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  padding:12px!important;
}
.reminder-form label{gap:5px}
.reminder-form .two-col{gap:8px}
.reminder-form-actions{
  position:sticky;bottom:-12px;z-index:4;margin:8px -12px -12px;padding:10px 12px 12px;
  background:linear-gradient(180deg,rgba(249,251,253,.72),#f9fbfd 25%);
  border-top:1px solid #e3e9f1;
}
#reminderSubmitButton{min-height:38px;min-width:110px}
#reminderHeaderSubmit:disabled,#reminderSubmitButton:disabled{opacity:.55;cursor:wait}

@media(max-height:760px) and (min-width:761px){
  .reminder-modal-card{max-height:94vh!important;padding:18px!important}
  .reminder-modal-head{top:-18px;padding-top:18px;margin-top:-18px}
  .reminder-modal-head h2{font-size:19px}
  .reminder-modal-head p{font-size:10px;line-height:1.45}
  .reminder-modal-grid{margin-top:10px;grid-template-columns:300px minmax(0,1fr)}
  .reminder-form{max-height:calc(94vh - 145px)}
}
@media(max-width:760px){
  .reminder-modal-head{top:-17px;padding-top:17px;margin-top:-17px;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .reminder-modal-head p{grid-column:1/-1}
  .reminder-modal-head-actions{align-self:start}
  .reminder-header-submit{min-width:76px;min-height:34px;padding:0 10px;font-size:10px}
  .reminder-form{max-height:none;overflow:visible}
}


/* =========================================================
   v1.0.15 Clock seconds / weekday / personal weather
   ========================================================= */
.summary-row{grid-template-columns:235px minmax(0,1fr) 190px}
.date-weather-card{grid-template-columns:1fr auto auto;gap:0 7px;min-height:82px;align-content:center}
.date-weather-card>b{font-size:12px;white-space:nowrap}
.date-weather-card>strong{font-variant-numeric:tabular-nums;font-size:25px;letter-spacing:-.025em;white-space:nowrap}
.date-weather-card>small{align-self:center;font-size:8px}
.weather-mini{grid-column:1/-1;margin-top:7px;padding-top:6px;border-top:1px solid #edf1f6;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 5px;min-width:0;color:#536078}
.weather-mini.hidden{display:none!important}
.weather-mini-icon{grid-row:1/3;font-size:21px;line-height:1}
.weather-mini-place{min-width:0;font-size:9px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weather-mini>b{font-size:12px;color:#172033;text-align:right}
.weather-mini>small{min-width:0;font-size:7.5px;color:#7c899c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weather-mini-range{font-size:7.5px;color:#617187;text-align:right;white-space:nowrap}
.weather-settings-box{display:grid;gap:8px;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fbff}
.weather-settings-title{display:flex;align-items:center;gap:8px}
.weather-settings-title>span{font-size:20px}.weather-settings-title b{display:block;font-size:10px}.weather-settings-title small{display:block;margin-top:2px;font-size:7px;color:#7a879a}
.weather-switch{margin:0!important}
.weather-setting-actions{display:flex;gap:6px;flex-wrap:wrap}
.weather-setting-preview{min-height:42px;padding:8px;border:1px solid #e1e8f0;border-radius:9px;background:#fff;font-size:8px;line-height:1.5}
.weather-current-preview{display:flex;align-items:center;gap:7px}.weather-current-preview>span{font-size:25px}.weather-current-preview b{display:block;font-size:10px;color:#263449}.weather-current-preview small{display:block;color:#758399;font-size:7.5px}
.weather-forecast-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.weather-forecast-chip{padding:4px 6px;border-radius:999px;background:#f1f5f9;color:#536277;font-size:7px;white-space:nowrap}.weather-forecast-chip b{color:#263449}
.weather-disclaimer{display:block;color:#8793a4;font-size:6.5px;line-height:1.45}.weather-disclaimer a{color:#607da8;text-decoration:none}.weather-error{color:#b91c1c}
.faq .section-head p{margin-top:8px;color:#7b8799;font-size:13px}
@media(max-width:980px){.summary-row{grid-template-columns:220px minmax(0,1fr)}.forecast-card{grid-column:1/-1}.date-weather-card>strong{font-size:23px}}
@media(max-width:760px){.summary-row{grid-template-columns:1fr!important}.date-weather-card{min-height:76px}.date-weather-card>strong{font-size:24px}.weather-mini{grid-template-columns:auto minmax(0,1fr) auto}}


/* ============================================================
   v1.0.17 PERSONAL SETTINGS / REALTIME / DARK MODE
   個人設定を細い右サイド内で展開しない。
   デスクトップ・小画面・高DPI/拡大表示でも崩れない専用モーダル。
   ============================================================ */

.settings-launch-card{
  padding:0!important;
  overflow:hidden;
}
.settings-launch-button{
  width:100%;
  min-width:0;
  border:0;
  background:#fff;
  padding:12px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 20px;
  gap:9px;
  align-items:center;
  text-align:left;
  color:var(--text);
  transition:background .15s ease,box-shadow .15s ease;
}
.settings-launch-button:hover,
.settings-launch-button:focus-visible{
  background:#f8fbff;
  outline:none;
  box-shadow:inset 0 0 0 1px #dbeafe;
}
.settings-launch-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#eff6ff;
  display:grid;
  place-items:center;
  font-size:16px;
}
.settings-launch-copy{
  min-width:0;
}
.settings-launch-copy b{
  display:block;
  font-size:11px;
  color:#263449;
}
.settings-launch-copy small{
  display:block;
  margin-top:2px;
  color:#8290a4;
  font-size:7.5px;
  line-height:1.35;
  white-space:normal;
}
.settings-launch-arrow{
  justify-self:end;
  color:#8190a5;
  font-size:22px;
  line-height:1;
}

.settings-modal{
  padding:18px!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.settings-modal-card{
  position:relative;
  z-index:1;
  width:min(920px,calc(100vw - 36px));
  max-height:min(86vh,900px);
  background:#f8fafc;
  border:1px solid rgba(226,232,240,.95);
  border-radius:22px;
  box-shadow:0 30px 100px rgba(15,23,42,.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.settings-modal-head{
  flex:0 0 auto;
  position:relative;
  padding:22px 66px 16px 24px;
  background:#fff;
  border-bottom:1px solid #e7ecf3;
}
.settings-modal-head h2{
  margin:3px 0 2px;
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.settings-modal-head p{
  margin:0;
  color:#7b8799;
  font-size:10px;
}
.settings-modal-close{
  position:absolute;
  top:16px;
  right:18px;
  width:38px;
  height:38px;
  border:1px solid #e2e8f0;
  border-radius:11px;
  background:#fff;
  color:#68778d;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
}
.settings-modal-close:hover{
  background:#f8fafc;
  color:#172033;
}

.settings-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:16px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px!important;
  align-content:start;
}
.settings-section{
  min-width:0;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:15px;
  padding:14px;
  display:grid;
  gap:10px;
  align-content:start;
}
.settings-section-head{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.settings-section-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f1f5f9;
  font-size:17px;
}
.settings-section-head>div{
  min-width:0;
}
.settings-section-head b{
  display:block;
  color:#263449;
  font-size:12px;
}
.settings-section-head small{
  display:block;
  margin-top:1px;
  color:#8793a5;
  font-size:8px;
  line-height:1.35;
}
.settings-account-section,
.settings-weather-section,
.settings-save-message{
  grid-column:1/-1;
}
.settings-account-section{
  padding:10px 14px;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
}
.settings-account-section .settings-section-head{
  min-width:175px;
}
.settings-account-info{
  min-width:0;
  display:flex!important;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px 14px;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#6d7b90;
  font-size:9px;
}
.settings-account-info span{
  min-width:0;
  white-space:nowrap;
}
.settings-account-info b{
  color:#263449;
  font-size:10px;
}

.settings-avatar-box{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  gap:8px!important;
}
.settings-avatar-box .avatar-settings-head{
  gap:8px;
}
.settings-avatar-box .avatar-preset-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:5px!important;
}
.settings-avatar-box .avatar-preset-choice{
  min-width:0;
  padding:3px!important;
}
.settings-avatar-box .avatar-preset-choice .avatar{
  width:30px!important;
  height:30px!important;
  border-radius:8px!important;
  font-size:14px!important;
}
.settings-avatar-box .avatar-upload-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.settings-avatar-box .avatar-help{
  font-size:7.5px!important;
  line-height:1.5;
}

.settings-switch-row{
  width:100%;
  min-width:0;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px;
  align-items:center;
}
.settings-switch-row span{
  min-width:0;
  margin:0!important;
}
.settings-switch-row b{
  font-size:10px;
}
.settings-switch-row small{
  font-size:7.5px;
  line-height:1.4;
}
.settings-switch-row input[type=checkbox]{
  flex:0 0 auto;
  width:40px!important;
  height:22px!important;
}

.settings-auto-grid{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:10px;
  align-items:end;
}
.settings-field{
  min-width:0;
  display:grid!important;
  gap:5px;
  color:#536078;
  font-size:9px!important;
  font-weight:850;
}
.settings-field input{
  width:100%;
  min-width:0;
  border:1px solid #dce3ed;
  border-radius:9px;
  background:#fff;
  color:var(--text);
  padding:9px 10px;
  font-size:10px;
  outline:none;
}
.settings-field input:focus{
  border-color:#8fb1ef;
  box-shadow:0 0 0 3px #eef4ff;
}
.settings-field>small{
  color:#8894a7;
  font-size:7px;
  font-weight:500;
  line-height:1.45;
}

.settings-weekday-pills{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px!important;
}
.settings-weekday-pills label{
  min-width:0;
}
.settings-weekday-pills span{
  width:100%!important;
  min-width:0;
  height:31px!important;
  border-radius:8px!important;
  font-size:9px!important;
}

.settings-weather-box{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  gap:10px!important;
}
.weather-location-field input{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.weather-setting-actions{
  display:flex!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
.weather-setting-actions .btn{
  min-width:120px;
}
.weather-setting-preview{
  min-height:62px!important;
  padding:10px!important;
  border-radius:10px!important;
  font-size:8.5px!important;
}
.weather-disclaimer{
  font-size:7px!important;
  line-height:1.5!important;
}

.settings-password-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
  gap:6px!important;
  padding:0!important;
}
.settings-password-grid input{
  width:100%;
  min-width:0;
  padding:9px 10px!important;
  font-size:9px;
}
.settings-password-grid .btn{
  align-self:stretch;
  white-space:nowrap;
}

.settings-save-message{
  min-height:20px;
  padding:0 2px;
  color:#16733b;
  font-size:9px;
}

/* Prevent old sidebar compact rules from shrinking modal controls. */
#settingsModal .settings-modal-body,
#settingsModal .settings-modal-body *{
  max-width:100%;
}
#settingsModal .btn{
  font-size:10px;
}
#settingsModal input,
#settingsModal select,
#settingsModal textarea{
  min-width:0;
}

/* Tablet / high zoom: one column, still centered and scrollable. */
@media(max-width:900px){
  .settings-modal{
    padding:10px!important;
  }
  .settings-modal-card{
    width:min(720px,calc(100vw - 20px));
    max-height:92vh;
    border-radius:18px;
  }
  .settings-modal-body{
    grid-template-columns:1fr;
    padding:12px;
  }
  .settings-account-section,
  .settings-weather-section,
  .settings-save-message{
    grid-column:auto;
  }
  .settings-account-section{
    grid-template-columns:1fr;
  }
  .settings-account-info{
    justify-content:flex-start;
  }
}

/* Phone: full-height sheet. No horizontal clipping. */
@media(max-width:560px){
  .settings-modal{
    padding:0!important;
    align-items:stretch!important;
  }
  .settings-modal-card{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    border:0;
  }
  .settings-modal-head{
    padding:17px 56px 13px 15px;
  }
  .settings-modal-head h2{
    font-size:20px;
  }
  .settings-modal-body{
    padding:10px;
    gap:9px!important;
  }
  .settings-section{
    padding:12px;
    border-radius:13px;
  }
  .settings-auto-grid{
    grid-template-columns:1fr;
  }
  .settings-password-grid{
    grid-template-columns:1fr!important;
  }
  .settings-password-grid .btn{
    width:100%;
    min-height:38px;
  }
  .settings-avatar-box .avatar-preset-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .weather-setting-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
  }
  .weather-setting-actions .btn{
    min-width:0;
    width:100%;
  }
}

/* Extra narrow screens */
@media(max-width:360px){
  .settings-weekday-pills{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .weather-setting-actions{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   v1.0.17 realtime / TV weather / personal dark mode
   ============================================================ */
.tv-view header{grid-template-columns:auto minmax(320px,1fr) auto;gap:14px}
.tv-view header .tv-brand-block,.tv-view header .tv-header-actions{display:flex;align-items:center;gap:10px}
.tv-view header>.tv-weather{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;padding:7px 11px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}
.tv-weather-current{display:flex;align-items:center;gap:7px;min-width:0}.tv-weather-current>span{font-size:24px}.tv-weather-current div{min-width:0}.tv-weather-current b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tv-weather-current small{display:block;font-size:8px;color:#738096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-weather-days{display:flex;gap:6px;min-width:0;overflow:hidden}.tv-weather-days>span{white-space:nowrap;border-radius:9px;background:#fff;border:1px solid #e4e9f0;padding:5px 7px;font-size:8px;color:#536078}.tv-weather-days b{color:#25364f}.tv-weather-days em{font-style:normal;color:#2563eb}
.settings-theme-section select{width:100%;min-width:0;border:1px solid #dce3ed;border-radius:9px;background:#fff;color:var(--text);padding:9px 10px;font-size:10px;outline:none}.settings-theme-section select:focus{border-color:#8fb1ef;box-shadow:0 0 0 3px #eef4ff}
html[data-realtime="connected"] .live-dot{color:#16a34a}html[data-realtime="reconnecting"] .live-dot{color:#d97706}html[data-realtime="reconnecting"] .live-dot:after{content:' 再接続中';font-size:7px;color:#a16207}

/* Dark mode is a personal display preference. The office artwork is dimmed,
   but interactive seats/pods remain crisp and readable. */
html[data-theme="dark"]{color-scheme:dark;--bg:#080d18;--card:#111827;--line:#273349;--text:#e7edf7;--muted:#93a1b7;--shadow:0 16px 45px rgba(0,0,0,.30)}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .app-header,html[data-theme="dark"] .office-panel,html[data-theme="dark"] .card,html[data-theme="dark"] .calendar-card,html[data-theme="dark"] .date-card,html[data-theme="dark"] .forecast-card,html[data-theme="dark"] .status-summary,html[data-theme="dark"] .today-banner,html[data-theme="dark"] .page-head,html[data-theme="dark"] .report-card,html[data-theme="dark"] .report-panel{background:#111827;border-color:#273349;color:#e7edf7}
html[data-theme="dark"] .app-nav button{color:#9caac0}html[data-theme="dark"] .app-nav button.active{color:#7eb0ff;border-bottom-color:#3b82f6}
html[data-theme="dark"] .btn,html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .icon-action,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0f172a!important;border-color:#334155!important;color:#e5edf8!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#64748b}
html[data-theme="dark"] .status-btn,html[data-theme="dark"] .seat-choice,html[data-theme="dark"] .member-row,html[data-theme="dark"] .history-item,html[data-theme="dark"] .reservation-item,html[data-theme="dark"] .admin-row,html[data-theme="dark"] .status-admin-row,html[data-theme="dark"] .invite-row,html[data-theme="dark"] .qr-card{border-color:#263249;color:#dce5f2}
html[data-theme="dark"] .today-banner{background:linear-gradient(90deg,#101c31,#17152c)}
html[data-theme="dark"] .plan-chip,html[data-theme="dark"] .summary-user-row,html[data-theme="dark"] .tomorrow-plan-group,html[data-theme="dark"] .zone-roster-member{background:#111827;border-color:#2a374e;color:#e3eaf4}
html[data-theme="dark"] .status-stat-clickable:hover,html[data-theme="dark"] .status-stat-clickable:focus-visible,html[data-theme="dark"] .forecast-card-clickable:hover,html[data-theme="dark"] .forecast-card-clickable:focus-visible{background:#152036}
html[data-theme="dark"] .settings-modal-card{background:#0b1220;border-color:#263249}html[data-theme="dark"] .settings-modal-head,html[data-theme="dark"] .settings-section{background:#111827;border-color:#273349}html[data-theme="dark"] .settings-section-icon,html[data-theme="dark"] .settings-launch-icon{background:#172036}html[data-theme="dark"] .settings-launch-button{background:#111827;color:#e5edf7}html[data-theme="dark"] .settings-launch-button:hover{background:#162036}
html[data-theme="dark"] .settings-section-head b,html[data-theme="dark"] .settings-launch-copy b,html[data-theme="dark"] .settings-account-info b{color:#e5edf7}html[data-theme="dark"] .settings-account-info{color:#a5b1c4}html[data-theme="dark"] .weather-setting-preview{background:#0f172a;border-color:#2a374e;color:#c8d3e3}
html[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.72)}html[data-theme="dark"] .login-card,html[data-theme="dark"] .summary-detail-card,html[data-theme="dark"] .zone-roster-card,html[data-theme="dark"] .reminder-modal-card{background:#111827;color:#e5edf7}
html[data-theme="dark"] .mobile-nav{background:rgba(15,23,42,.96);border-color:#334155}
html[data-theme="dark"] .office-map-v3 .office-map-art{filter:brightness(.72) saturate(.82) contrast(1.06)}
html[data-theme="dark"] .office-map-v3 .area-name-chip{background:rgba(15,23,42,.88);border-color:#3a475c;color:#e5edf7}
html[data-theme="dark"] .office-map-v3 .map-presence-pod,html[data-theme="dark"] .office-map-v3 .presence-field{background:rgba(15,23,42,.88)!important;border-color:rgba(71,85,105,.92)!important;color:#e5edf7}
html[data-theme="dark"] .office-map-v3 .seat-node{background:rgba(17,24,39,.90);border-color:#526174;color:#dbe6f5}html[data-theme="dark"] .office-map-v3 .seat-node.occupied{background:rgba(20,45,78,.94);border-color:#60a5fa}
html[data-theme="dark"] .tv-view{background:#070d18;color:#e5edf7}html[data-theme="dark"] .tv-view header,html[data-theme="dark"] .tv-plans,html[data-theme="dark"] .tv-map,html[data-theme="dark"] .tv-main aside{background:#111827;border-color:#273349;color:#e5edf7}html[data-theme="dark"] .tv-weather{background:#0d1627;border-color:#2a374e}html[data-theme="dark"] .tv-weather-days>span{background:#111827;border-color:#334155;color:#b8c5d8}html[data-theme="dark"] .tv-weather-days b{color:#e5edf7}
@media(max-width:1050px){.tv-view header{grid-template-columns:auto 1fr}.tv-weather{grid-column:1/-1;grid-row:2}.tv-view{grid-template-rows:auto auto 1fr}.tv-weather-days{justify-content:flex-start}.tv-header-actions{justify-self:end}}
@media(max-width:650px){.tv-weather{grid-template-columns:1fr}.tv-weather-days{overflow:auto}.tv-view header{align-items:flex-start}.tv-view header strong{font-size:16px}}


/* ============================================================
   v1.0.18 POLISHED THEME + WEATHER SCENE
   ============================================================ */

/* ---- Consistent line icons ---- */
.ui-line-icon{
  width:18px;
  height:18px;
  display:block;
}
.icon-action .ui-line-icon{width:17px;height:17px}
.settings-section-icon .ui-line-icon{width:18px;height:18px}
.reminder-bell-svg{width:15px;height:15px;display:block}

/* ---- Direct theme switch ---- */
.theme-quick-toggle{
  position:relative;
  overflow:hidden;
}
.theme-quick-toggle>span{
  display:grid;
  place-items:center;
}
.theme-quick-dark{display:none!important}
html[data-theme="dark"] .theme-quick-light{display:none!important}
html[data-theme="dark"] .theme-quick-dark{display:grid!important}

.theme-choice{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.theme-choice-button{
  min-width:0;
  border:1px solid #dfe6ef;
  border-radius:12px;
  background:#fff;
  color:#4b5c72;
  padding:10px 8px;
  display:grid;
  justify-items:center;
  gap:4px;
  text-align:center;
  transition:.16s ease;
}
.theme-choice-button>span{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f3f6fa;
}
.theme-choice-button b{font-size:9.5px;color:#263449}
.theme-choice-button small{font-size:7px;line-height:1.3;color:#8592a5}
.theme-choice-button:hover,
.theme-choice-button:focus-visible{
  border-color:#9ebaf0;
  background:#f8fbff;
  outline:none;
}
.theme-choice-button.selected{
  border-color:#3b82f6;
  background:#eef5ff;
  box-shadow:0 0 0 2px rgba(59,130,246,.11);
}
.theme-choice-button.selected>span{background:#dbeafe;color:#1d4ed8}
.theme-personal-note{font-size:7.5px;color:#8390a2}

/* ---- Weather scene: layer is above art, below all interactive map UI ---- */
.office-map-v3 .map-weather-scene{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}
.office-map-v3.scene-active .map-weather-scene{opacity:1}
.weather-scene-tint,
.weather-scene-stars,
.weather-scene-clouds,
.weather-scene-rain,
.weather-scene-snow,
.weather-scene-fog,
.weather-scene-lightning{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.weather-scene-tint{
  transition:background 1.3s ease,opacity 1.3s ease;
  opacity:0;
}
.weather-scene-sun,
.weather-scene-moon{
  position:absolute;
  width:76px;
  height:76px;
  border-radius:50%;
  opacity:0;
  transform:scale(.8);
  transition:all 1.4s ease;
}
.weather-scene-sun{
  top:7%;
  right:8%;
  background:radial-gradient(circle at 38% 38%,#fff9c4 0 17%,#ffd45c 31%,#ffb228 53%,rgba(255,178,40,.1) 70%);
  box-shadow:0 0 32px 13px rgba(255,190,62,.30),0 0 90px 28px rgba(255,214,110,.18);
}
.weather-scene-moon{
  top:7%;
  right:8%;
  width:60px;
  height:60px;
  background:radial-gradient(circle at 35% 32%,#fff 0 19%,#e8efff 38%,#b8c5e6 72%);
  box-shadow:0 0 25px 9px rgba(195,214,255,.22);
}
.weather-scene-moon:after{
  content:"";
  position:absolute;
  width:13px;height:13px;border-radius:50%;
  background:rgba(121,137,174,.20);
  left:14px;top:27px;
  box-shadow:19px -11px 0 2px rgba(121,137,174,.14),27px 8px 0 -2px rgba(121,137,174,.13);
}
.weather-scene-stars{
  opacity:0;
  background-image:
    radial-gradient(circle at 7% 15%,rgba(255,255,255,.9) 0 1px,transparent 1.8px),
    radial-gradient(circle at 19% 8%,rgba(255,255,255,.7) 0 1px,transparent 1.7px),
    radial-gradient(circle at 31% 18%,rgba(255,255,255,.82) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 44% 9%,rgba(255,255,255,.72) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 58% 19%,rgba(255,255,255,.85) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 10%,rgba(255,255,255,.8) 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.72) 0 1px,transparent 1.7px);
  animation:weatherStars 4.2s ease-in-out infinite alternate;
}

/* Day / evening / night */
.office-map-v3.phase-day.scene-clear .weather-scene-sun,
.office-map-v3.phase-day.scene-cloudy .weather-scene-sun{opacity:.9;transform:scale(1)}
.office-map-v3.phase-day .weather-scene-tint{
  opacity:.18;
  background:linear-gradient(180deg,rgba(169,224,255,.22),transparent 43%);
}
.office-map-v3.phase-evening .weather-scene-sun{
  /* v1.0.22: マップ上に大きな丸い夕日を直接置かない */
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(0)!important;
}
.office-map-v3.phase-evening .weather-scene-tint{
  /* 夕方は「物体としての太陽」ではなく、空気感だけで表現 */
  opacity:.42;
  background:
    linear-gradient(180deg,rgba(255,198,137,.12) 0%,rgba(255,142,83,.22) 52%,rgba(129,91,126,.10) 100%),
    linear-gradient(90deg,rgba(255,196,128,.07),transparent 42%,rgba(255,133,72,.08));
}
.office-map-v3.phase-night .weather-scene-tint{
  opacity:.72;
  background:linear-gradient(180deg,rgba(8,20,45,.70),rgba(10,24,47,.51) 52%,rgba(6,18,37,.63));
}
.office-map-v3.phase-night.scene-clear .weather-scene-moon,
.office-map-v3.phase-night.scene-cloudy .weather-scene-moon{opacity:.82;transform:scale(1)}
.office-map-v3.phase-night.scene-clear .weather-scene-stars{opacity:.74}

/* Clouds */
.weather-scene-clouds{opacity:0;filter:blur(.2px)}
.weather-cloud{
  position:absolute;
  display:block;
  width:170px;height:50px;
  border-radius:999px;
  background:rgba(236,242,248,.58);
  filter:blur(7px);
  box-shadow:52px 5px 0 11px rgba(236,242,248,.46),104px -3px 0 3px rgba(236,242,248,.35);
  animation:weatherCloudMove 24s linear infinite;
}
.cloud-a{top:5%;left:-20%;transform:scale(1.2)}
.cloud-b{top:17%;left:25%;transform:scale(.85);animation-duration:31s;animation-delay:-13s}
.cloud-c{top:28%;left:67%;transform:scale(1.05);animation-duration:37s;animation-delay:-7s}
.office-map-v3.scene-cloudy .weather-scene-clouds,
.office-map-v3.scene-rain .weather-scene-clouds,
.office-map-v3.scene-snow .weather-scene-clouds,
.office-map-v3.scene-storm .weather-scene-clouds{opacity:.72}
.office-map-v3.scene-cloudy .weather-scene-tint{
  opacity:.34;
  background:linear-gradient(180deg,rgba(115,135,151,.32),rgba(177,190,199,.15));
}
.office-map-v3.phase-night .weather-cloud{background:rgba(118,137,161,.35);box-shadow:52px 5px 0 11px rgba(118,137,161,.30),104px -3px 0 3px rgba(118,137,161,.24)}

/* Rain */
.weather-scene-rain{opacity:0}
.office-map-v3.scene-rain .weather-scene-rain,
.office-map-v3.scene-storm .weather-scene-rain{opacity:.84}
.office-map-v3.scene-rain .weather-scene-tint,
.office-map-v3.scene-storm .weather-scene-tint{
  opacity:.47;
  background:linear-gradient(180deg,rgba(63,86,105,.34),rgba(81,101,118,.20));
}
.rain-drop{
  position:absolute;
  left:var(--x);
  top:-12%;
  width:1.5px;
  height:var(--len);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(203,231,255,.02),rgba(196,226,255,.88));
  transform:rotate(12deg);
  animation:weatherRainFall var(--dur) linear infinite;
  animation-delay:var(--delay);
  filter:drop-shadow(0 0 1px rgba(110,178,230,.35));
}
.office-map-v3.phase-night .rain-drop{background:linear-gradient(180deg,rgba(190,223,255,.04),rgba(125,191,255,.92))}

/* Snow */
.weather-scene-snow{opacity:0}
.office-map-v3.scene-snow .weather-scene-snow{opacity:.92}
.office-map-v3.scene-snow .weather-scene-tint{
  opacity:.28;
  background:linear-gradient(180deg,rgba(217,235,247,.30),rgba(236,244,251,.18));
}
.snow-flake{
  position:absolute;
  top:-8%;
  left:var(--x);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 5px rgba(255,255,255,.72);
  animation:weatherSnowFall var(--dur) linear infinite;
  animation-delay:var(--delay);
}

/* Fog */
.weather-scene-fog{opacity:0}
.office-map-v3.scene-fog .weather-scene-fog{
  opacity:.68;
  background:
    linear-gradient(180deg,transparent 10%,rgba(238,243,245,.40) 28%,rgba(232,238,241,.62) 43%,rgba(240,244,246,.31) 60%,transparent 78%);
  filter:blur(5px);
  animation:weatherFogDrift 9s ease-in-out infinite alternate;
}
.office-map-v3.scene-fog .weather-scene-tint{opacity:.27;background:rgba(191,202,209,.25)}

/* Storm lightning */
.weather-scene-lightning{opacity:0;background:rgba(220,235,255,.7)}
.office-map-v3.scene-storm .weather-scene-lightning{animation:weatherLightning 7s linear infinite}

/* Weather scene should not alter seats / pods / labels. */
.office-map-v3 .seat-layer,
.office-map-v3 .area-name-layer,
.office-map-v3 .overlay-zone,
.office-map-v3 .off-strip{position:absolute}

/* TV clone uses exactly the same scene. */
.tv-map .map-weather-scene{pointer-events:none}

/* ---- Complete dark mode pass ---- */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060b14;
  --card:#0d1522;
  --line:#243246;
  --text:#e8eef8;
  --muted:#91a0b5;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 50% -20%,rgba(45,83,140,.18),transparent 40%),
    #060b14;
  color:#e8eef8;
}
html[data-theme="dark"] .app-header{
  background:rgba(9,16,28,.96)!important;
  border-color:#243246!important;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
}
html[data-theme="dark"] .app-brand b,
html[data-theme="dark"] .app-account b,
html[data-theme="dark"] .panel-head h1,
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3{
  color:#edf3fb;
}
html[data-theme="dark"] .app-brand small,
html[data-theme="dark"] .app-account small,
html[data-theme="dark"] .muted{color:#8f9eb2!important}
html[data-theme="dark"] .icon-action{
  background:#0d1726!important;
  border-color:#2b3b51!important;
  color:#c8d5e8!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .icon-action:hover{
  background:#142238!important;
  border-color:#3e5d84!important;
  color:#fff!important;
}

/* Primary / secondary buttons - preserve visual hierarchy in dark mode. */
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] button.primary{
  background:linear-gradient(135deg,#2563eb,#4f46e5)!important;
  border-color:#4d7ff1!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(37,99,235,.22);
}
html[data-theme="dark"] .btn.primary:hover{filter:brightness(1.08)}
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .btn:not(.primary){
  background:#111c2d!important;
  border-color:#2d3d54!important;
  color:#d8e2f0!important;
}
html[data-theme="dark"] .link-btn{color:#7eb0ff!important}
html[data-theme="dark"] .danger-text{color:#ff6b72!important}

/* Cards and data surfaces. */
html[data-theme="dark"] .office-panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .calendar-card,
html[data-theme="dark"] .date-card,
html[data-theme="dark"] .forecast-card,
html[data-theme="dark"] .status-summary,
html[data-theme="dark"] .page-head,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .report-panel,
html[data-theme="dark"] .reservation-item,
html[data-theme="dark"] .admin-row,
html[data-theme="dark"] .status-admin-row,
html[data-theme="dark"] .invite-row,
html[data-theme="dark"] .qr-card{
  background:#0d1522!important;
  border-color:#243246!important;
  color:#dfe8f5!important;
}
html[data-theme="dark"] .today-banner{
  background:linear-gradient(90deg,#0e1d31,#19152e)!important;
  border-color:#263750!important;
}
html[data-theme="dark"] .plan-chip{
  background:#111d2e!important;
  border-color:#2c3a50!important;
  color:#dce6f4!important;
}

/* Inputs. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0a1424!important;
  border-color:#304158!important;
  color:#edf3fb!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:#4d7ec6!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.14)!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#6f8096!important}

/* Settings modal */
html[data-theme="dark"] .settings-modal-card{background:#08111f!important;border-color:#27364b!important}
html[data-theme="dark"] .settings-modal-head{background:#0d1726!important;border-color:#26364b!important}
html[data-theme="dark"] .settings-section{background:#0f1928!important;border-color:#29384d!important}
html[data-theme="dark"] .settings-section-icon{
  background:#162338!important;
  border:1px solid #2c3c53;
  color:#9dc2ff!important;
}
html[data-theme="dark"] .settings-modal-close{
  background:#111c2d!important;
  border-color:#2c3b50!important;
  color:#cad6e7!important;
}
html[data-theme="dark"] .settings-switch-row,
html[data-theme="dark"] .settings-account-info{color:#a7b4c7!important}
html[data-theme="dark"] .weather-setting-preview{
  background:#0a1424!important;
  border-color:#2a3b52!important;
  color:#cbd7e6!important;
}
html[data-theme="dark"] .theme-choice-button{
  background:#0b1525!important;
  border-color:#2c3b51!important;
  color:#aebbd0!important;
}
html[data-theme="dark"] .theme-choice-button>span{background:#152237!important;color:#9fbbe7!important}
html[data-theme="dark"] .theme-choice-button b{color:#dfe8f5!important}
html[data-theme="dark"] .theme-choice-button small{color:#7f90a7!important}
html[data-theme="dark"] .theme-choice-button:hover{background:#111f33!important;border-color:#41618b!important}
html[data-theme="dark"] .theme-choice-button.selected{
  background:linear-gradient(145deg,#142744,#17213b)!important;
  border-color:#4c82d1!important;
  box-shadow:0 0 0 2px rgba(76,130,209,.12);
}
html[data-theme="dark"] .theme-choice-button.selected>span{background:#18345a!important;color:#b9d4ff!important}

/* Reminder modal - fix all remaining white panels from v1.0.17. */
html[data-theme="dark"] .reminder-modal-card{
  background:#0a1321!important;
  border:1px solid #25354b!important;
  color:#e8eef8!important;
  box-shadow:0 28px 90px rgba(0,0,0,.48)!important;
}
html[data-theme="dark"] .reminder-modal-head{
  background:rgba(10,19,33,.97)!important;
  border-color:#29394e!important;
}
html[data-theme="dark"] .reminder-modal-head .eyebrow{color:#7795bd!important}
html[data-theme="dark"] .reminder-form{
  background:#0f1a2a!important;
  border-color:#2b3a50!important;
}
html[data-theme="dark"] .reminder-form-actions{
  background:linear-gradient(180deg,rgba(15,26,42,.72),#0f1a2a 28%)!important;
  border-color:#2b3a50!important;
}
html[data-theme="dark"] .reminder-modal-grid>section>.card-head{
  color:#dfe7f3!important;
}
html[data-theme="dark"] .reminder-row{
  background:#101b2b!important;
  border-color:#2a3a50!important;
  color:#e5edf8!important;
}
html[data-theme="dark"] .reminder-row:hover{background:#132238!important}
html[data-theme="dark"] .reminder-bell{
  background:#1d2a3d!important;
  color:#f7c56a!important;
  border:1px solid #34475f;
}
html[data-theme="dark"] .reminder-row-main b{color:#e8eef8!important}
html[data-theme="dark"] .reminder-row-main small{color:#8ea0b8!important}
html[data-theme="dark"] .reminder-row-main em{color:#aebbcf!important}
html[data-theme="dark"] .reminder-toast{
  background:rgba(12,22,37,.97)!important;
  border-color:#2d4059!important;
  box-shadow:0 18px 50px rgba(0,0,0,.42)!important;
}
html[data-theme="dark"] .reminder-toast b{color:#edf3fb!important}
html[data-theme="dark"] .reminder-toast small{color:#93a3ba!important}
html[data-theme="dark"] .reminder-toast button{background:#172338!important;color:#b7c5d8!important}
html[data-theme="dark"] .badge{
  background:#172338!important;
  border-color:#30435d!important;
  color:#b8c8df!important;
}

/* Other dialogs / lists. */
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .summary-detail-card,
html[data-theme="dark"] .zone-roster-card{
  background:#0c1625!important;
  border-color:#27384e!important;
  color:#e7edf7!important;
}
html[data-theme="dark"] .summary-user-row,
html[data-theme="dark"] .zone-roster-member,
html[data-theme="dark"] .tomorrow-plan-group{
  background:#101b2b!important;
  border-color:#2a3a50!important;
  color:#e3eaf4!important;
}
html[data-theme="dark"] .summary-detail-empty,
html[data-theme="dark"] .zone-roster-empty,
html[data-theme="dark"] .reminder-empty-mini{
  border-color:#304056!important;
  color:#8192aa!important;
  background:#0b1524!important;
}

/* Right-side cards. */
html[data-theme="dark"] .settings-launch-button{
  background:#0d1522!important;
  color:#e8eef8!important;
}
html[data-theme="dark"] .settings-launch-button:hover{background:#121f31!important}
html[data-theme="dark"] .settings-launch-icon{background:#17243a!important;color:#a8c8fa!important}
html[data-theme="dark"] .settings-launch-copy b{color:#e8eef8!important}
html[data-theme="dark"] .settings-launch-copy small{color:#8798af!important}
html[data-theme="dark"] .reminder-card{background:linear-gradient(180deg,#0d1522,#0b1422)!important}
html[data-theme="dark"] .member-row{border-color:#26364b!important}
html[data-theme="dark"] .member-main b{color:#e1e9f4!important}
html[data-theme="dark"] .member-main small{color:#8393aa!important}

/* Map UI: UI theme no longer darkens the office art. Time/weather owns map lighting. */
html[data-theme="dark"] .office-map-v3 .office-map-art{filter:none!important}
html[data-theme="dark"] .office-map-v3 .area-name-chip{
  background:rgba(10,20,34,.90)!important;
  border-color:#3b4d65!important;
  color:#edf3fb!important;
}
html[data-theme="dark"] .office-map-v3 .map-presence-pod,
html[data-theme="dark"] .office-map-v3 .presence-field{
  background:rgba(10,20,34,.88)!important;
  border-color:rgba(69,87,110,.92)!important;
  color:#e7eef8!important;
}
html[data-theme="dark"] .office-map-v3 .zone-count-button{
  background:#15243a!important;
  border-color:#385070!important;
  color:#b9d4ff!important;
}
html[data-theme="dark"] .office-map-v3 .person-token{
  background:rgba(17,28,45,.96)!important;
  border-color:#31445e!important;
}
html[data-theme="dark"] .office-map-v3 .person-copy>b{color:#e6edf7!important}
html[data-theme="dark"] .office-map-v3 .seat-node{
  background:rgba(13,23,38,.92)!important;
  border-color:#4b6079!important;
  color:#dce6f4!important;
}
html[data-theme="dark"] .office-map-v3 .seat-node.occupied{
  background:rgba(17,48,83,.94)!important;
  border-color:#6ca9ef!important;
}

/* TV / fullscreen */
html[data-theme="dark"] .tv-view{background:#050a12!important;color:#e8eef8!important}
html[data-theme="dark"] .tv-view header,
html[data-theme="dark"] .tv-plans,
html[data-theme="dark"] .tv-map,
html[data-theme="dark"] .tv-main aside{
  background:#0d1624!important;
  border-color:#26364b!important;
  color:#e6edf7!important;
}
html[data-theme="dark"] .tv-weather{
  background:#0b1626!important;
  border-color:#2b3d55!important;
}
html[data-theme="dark"] .tv-weather-days>span{
  background:#111d2e!important;
  border-color:#2c3e55!important;
  color:#aebdd2!important;
}
html[data-theme="dark"] .tv-weather-days b{color:#eef4fb!important}
html[data-theme="dark"] .tv-view header button{
  background:#111d2e!important;
  border-color:#2e4058!important;
  color:#d9e3f0!important;
}

/* Native scrollbars */
html[data-theme="dark"] *{
  scrollbar-color:#40516a #0b1422;
}

/* Motion */
@keyframes weatherRainFall{
  from{transform:translate3d(0,-12vh,0) rotate(12deg)}
  to{transform:translate3d(-28px,112vh,0) rotate(12deg)}
}
@keyframes weatherSnowFall{
  0%{transform:translate3d(0,-8vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift),112vh,0) rotate(360deg)}
}
@keyframes weatherCloudMove{
  from{translate:-50px 0}
  to{translate:calc(100vw + 260px) 0}
}
@keyframes weatherStars{
  from{filter:brightness(.7);transform:translateY(0)}
  to{filter:brightness(1.18);transform:translateY(1px)}
}
@keyframes weatherFogDrift{
  from{transform:translateX(-2%) scale(1.04)}
  to{transform:translateX(2%) scale(1.08)}
}
@keyframes weatherLightning{
  0%,92%,95%,100%{opacity:0}
  93%{opacity:.55}
  94%{opacity:.08}
  96%{opacity:.34}
}

/* Reduced motion: keep the weather visible without animation. */
@media(prefers-reduced-motion:reduce){
  .rain-drop,.snow-flake,.weather-cloud,.weather-scene-stars,.weather-scene-fog,.weather-scene-lightning{
    animation:none!important;
  }
  .weather-scene-rain{opacity:.25!important}
}

/* Compact theme selector on phones. */
@media(max-width:560px){
  .theme-choice{grid-template-columns:1fr}
  .theme-choice-button{
    grid-template-columns:34px minmax(0,1fr);
    grid-template-rows:auto auto;
    justify-items:start;
    text-align:left;
    column-gap:9px;
  }
  .theme-choice-button>span{grid-row:1/3}
  .theme-choice-button b{align-self:end}
  .theme-choice-button small{align-self:start}
  .theme-quick-toggle{display:grid!important}
}


/* ============================================================
   v1.0.19 DEPARTMENT STATUS + DARK MODE AUDIT
   ============================================================ */

/* ---- Department staffing overview ---- */
.department-health{
  margin-top:10px;
  border:1px solid #e3e9f1;
  border-radius:14px;
  background:linear-gradient(180deg,#fbfdff,#f8fafc);
  padding:9px 10px 10px;
}
.department-health-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;
}
.department-health-head>div:first-child{display:flex;align-items:center;gap:8px;white-space:nowrap}
.department-health-head>div:first-child b{font-size:11px;color:#334155}
.selected-department-status{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:wrap;
  font-size:8px;color:#718096;
}
.selected-department-status>b{font-size:9px;color:#334155}
.selected-department-status>span{white-space:nowrap}
.selected-department-status>strong,
.department-status-state{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:8px;font-weight:900;
}
.selected-department-status i,
.department-status-state i,
.tv-dept-row strong i{
  width:7px;height:7px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.12);
}
.selected-department-status.working>strong,.department-status-card.working .department-status-state{color:#2563eb}
.selected-department-status.working i,.department-status-card.working .department-status-state i,.tv-dept-row.working strong i{background:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.selected-department-status.all-off>strong,.department-status-card.all-off .department-status-state{color:#15803d}
.selected-department-status.all-off i,.department-status-card.all-off .department-status-state i,.tv-dept-row.all-off strong i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.13)}
.department-overview{
  display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:1px 1px 3px;scrollbar-width:thin;
}
.department-status-card{
  appearance:none;flex:0 0 auto;width:152px;min-height:70px;text-align:left;
  border:1px solid #dfe6ee;border-radius:11px;background:#fff;padding:8px 9px;color:#46556b;
  display:grid;gap:3px;transition:.15s ease;
}
.department-status-card:hover,.department-status-card:focus-visible{border-color:#9ab9e8;background:#f8fbff;outline:none;transform:translateY(-1px)}
.department-status-card.selected{border-color:#4f86db;box-shadow:0 0 0 2px rgba(59,130,246,.10);background:#f4f8ff}
.department-status-top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.department-status-top b{font-size:9px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#263449}
.department-status-top strong{font-size:10px;color:#172033}
.department-status-counts{display:flex;gap:8px;color:#7d899b;font-size:7.5px}
.department-status-counts em{font-style:normal;white-space:nowrap}
.department-status-state{margin-top:1px}

/* TV department view */
.tv-dept-summary{display:grid;gap:6px;margin-bottom:14px}
.tv-dept-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;border-bottom:1px solid #edf1f5;padding:6px 2px}
.tv-dept-row>span:first-child{min-width:0}.tv-dept-row b{display:block;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tv-dept-row small{display:block;font-size:7px;color:#8b97a8}.tv-dept-row>span:nth-child(2){display:flex;gap:5px;font-size:7px;color:#718096}.tv-dept-row em{font-style:normal}.tv-dept-row strong{grid-column:1/-1;display:flex;align-items:center;gap:5px;font-size:7.5px;color:#64748b}
.tv-dept-row.working strong{color:#3b82f6}.tv-dept-row.all-off strong{color:#16a34a}

/* ---- DARK MODE AUDIT: logged-in interface ---- */
html[data-theme="dark"] .app-nav button{color:#9eacc0!important}
html[data-theme="dark"] .app-nav button:hover{color:#e8f0fb!important;background:rgba(255,255,255,.025)!important}
html[data-theme="dark"] .app-nav button.active{color:#8ab8ff!important;border-bottom-color:#60a5fa!important}
html[data-theme="dark"] .eyebrow{color:#8098bb!important}
html[data-theme="dark"] .date-card b,
html[data-theme="dark"] .forecast-card span,
html[data-theme="dark"] .status-stat span,
html[data-theme="dark"] .date-card small{color:#9cabc0!important}
html[data-theme="dark"] .date-card strong,
html[data-theme="dark"] .forecast-card b,
html[data-theme="dark"] .status-stat b{color:#f0f5fc!important}
html[data-theme="dark"] .status-stat{border-right-color:#243348!important}
html[data-theme="dark"] .status-stat-clickable small{color:#72839b!important}
html[data-theme="dark"] .status-stat-clickable.has-users small{color:#81adf5!important}
html[data-theme="dark"] .weather-mini{border-color:#26374d!important;color:#aebdd1!important}
html[data-theme="dark"] .weather-mini>b{color:#f0f5fc!important}
html[data-theme="dark"] .weather-mini>small,
html[data-theme="dark"] .weather-mini-range{color:#8d9db3!important}

/* Main controls: no white buttons remain in dark mode. */
html[data-theme="dark"] #view-office .status-btn{
  background:linear-gradient(180deg,#121e2f,#0e1928)!important;
  border-color:#34475f!important;
  color:#d7e2f1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] #view-office .status-btn:hover{
  background:linear-gradient(180deg,#182941,#132238)!important;
  border-color:#55718f!important;color:#f4f8ff!important;
}
html[data-theme="dark"] #view-office .status-btn i{opacity:1!important;filter:none!important}
html[data-theme="dark"] #view-office .status-btn.selected{
  background:color-mix(in srgb,var(--status) 25%,#0d1828)!important;
  border-color:color-mix(in srgb,var(--status) 72%,#b8c8dd)!important;
  color:#f8fbff!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--status) 24%,transparent)!important;
}
html[data-theme="dark"] .seat-choice{background:#0b1626!important;border-color:#304158!important}
html[data-theme="dark"] .seat-choice small{color:#8fa0b7!important}
html[data-theme="dark"] .seat-choice b{color:#edf3fb!important}
html[data-theme="dark"] .reservation-callout{background:#15162d!important;border-color:#39385d!important;color:#c8c7e4!important}
html[data-theme="dark"] .reservation-callout b{color:#b9a4ff!important}
html[data-theme="dark"] .collapse-head{color:#c7d3e4!important}
html[data-theme="dark"] .switch-row b{color:#e2eaf5!important}
html[data-theme="dark"] .switch-row small{color:#8fa0b5!important}
html[data-theme="dark"] .weekday-pills span{background:#101b2b!important;border-color:#304158!important;color:#b8c6d9!important}
html[data-theme="dark"] .weekday-pills input:checked+span{background:#2457bf!important;border-color:#4b82ed!important;color:#fff!important}
html[data-theme="dark"] .filters input,
html[data-theme="dark"] .filters select,
html[data-theme="dark"] .panel-actions select{background:#0b1626!important;border-color:#30435d!important;color:#e4ecf7!important}
html[data-theme="dark"] .member-status{
  background:color-mix(in srgb,var(--status) 18%,#0b1524)!important;
  color:color-mix(in srgb,var(--status) 62%,#f5f8fc)!important;
  border:1px solid color-mix(in srgb,var(--status) 34%,#334155)!important;
}
html[data-theme="dark"] .history-item{color:#95a5ba!important;border-bottom-color:#26364a!important}
html[data-theme="dark"] .history-item b{color:#dce5f1!important}
html[data-theme="dark"] .history-item time{color:#72849d!important}
html[data-theme="dark"] .fav-btn{color:#52647c!important}html[data-theme="dark"] .fav-btn.on{color:#f6b73c!important}

/* Map pod/readability - fixes dark-on-dark labels visible in screenshot. */
html[data-theme="dark"] .office-map-v3 .map-presence-pod .presence-field-head b,
html[data-theme="dark"] .office-map-v3 .presence-field-head b{color:#f2f6fc!important;text-shadow:0 1px 2px rgba(0,0,0,.22)}
html[data-theme="dark"] .office-map-v3 .map-presence-pod .zone-count-button{background:#173154!important;color:#c5ddff!important;border:1px solid #385579!important}
html[data-theme="dark"] .office-map-v3 .map-presence-pod .zone-count-button:hover{background:#1e416d!important;color:#fff!important}
html[data-theme="dark"] .office-map-v3 .map-presence-pod .person-token{background:rgba(14,25,41,.96)!important;border-color:#3a4b61!important;color:#edf3fb!important}
html[data-theme="dark"] .office-map-v3 .map-presence-pod .person-copy>b{color:#f4f7fb!important}
html[data-theme="dark"] .office-map-v3 .zone-status-chip{
  background:color-mix(in srgb,var(--status) 18%,#101a2a)!important;
  border-color:color-mix(in srgb,var(--status) 45%,#34445b)!important;
  color:color-mix(in srgb,var(--status) 68%,white)!important;
}
html[data-theme="dark"] .office-map-v3 .zone-status-chip em{color:#d8e2ee!important}
html[data-theme="dark"] .office-map-v3 .map-status-mini{color:color-mix(in srgb,var(--status) 62%,white)!important}
html[data-theme="dark"] .office-map-v3 .seat-node small{color:#9aabc0!important}
html[data-theme="dark"] .office-map-v3 .seat-node .seat-person{color:#b9d6ff!important}

/* Schedule */
html[data-theme="dark"] .month-switch>button{background:#111c2c!important;border-color:#304158!important;color:#dce6f3!important}
html[data-theme="dark"] .week-head span{color:#8e9db2!important}
html[data-theme="dark"] .calendar-grid{border-color:#29384b!important}
html[data-theme="dark"] .calendar-day{background:#0d1726!important;border-color:#29384b!important;color:#dce5f1!important}
html[data-theme="dark"] .calendar-day:hover{background:#142238!important}
html[data-theme="dark"] .calendar-day.other{background:#09121f!important;color:#667890!important}
html[data-theme="dark"] .calendar-day.selected{background:#10223a!important;box-shadow:inset 0 0 0 2px #4d8bea!important}
html[data-theme="dark"] .calendar-day.today .day-num{background:#3b82f6!important;color:#fff!important}
html[data-theme="dark"] .day-event{background:#15233a!important;color:#dce7f5!important}
html[data-theme="dark"] .repeat-options{background:#0b1524!important;border:1px solid #293a50!important}
html[data-theme="dark"] .plan-item{background:#0d1726!important;border-color:#2a3a50!important;color:#dce5f1!important}
html[data-theme="dark"] .plan-item b{color:#edf3fb!important}
html[data-theme="dark"] .plan-item small{color:#8f9fb5!important}

/* Seat reservations */
html[data-theme="dark"] .reservation-rule b{color:#c2a8ff!important}
html[data-theme="dark"] .reservation-rule span{color:#8f9eb3!important}
html[data-theme="dark"] .availability-seat{background:#0e1928!important;border-color:#304158!important;color:#d9e3f0!important}
html[data-theme="dark"] .availability-seat.busy{background:#09121e!important;color:#607188!important}
html[data-theme="dark"] .reservation-item .state{background:#172337!important;color:#aebfd3!important}
html[data-theme="dark"] .reservation-item button{color:#84b5ff!important}
html[data-theme="dark"] .reservation-item button.danger{color:#ff7b82!important}

/* Reports */
html[data-theme="dark"] .metric-card{background:#0d1726!important;border-color:#27374c!important;color:#e4ecf7!important}
html[data-theme="dark"] .metric-card span{color:#92a2b8!important}
html[data-theme="dark"] .metric-card b{color:#f1f6fc!important}
html[data-theme="dark"] .metric-card small{color:#7f90a7!important}
html[data-theme="dark"] .bar-track{background:#1a2637!important}
html[data-theme="dark"] .bar-row{color:#aebdd0!important}html[data-theme="dark"] .bar-row b{color:#e8eef8!important}

/* Admin */
html[data-theme="dark"] .admin-row,
html[data-theme="dark"] .status-admin-row{border-bottom-color:#27364b!important}
html[data-theme="dark"] .admin-row button{background:#2b1520!important;color:#ff93a2!important;border:1px solid #593043!important}
html[data-theme="dark"] .status-swatch{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
html[data-theme="dark"] .company-code-badge{background:#142743!important;color:#a8caff!important;border-color:#31557e!important}
html[data-theme="dark"] .company-login-info{background:#0c1727!important;border-color:#293b52!important;color:#a8b8cc!important}
html[data-theme="dark"] .invite-created{background:#10233b!important;border-color:#31547a!important;color:#dce8f6!important}
html[data-theme="dark"] .invite-created input{background:#091424!important;border-color:#345273!important;color:#edf4fc!important}
html[data-theme="dark"] .invite-row.inactive{background:#09121e!important;color:#7789a0!important}
html[data-theme="dark"] .qr-card small{color:#8799af!important}

/* Modals / counts / upload choices */
html[data-theme="dark"] .modal-close{color:#9cadc2!important}
html[data-theme="dark"] .modal-close:hover{color:#fff!important}
html[data-theme="dark"] .summary-detail-count,
html[data-theme="dark"] .zone-roster-count{background:#173154!important;color:#bdd8ff!important}
html[data-theme="dark"] .tomorrow-plan-group>header{background:#142033!important;border-color:#29394f!important;color:#dfe8f5!important}
html[data-theme="dark"] .avatar-preset-choice{background:#101b2c!important;border-color:#2e4058!important}
html[data-theme="dark"] .avatar-preset-choice:hover{background:#16243a!important}
html[data-theme="dark"] .avatar-preset-choice.selected{border-color:#5d93e6!important;background:#152b49!important}
html[data-theme="dark"] .weather-forecast-chip{background:#142033!important;border-color:#2b3c53!important;color:#d9e4f2!important}
html[data-theme="dark"] .layout-edit-bar{background:#2a1e11!important;border-color:#6e4c22!important;color:#f2d3a4!important}
html[data-theme="dark"] .error{color:#ff8f95!important}

/* Mobile nav */
html[data-theme="dark"] .mobile-nav{background:rgba(8,15,26,.96)!important;border-color:#304158!important;box-shadow:0 14px 36px rgba(0,0,0,.40)!important}
html[data-theme="dark"] .mobile-nav button{color:#8fa0b7!important}
html[data-theme="dark"] .mobile-nav button.active{color:#9fc4ff!important}

/* Department cards dark mode */
html[data-theme="dark"] .department-health{background:linear-gradient(180deg,#0c1625,#0a1422)!important;border-color:#27384e!important}
html[data-theme="dark"] .department-health-head>div:first-child b,
html[data-theme="dark"] .selected-department-status>b{color:#e5edf7!important}
html[data-theme="dark"] .selected-department-status{color:#93a3b8!important}
html[data-theme="dark"] .department-status-card{background:#101b2b!important;border-color:#2c3d53!important;color:#aebdd1!important}
html[data-theme="dark"] .department-status-card:hover{background:#14243a!important;border-color:#45668d!important}
html[data-theme="dark"] .department-status-card.selected{background:#142a47!important;border-color:#5a90df!important;box-shadow:0 0 0 2px rgba(90,144,223,.10)}
html[data-theme="dark"] .department-status-top b{color:#e4ecf7!important}
html[data-theme="dark"] .department-status-top strong{color:#f3f7fc!important}
html[data-theme="dark"] .department-status-counts{color:#8fa0b5!important}
html[data-theme="dark"] .department-status-card.working .department-status-state{color:#8bb8ff!important}
html[data-theme="dark"] .department-status-card.all-off .department-status-state{color:#6fe39b!important}
html[data-theme="dark"] .selected-department-status.working>strong{color:#8bb8ff!important}
html[data-theme="dark"] .selected-department-status.all-off>strong{color:#6fe39b!important}
html[data-theme="dark"] .tv-dept-row{border-color:#26364b!important}
html[data-theme="dark"] .tv-dept-row small,html[data-theme="dark"] .tv-dept-row>span:nth-child(2){color:#8ea0b6!important}
html[data-theme="dark"] .tv-dept-row.working strong{color:#8ab8ff!important}
html[data-theme="dark"] .tv-dept-row.all-off strong{color:#6fe39b!important}

@media(max-width:760px){
  .department-health-head{align-items:flex-start;flex-direction:column}
  .selected-department-status{justify-content:flex-start}
  .department-status-card{width:140px}
}


/* v1.0.19 status icon tiles: make emoji status icons visually consistent in both themes. */
#view-office .status-btn i{
  width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:#f3f6fa;border:1px solid #e3e9f1;font-style:normal;font-size:15px!important;
  line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#view-office .status-btn.selected i{
  background:color-mix(in srgb,var(--status) 10%,white);
  border-color:color-mix(in srgb,var(--status) 28%,#dbe3ed);
}
html[data-theme="dark"] #view-office .status-btn i{
  background:#18273a!important;border-color:#344b65!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme="dark"] #view-office .status-btn.selected i{
  background:color-mix(in srgb,var(--status) 22%,#132136)!important;
  border-color:color-mix(in srgb,var(--status) 48%,#41546c)!important;
}


/* ============================================================
   v1.0.20 ADMIN WEATHER/TIME VISUAL PREVIEW
   - local browser only
   - no server write / no realtime broadcast
   ============================================================ */

.weather-preview-open{
  white-space:nowrap;
}
.weather-preview-badge{
  position:absolute;
  z-index:40;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  border:1px solid rgba(245,158,11,.55);
  border-radius:999px;
  background:rgba(255,251,235,.94);
  color:#92400e;
  box-shadow:0 7px 18px rgba(15,23,42,.14);
  padding:5px 10px;
  font-size:8px;
  font-weight:950;
  letter-spacing:.02em;
  backdrop-filter:blur(8px);
}
.weather-preview-badge.hidden{display:none!important}

.weather-preview-modal{
  padding:18px!important;
  align-items:center!important;
  justify-content:center!important;
}
.weather-preview-card{
  position:relative;
  z-index:1;
  width:min(880px,calc(100vw - 36px));
  max-height:min(88vh,850px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:22px;
  background:#f8fafc;
  box-shadow:0 28px 90px rgba(15,23,42,.28);
}
.weather-preview-head{
  position:relative;
  flex:0 0 auto;
  padding:22px 64px 17px 24px;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}
.weather-preview-head h2{
  margin:3px 0 4px;
  color:#172033;
  font-size:23px;
  line-height:1.2;
}
.weather-preview-head p{
  margin:0;
  color:#7c899c;
  font-size:9.5px;
  line-height:1.55;
}
.weather-preview-body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:16px;
  display:grid;
  gap:12px;
}
.weather-preview-section{
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:15px;
  background:#fff;
}
.weather-preview-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.weather-preview-section-head b{
  display:block;
  color:#233149;
  font-size:12px;
}
.weather-preview-section-head small{
  display:block;
  margin-top:2px;
  color:#8491a4;
  font-size:8px;
}
.weather-preview-actual{
  flex:0 0 auto;
  max-width:55%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  padding:5px 8px;
  font-size:7.5px;
  font-weight:850;
}
.weather-preview-grid{
  display:grid;
  gap:7px;
}
.weather-preview-kind-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.weather-preview-phase-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.weather-preview-grid button{
  min-width:0;
  min-height:78px;
  border:1px solid #dde5ef;
  border-radius:13px;
  background:#fbfdff;
  color:#41536b;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:3px;
  padding:9px 6px;
  transition:.15s ease;
}
.weather-preview-grid button>span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:#f1f5f9;
  color:#536983;
  font-size:16px;
  font-weight:900;
}
.weather-preview-grid button b{
  color:#27364d;
  font-size:9.5px;
}
.weather-preview-grid button small{
  color:#8a97a9;
  font-size:7px;
}
.weather-preview-grid button:hover,
.weather-preview-grid button:focus-visible{
  outline:none;
  border-color:#8db3ee;
  background:#f5f9ff;
}
.weather-preview-grid button.selected{
  border-color:#3b82f6;
  background:#edf5ff;
  box-shadow:0 0 0 2px rgba(59,130,246,.11);
}
.weather-preview-grid button.selected>span{
  background:#dbeafe;
  color:#1d4ed8;
}
.weather-preview-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid #f2d58c;
  border-radius:14px;
  background:#fffbeb;
}
.weather-preview-status small{
  display:block;
  color:#9a6d14;
  font-size:7.5px;
}
.weather-preview-status b{
  display:block;
  margin-top:2px;
  color:#7c4a08;
  font-size:11px;
}
.weather-preview-status>span{
  color:#967121;
  font-size:7.5px;
  text-align:right;
}
.weather-preview-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
  padding-top:2px;
}
.weather-preview-actions .btn{
  min-height:36px;
}

/* Dark mode */
html[data-theme="dark"] .weather-preview-badge{
  border-color:rgba(245,158,11,.45);
  background:rgba(42,30,12,.92);
  color:#f9c86a;
  box-shadow:0 8px 20px rgba(0,0,0,.30);
}
html[data-theme="dark"] .weather-preview-card{
  border-color:#29394f;
  background:#08111f;
}
html[data-theme="dark"] .weather-preview-head{
  background:#0d1726;
  border-color:#29394f;
}
html[data-theme="dark"] .weather-preview-head h2{color:#edf3fb}
html[data-theme="dark"] .weather-preview-head p{color:#8fa0b7}
html[data-theme="dark"] .weather-preview-section{
  background:#0f1928;
  border-color:#29394f;
}
html[data-theme="dark"] .weather-preview-section-head b{color:#e5edf8}
html[data-theme="dark"] .weather-preview-section-head small{color:#8496ad}
html[data-theme="dark"] .weather-preview-actual{
  background:#142238;
  color:#a9b9ce;
}
html[data-theme="dark"] .weather-preview-grid button{
  background:#0b1525;
  border-color:#2c3d54;
  color:#aebcd0;
}
html[data-theme="dark"] .weather-preview-grid button>span{
  background:#152238;
  color:#acc7ee;
}
html[data-theme="dark"] .weather-preview-grid button b{color:#e1eaf5}
html[data-theme="dark"] .weather-preview-grid button small{color:#7f91a8}
html[data-theme="dark"] .weather-preview-grid button:hover{
  background:#111f33;
  border-color:#41628b;
}
html[data-theme="dark"] .weather-preview-grid button.selected{
  background:#142744;
  border-color:#4d82d0;
  box-shadow:0 0 0 2px rgba(77,130,208,.12);
}
html[data-theme="dark"] .weather-preview-grid button.selected>span{
  background:#18365d;
  color:#c3dafe;
}
html[data-theme="dark"] .weather-preview-status{
  border-color:#5a4721;
  background:#211b0f;
}
html[data-theme="dark"] .weather-preview-status small{color:#d0a852}
html[data-theme="dark"] .weather-preview-status b{color:#f4cf79}
html[data-theme="dark"] .weather-preview-status>span{color:#b69a60}

@media(max-width:760px){
  .weather-preview-modal{padding:8px!important}
  .weather-preview-card{
    width:calc(100vw - 16px);
    max-height:94vh;
    border-radius:17px;
  }
  .weather-preview-head{padding:18px 56px 14px 16px}
  .weather-preview-head h2{font-size:20px}
  .weather-preview-kind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weather-preview-phase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weather-preview-status{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .weather-preview-status>span{text-align:left}
  .weather-preview-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .weather-preview-actions .btn{width:100%;min-width:0}
}
@media(max-width:430px){
  .weather-preview-kind-grid{grid-template-columns:1fr 1fr}
  .weather-preview-actions{grid-template-columns:1fr}
}


/* v1.0.21
   Production UI cleanup:
   weather preview/debug has no visible launcher in the normal application.
   The hidden admin visual-test modal remains available only through
   ?weatherdebug=1 for maintenance.
*/


/* v1.0.22 sunset polish
   夕方は画面を暖色に寄せるだけで、円形の太陽オブジェクトは表示しない。
   雨・雪・曇り・夜・昼の演出には影響しない。
*/


/* ============================================================
   v1.0.23 LEGAL / CONTACT / OPERATOR CONSOLE
   ============================================================ */
.legal-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 12px}
.legal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.legal-nav a{color:#66758b;text-decoration:none;font-size:12px;font-weight:800;padding:8px 10px;border-radius:9px}
.legal-nav a:hover{background:#f1f5f9;color:#1e293b}
.legal-document{max-width:900px;margin:14px auto 32px;padding:34px 38px;border:1px solid #e3e8ef;border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.06);color:#334155;line-height:1.9}
.legal-document-head{padding-bottom:20px;margin-bottom:12px;border-bottom:1px solid #e9edf3}
.legal-document h1{margin:5px 0 4px;color:#122033;font-size:34px;line-height:1.3}
.legal-document h2{margin:32px 0 8px;color:#18263a;font-size:18px;line-height:1.5}
.legal-document p,.legal-document li{font-size:14px}
.legal-document ol{padding-left:1.5em}
.legal-document a{color:#2563eb}
.legal-callout{margin-top:30px;padding:16px 18px;border:1px solid #dbe5f2;border-radius:14px;background:#f8fbff}
.legal-callout b{display:block;color:#22344d;margin-bottom:3px}.legal-callout p{margin:0}
.legal-footer{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:18px 10px 36px;color:#8491a3;font-size:11px}
.legal-footer a{color:#66758b;text-decoration:none;font-weight:750}

/* Contact */
.contact-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(460px,1.2fr);gap:24px;align-items:start;padding:22px 0 34px}
.contact-intro{padding:28px 8px 20px 2px}
.contact-intro h1{margin:7px 0 10px;color:#162235;font-size:38px;line-height:1.2}
.contact-intro>p{color:#64748b;line-height:1.8;font-size:14px}
.contact-security-note{margin:24px 0 14px;padding:15px 16px;border:1px solid #f2d7a5;border-radius:14px;background:#fffaf0}
.contact-security-note b{color:#8a5700;font-size:12px}.contact-security-note p{margin:4px 0 0;color:#8b6c35;font-size:11px;line-height:1.6}
.contact-facts{display:grid;gap:9px}.contact-facts>div{padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.contact-facts b{display:block;color:#27364b;font-size:12px}.contact-facts span{display:block;margin-top:2px;color:#8290a4;font-size:10px;line-height:1.5}
.contact-form-card{min-width:0;padding:22px;border:1px solid #e1e7ef;border-radius:20px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.08)}
.contact-form-card form{display:grid;gap:14px}
.contact-form-card label{min-width:0;display:grid;gap:6px;color:#3d4e65;font-size:11px;font-weight:850}
.contact-form-card label>small{font-weight:500;color:#8b98a9}
.contact-form-card input,.contact-form-card select,.contact-form-card textarea{width:100%;min-width:0;border:1px solid #d8e0ea;border-radius:10px;padding:11px 12px;background:#fff;color:#172033;font:inherit;font-size:13px;outline:none}
.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus{border-color:#7ea7ea;box-shadow:0 0 0 3px rgba(59,130,246,.10)}
.contact-form-card textarea{resize:vertical;line-height:1.65}
.contact-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-consent{grid-template-columns:auto 1fr!important;align-items:start;gap:9px!important;font-weight:600!important;line-height:1.6}
.contact-consent input{width:17px!important;height:17px;margin-top:2px}
.contact-char-count{text-align:right;font-size:9px;color:#94a3b8}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-success{min-height:480px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px}
.contact-success-mark{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;background:#e8f8ee;color:#168544;font-size:30px;font-weight:900}
.contact-success h2{margin:5px 0 16px;color:#1d2b40}.contact-success p{margin:0;color:#8290a3;font-size:10px}
.contact-success strong{display:block;margin:7px 0 6px;padding:9px 14px;border-radius:10px;background:#f1f5f9;color:#21314a;font-size:18px;letter-spacing:.05em}
.contact-success small{color:#8492a5;margin-bottom:18px}
.settings-support-section{grid-column:1/-1}.settings-support-links{display:flex;gap:7px;flex-wrap:wrap}

/* Operator */
.operator-page{min-height:100vh;background:#070d17;color:#e7eef8}
.operator-shell{width:min(1440px,calc(100% - 32px));margin:0 auto;padding:18px 0 32px}
.operator-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0 18px}
.operator-brand{display:flex;align-items:center;gap:11px}.operator-brand b{display:block;font-size:17px}
.operator-header-actions{display:flex;align-items:center;gap:9px}.operator-session-label{color:#8fa1b9;font-size:10px}
.operator-login-card{width:min(460px,100%);margin:8vh auto 0;padding:28px;border:1px solid #26364b;border-radius:20px;background:#0d1726;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.operator-login-card h1{margin:5px 0 8px;font-size:25px}.operator-login-card>p{margin:0 0 20px;color:#8fa0b7;font-size:11px;line-height:1.7}
.operator-login-card form{display:grid;gap:13px}.operator-login-card label{display:grid;gap:6px;color:#b8c5d7;font-size:10px;font-weight:800}
.operator-login-card input{width:100%;border:1px solid #304158;border-radius:10px;background:#081220;color:#eef4fb;padding:11px 12px;outline:none}
.operator-login-card input:focus{border-color:#4c7fc7;box-shadow:0 0 0 3px rgba(59,130,246,.13)}
.operator-warning{margin:12px 0 18px;padding:12px 13px;border:1px solid #5a4721;border-radius:11px;background:#211b0f;color:#e6c373;font-size:10px;line-height:1.6}
.operator-warning code{color:#fff0b5}
.operator-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:10px 0 16px}
.operator-dashboard-head h1{margin:4px 0 2px;font-size:28px}.operator-dashboard-head p{margin:0;color:#8293aa;font-size:10px}
.operator-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.operator-stats>div{padding:14px 16px;border:1px solid #25364c;border-radius:13px;background:#0c1624}
.operator-stats span{display:block;color:#8294ac;font-size:9px}.operator-stats b{display:block;margin-top:3px;font-size:23px;color:#edf3fb}
.operator-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.operator-filters button{border:1px solid #2b3c53;border-radius:999px;background:#0c1624;color:#9eb0c7;padding:7px 11px;font-size:9px;font-weight:850}
.operator-filters button span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;border-radius:999px;background:#15243a;color:#bcd0e8;font-size:8px}
.operator-filters button.active{border-color:#4c7fc7;background:#14243c;color:#e8f1ff}
.operator-inbox{min-height:650px;display:grid;grid-template-columns:360px minmax(0,1fr);border:1px solid #25364b;border-radius:17px;overflow:hidden;background:#0a1320}
.operator-list-pane{min-width:0;border-right:1px solid #25364b;background:#09121f;overflow:auto}.operator-inquiry-list{display:grid}
.operator-inquiry-item{width:100%;min-width:0;text-align:left;padding:13px 14px;border:0;border-bottom:1px solid #1e2d40;background:transparent;color:#dfe8f4}
.operator-inquiry-item:hover{background:#0e1b2d}.operator-inquiry-item.selected{background:#14243a;box-shadow:inset 3px 0 #4c83d1}
.operator-inquiry-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.operator-inquiry-item b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.operator-inquiry-item>span{display:block;margin-top:4px;color:#8ea0b7;font-size:8.5px}.operator-inquiry-item>small{display:block;margin-top:5px;color:#62758f;font-size:7.5px}
.ticket-badge{display:inline-flex;align-items:center;border-radius:999px;background:#17243a;color:#abc7ed;padding:4px 7px;font-size:7.5px;font-weight:900;letter-spacing:.04em}
.status-dot{display:inline-flex;align-items:center;border-radius:999px;padding:4px 7px;font-size:7.5px;font-weight:850}
.status-new{background:#39240d;color:#f4c470}.status-in_progress{background:#102a46;color:#8bc0ff}.status-resolved{background:#11301f;color:#85d9a4}.status-spam{background:#34202a;color:#ef9bb8}
.operator-list-empty,.operator-empty{padding:35px 20px;text-align:center;color:#7689a2;font-size:10px}
.operator-empty{min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center}.operator-empty b{color:#a9b9cd;font-size:13px}.operator-empty span{margin-top:4px}
.operator-detail-pane{min-width:0;overflow:auto}.operator-detail{padding:22px}
.operator-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid #223247}
.operator-detail-head h2{margin:8px 0 3px;font-size:20px;color:#edf3fb}.operator-detail-head small{color:#7589a3;font-size:8px}
.contact-category-badge{display:inline-flex;margin-left:5px;border:1px solid #31445e;border-radius:999px;color:#9fb2ca;padding:3px 7px;font-size:7.5px}
.operator-meta{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:8px;margin:16px 0}
.operator-meta>div{min-width:0;padding:10px 11px;border:1px solid #23344a;border-radius:10px;background:#0d1828}
.operator-meta dt{color:#7489a3;font-size:7px}.operator-meta dd{margin:3px 0 0;color:#dce6f3;font-size:10px;word-break:break-all}
.operator-message-block{padding:15px;border:1px solid #23344a;border-radius:12px;background:#0d1828}
.operator-message-block h3{margin:0 0 8px;color:#aabbd0;font-size:10px}
.operator-message-block pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:11px;line-height:1.75;color:#e5edf7}
.operator-response-controls{margin-top:14px;padding:15px;border:1px solid #26384e;border-radius:12px;background:#0c1624;display:grid;gap:11px}
.operator-response-controls label{display:grid;gap:6px;color:#91a3ba;font-size:9px;font-weight:800}
.operator-response-controls select,.operator-response-controls textarea{width:100%;border:1px solid #304159;border-radius:9px;background:#081321;color:#e8eef8;padding:9px 10px}
.operator-detail-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.operator-page .btn.ghost{background:#111d2e;border-color:#2e4058;color:#d9e3f0}.operator-page .btn.primary{background:linear-gradient(135deg,#2563eb,#4f46e5);border-color:#4d7ff1;color:#fff}

@media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:8px}.contact-intro{padding-bottom:4px}.operator-inbox{grid-template-columns:300px minmax(0,1fr)}.operator-meta{grid-template-columns:1fr}}
@media(max-width:680px){.legal-topbar{align-items:flex-start;flex-direction:column}.legal-document{padding:24px 18px;border-radius:15px}.legal-document h1{font-size:27px}.contact-form-card{padding:16px;border-radius:15px}.contact-two-col{grid-template-columns:1fr}.operator-shell{width:min(100% - 16px,1440px)}.operator-header{align-items:flex-start}.operator-stats{grid-template-columns:1fr 1fr}.operator-inbox{display:block;min-height:0}.operator-list-pane{max-height:330px;border-right:0;border-bottom:1px solid #25364b}.operator-empty{min-height:280px}.operator-detail{padding:14px}.operator-detail-head{flex-direction:column}}


/* ============================================================
   v1.0.24 GOOGLE SEARCH / AI OVERVIEW / GEMINI CONTENT
   ============================================================ */
.seo-definition-section{padding-top:22px!important;padding-bottom:24px!important}
.seo-definition-card{
  border:1px solid #dfe7f0;
  border-radius:20px;
  padding:28px 30px;
  background:linear-gradient(135deg,#fbfdff,#f4f8ff);
  box-shadow:0 12px 34px rgba(15,23,42,.055);
}
.seo-definition-card h2{margin:5px 0 10px;font-size:26px;color:#17243a}
.seo-direct-answer{max-width:900px;font-size:14px!important;line-height:1.85!important;color:#4b5e77}
.seo-direct-answer strong{color:#1d2c43}
.seo-definition-points{
  margin-top:17px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.seo-definition-points>div{
  padding:12px 14px;border:1px solid #e0e7f0;border-radius:12px;background:rgba(255,255,255,.84);
}
.seo-definition-points b{display:block;color:#26364e;font-size:11px}
.seo-definition-points span{display:block;margin-top:3px;color:#7b899d;font-size:9px;line-height:1.55}
.text-link{color:#2563eb;text-decoration:none;font-weight:800}
.text-link:hover{text-decoration:underline}

.seo-content-hub .section-head{max-width:830px}
.seo-topic-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}
.seo-topic-grid>a{
  min-width:0;
  display:block;
  padding:15px 16px;
  border:1px solid #e0e6ee;
  border-radius:14px;
  background:#fff;
  color:#334155;
  text-decoration:none;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.seo-topic-grid>a:hover{
  transform:translateY(-2px);
  border-color:#aec6ea;
  box-shadow:0 10px 25px rgba(15,23,42,.07);
}
.seo-topic-grid b{display:block;color:#22324a;font-size:12px}
.seo-topic-grid span{display:block;margin-top:5px;color:#7c899b;font-size:9px;line-height:1.55}

.seo-breadcrumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  max-width:900px;margin:12px auto 0;padding:0 2px;
  color:#8b98a9;font-size:9px;
}
.seo-breadcrumb a{color:#66758b;text-decoration:none}
.seo-page .seo-article,.seo-faq-document{margin-top:10px}
.seo-article .seo-lead,.seo-faq-document .seo-lead{
  max-width:800px;margin:9px 0 8px;
  color:#52647b;font-size:15px;line-height:1.85;
}
.seo-article h2{scroll-margin-top:24px}
.seo-article ul{padding-left:1.4em}
.seo-product-note{
  margin:30px 0 6px;
  padding:18px 20px;
  border:1px solid #cfe0f7;
  border-radius:15px;
  background:#f5f9ff;
}
.seo-product-note b{display:block;color:#1d3556;font-size:14px}
.seo-product-note p{margin:5px 0 12px!important;color:#5c6e84}
.seo-related{margin-top:32px;padding-top:2px}
.seo-related-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
}
.seo-related-card{
  min-width:0;padding:13px 14px;border:1px solid #e0e7ef;border-radius:12px;
  background:#fff;text-decoration:none;
}
.seo-related-card b{display:block;color:#263750;font-size:11px}
.seo-related-card span{display:block;margin-top:3px;color:#8290a3;font-size:8.5px;line-height:1.5}
.seo-related-card:hover{border-color:#aac5eb;background:#fafdff}
.seo-faq details{margin-bottom:8px}
.seo-faq summary{font-size:13px}
.seo-faq p{font-size:12px!important;line-height:1.75!important}
.guide-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:15px 0 26px}
.seo-guide-hub ul{line-height:1.9}

@media(max-width:900px){
  .seo-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seo-related-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .seo-definition-card{padding:21px 17px}
  .seo-definition-card h2{font-size:23px}
  .seo-definition-points{grid-template-columns:1fr}
  .seo-topic-grid,.guide-topic-grid{grid-template-columns:1fr}
}


/* NARABI Office v1.0.24.2: celestial decorations removed */
/* Keep time-of-day tint and rain/snow/cloud/fog/storm effects, but never draw sky objects. */
.weather-scene-sun,
.weather-scene-moon,
.weather-scene-stars{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  transform:none!important;
  animation:none!important;
}
.weather-scene-moon::after{display:none!important;content:none!important;}


/* ==========================================================
   v1.0.27 PREMIUM TEMPLATE + SELECTION FIX
   ========================================================== */
.office-map-v3 .office-map-art{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-position:center center!important;background:#e9eef3!important;
}
/* Every presence pod is positioned against the whole map, not a fixed room box. */
.office-map-v3 .overlay-zone{
  left:0!important;right:auto!important;top:0!important;bottom:auto!important;
  width:100%!important;height:100%!important;pointer-events:none!important;overflow:visible!important;
}
.office-map-v3 .map-presence-pod{pointer-events:auto!important;}
.office-map-v3 .area-name-layer{pointer-events:none!important;}
.office-map-v3.layout-editing .area-name-layer{pointer-events:auto!important;}
.office-map-v3.layout-editing .map-presence-pod,
.office-map-v3.layout-editing .area-name-chip,
.office-map-v3.layout-editing .seat-node{
  cursor:grab!important;touch-action:none!important;outline:2px dashed rgba(37,99,235,.72)!important;
  outline-offset:2px!important;user-select:none!important;
}
.office-map-v3.layout-editing .map-presence-pod.dragging,
.office-map-v3.layout-editing .area-name-chip.dragging,
.office-map-v3.layout-editing .seat-node.dragging{
  cursor:grabbing!important;z-index:30!important;opacity:.92!important;outline-style:solid!important;
}
.office-map-v3.layout-editing .zone-count-button{pointer-events:none!important;}
.admin-only-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:10px;font-weight:900;white-space:nowrap}
.office-map-template-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.office-map-template{appearance:none;border:2px solid #e2e8f0;border-radius:13px;background:#fff;padding:7px;display:grid;gap:7px;text-align:left;color:inherit;transition:.16s ease;min-width:0}
.office-map-template:hover{border-color:#93c5fd;transform:translateY(-1px)}
.office-map-template.selected{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.office-map-template img{width:100%;aspect-ratio:1500/1009;object-fit:cover;border-radius:8px;background:#eef2f6;border:1px solid #e5e7eb}
.office-map-template span{display:grid;gap:3px}.office-map-template b{font-size:11px}.office-map-template small{font-size:9px;color:#7b8799;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.office-map-template em{font-style:normal;font-size:8px;font-weight:900;color:#2563eb}.office-map-template.selected em{color:#0f766e}.office-map-template[disabled]{opacity:.7;cursor:wait}.office-map-template-grid[aria-busy="true"]{pointer-events:none}
.office-map-upload-row{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;margin-top:14px;padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.office-map-upload-box{display:grid;gap:5px;padding:12px;border:1px dashed #94a3b8;border-radius:11px;background:#fff;cursor:pointer}.office-map-upload-box b{font-size:12px}.office-map-upload-box small{font-size:9px;color:#64748b}.office-map-upload-box input{margin-top:5px;font-size:10px}
.office-map-upload-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}.office-map-upload-actions label{grid-column:1/-1;display:grid;gap:5px;font-size:10px;font-weight:800}.office-map-upload-actions select{border:1px solid #d6deea;border-radius:9px;padding:8px;background:#fff}.office-map-upload-actions button{min-height:36px}
.office-map-setting-note{margin:10px 0 0;padding:9px 11px;border-radius:10px;background:#eff6ff;color:#33527a;font-size:10px;line-height:1.6}
html[data-theme="dark"] .office-map-template,html[data-theme="dark"] .office-map-upload-box{background:#111c2b;border-color:#334155}html[data-theme="dark"] .office-map-upload-row{background:#0c1522;border-color:#2b3b50}html[data-theme="dark"] .office-map-setting-note{background:#10213a;color:#b8d5ff}
@media(max-width:1100px){.office-map-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.office-map-upload-row{grid-template-columns:1fr}}
@media(max-width:640px){.office-map-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.office-map-upload-actions{grid-template-columns:1fr}.office-map-upload-actions label{grid-column:auto}.layout-edit-bar{flex-wrap:wrap}.layout-edit-bar span{flex-basis:100%}}

/* v1.0.31 office map save status: keep result visible directly under template cards */
.office-map-setting-message{min-height:24px;margin:8px 2px 2px;padding:5px 8px;border-radius:8px;font-weight:800;color:#1d4ed8;background:#eff6ff}
.office-map-setting-message:empty{display:none}
html[data-theme="dark"] .office-map-setting-message{background:#10213a;color:#bfdbfe}