:root { --ink:#1f2724; --muted:#75807b; --paper:#f5f3ed; --card:#fff; --coral:#e76f51; --green:#315f4e; --gold:#d7a545; --line:#e7e4dc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans","Noto Sans JP",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; padding:32px 22px; background:#183d32; color:#fff; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:12px; margin:0 10px 42px; color:#fff; text-decoration:none; font-size:24px; font-weight:700; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#183d32; background:#e8c774; font-family:Georgia,serif; }
nav { display:grid; gap:8px; }
.nav-link { display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:11px; color:#b8cbc4; text-decoration:none; font-size:14px; font-weight:500; }
.nav-link span { width:20px; font-size:18px; text-align:center; }
.nav-link:hover,.nav-link.active { color:#fff; background:rgba(255,255,255,.1); }
.sidebar-footer { margin-top:auto; padding:18px 8px 0; border-top:1px solid rgba(255,255,255,.13); display:flex; align-items:center; gap:10px; }
.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#183d32; background:#e8c774; font-size:12px; font-weight:700; }
.sidebar-footer strong,.sidebar-footer small { display:block; }.sidebar-footer strong{font-size:13px}.sidebar-footer small{margin-top:2px;color:#9db4ac;font-size:10px}
main { min-width:0; padding:34px 44px 60px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.topbar h1 { margin:3px 0 0; font-size:25px; }.eyebrow{margin:0;color:#8b958f;font-size:10px;font-weight:700;letter-spacing:.18em}.menu-button{display:none;border:0;background:none;font-size:24px}
.primary-button { border:0; padding:12px 18px; border-radius:10px; background:var(--coral); color:#fff; font-size:13px; font-weight:700; box-shadow:0 6px 16px rgba(231,111,81,.2); }
.primary-button:hover { background:#d95f42; transform:translateY(-1px); }
.hero { min-height:235px; padding:38px 42px; border-radius:22px; color:#fff; background:linear-gradient(120deg,rgba(22,63,51,.96),rgba(35,83,67,.9)),radial-gradient(circle at 80% 10%,#e8c774,transparent 38%); display:flex; align-items:flex-end; justify-content:space-between; overflow:hidden; position:relative; }
.hero:after { content:""; position:absolute; right:-35px; top:-80px; width:300px; height:300px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.hero h2 { margin:16px 0 10px; font-family:Georgia,"Noto Serif JP",serif; font-size:38px; line-height:1.3; font-weight:500; }.hero p{margin:0;color:#c8d8d2;font-size:13px}.status-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.1);font-size:11px}.status-pill i{width:7px;height:7px;border-radius:50%;background:#73d5a9;box-shadow:0 0 0 4px rgba(115,213,169,.15)}
.hero-time { position:relative; z-index:1; text-align:right; }.hero-time span{display:block;font-size:46px;font-weight:600;letter-spacing:-.04em}.hero-time small{color:#b7ccc4}
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:20px 0; }.metric-card{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--card);display:flex;align-items:center;gap:15px}.metric-icon{width:45px;height:45px;border-radius:13px;display:grid;place-items:center;font-weight:700}.metric-icon.coral{color:#c5543a;background:#fff0ec}.metric-icon.gold{color:#9b741f;background:#fff6dc}.metric-icon.green{color:#315f4e;background:#e7f3ed}.metric-card small,.metric-card strong,.metric-card em{display:block}.metric-card small{color:var(--muted);font-size:11px}.metric-card strong{margin:3px 0;font-size:22px}.metric-card em{color:#3a8a68;font-size:10px;font-style:normal}
.content-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.panel{padding:25px;border:1px solid var(--line);border-radius:17px;background:var(--card)}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.panel h3{margin:4px 0 0;font-size:19px}.text-button{border:0;background:none;color:var(--coral);font-size:11px;font-weight:700}.reservation{display:grid;grid-template-columns:56px 1fr auto;align-items:center;padding:15px 0;border-top:1px solid #efede7}.reservation time{font-size:13px;font-weight:700}.guest strong,.guest small{display:block}.guest strong{font-size:13px}.guest small{margin-top:4px;color:var(--muted);font-size:10px}.tag{padding:6px 9px;border-radius:999px;font-size:9px;font-weight:700}.tag.confirmed{color:#2d7858;background:#e8f5ef}.tag.pending{color:#9b741f;background:#fff5d8}.live-dot{color:#3a8a68;font-size:9px}.live-dot:before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#4bb784}
.table-map{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.table{aspect-ratio:1;border-radius:13px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.table b{font-size:14px}.table small{font-size:9px}.table.available{border:1px dashed #9ebcad;color:#54816d;background:#f3faf6}.table.occupied{border:1px solid #e6b4a9;color:#b6533d;background:#fff3f0}.table.reserved{border:1px solid #e3cd8e;color:#947022;background:#fff9e8}.legend{display:flex;justify-content:center;gap:13px;margin-top:18px;color:var(--muted);font-size:8px}.legend i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%}.available-dot{background:#70b18f}.occupied-dot{background:#e47b65}.reserved-dot{background:#d6a844}
.empty-state{padding:28px 10px;border-top:1px solid #efede7;color:var(--muted);font-size:12px;text-align:center}.toast{position:fixed;right:28px;bottom:28px;z-index:20;padding:13px 18px;border-radius:10px;background:#183d32;color:#fff;font-size:12px;font-weight:600;box-shadow:0 12px 35px rgba(15,34,28,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}
dialog{width:min(460px,calc(100% - 32px));padding:0;border:0;border-radius:20px;box-shadow:0 24px 80px rgba(23,43,35,.28)}dialog::backdrop{background:rgba(15,34,28,.62);backdrop-filter:blur(3px)}dialog form{padding:30px;position:relative}dialog h3{margin:5px 0 22px;font-size:24px}.close-button{position:absolute;right:20px;top:16px;border:0;background:none;color:#88918d;font-size:25px}label{display:grid;gap:7px;margin:14px 0;color:#59635e;font-size:11px;font-weight:600}input,select{width:100%;padding:12px;border:1px solid #dddcd6;border-radius:9px;background:#faf9f6;color:var(--ink)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wide{width:100%;margin-top:10px}.dialog-note{display:block;margin-top:12px;color:#8b958f;text-align:center}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:10;width:240px;transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.menu-button{display:block}.topbar{gap:14px}.topbar>div{margin-right:auto}main{padding:25px}.content-grid{grid-template-columns:1fr}.hero{padding:30px}.hero-time{display:none}}
@media(max-width:620px){main{padding:20px 16px}.topbar h1{font-size:19px}.primary-button{padding:10px 12px;font-size:11px}.hero{min-height:220px}.hero h2{font-size:31px}.metric-grid{grid-template-columns:1fr}.metric-card{padding:17px}.form-row{grid-template-columns:1fr}.content-grid{gap:15px}}
.logout-button{margin-left:auto;border:0;background:none;color:#b8cbc4;font-size:10px}.topbar-actions{display:flex;align-items:center;gap:10px}.mode-badge{padding:7px 10px;border-radius:999px;background:#fff1cc;color:#8b6717;font-size:10px;font-weight:700}.mode-badge.connected{background:#e2f4eb;color:#2d7858}.reservation-summary{padding:32px 38px;border-radius:20px;background:linear-gradient(120deg,#183d32,#285b4a);color:#fff;display:flex;align-items:end;justify-content:space-between}.reservation-summary h2{margin:7px 0;font-family:Georgia,"Noto Serif JP",serif;font-size:32px;font-weight:500}.reservation-summary p:not(.eyebrow){margin:0;color:#c8d8d2;font-size:12px}.date-filter{min-width:180px;margin:0;color:#dce9e4}.date-filter input{margin-top:7px;background:#fff}.reservation-panel{margin-top:20px}.reservation-panel .reservation{grid-template-columns:65px minmax(190px,1fr) auto auto;gap:14px}.reservation.is-cancelled{opacity:.55}.guest p{margin:6px 0 0;color:#75807b;font-size:10px}.tag.arrived{color:#fff;background:#315f4e}.tag.cancelled{color:#8a4d45;background:#f7e5e2}.reservation-actions{display:flex;gap:5px}.reservation-actions button{padding:6px 8px;border:1px solid #dedbd3;border-radius:7px;background:#fff;color:#4b5550;font-size:9px}.reservation-actions .danger{color:#b3503c}textarea{width:100%;padding:12px;border:1px solid #dddcd6;border-radius:9px;background:#faf9f6;color:var(--ink);resize:vertical}.login-dialog form{padding:34px}.login-brand{display:flex;align-items:center;gap:12px}.login-brand h3{margin:3px 0}.login-copy{color:var(--muted);font-size:12px;line-height:1.7}.form-error{min-height:18px;color:#b3503c;font-size:11px}
@media(max-width:620px){.mode-badge{display:none}.reservation-summary{padding:24px;display:grid;gap:22px}.reservation-summary h2{font-size:27px}.date-filter{width:100%}.reservation-panel .reservation{grid-template-columns:50px 1fr auto}.reservation-actions{grid-column:2/4}}
\n.panel-actions{display:flex;gap:8px}.audit-dialog-body{padding:30px;position:relative}.audit-dialog-body h3{margin:5px 0 20px;font-size:22px}.audit-list{max-height:55vh;overflow:auto}.audit-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid #efede7}.audit-row strong,.audit-row small{display:block}.audit-row strong{font-size:12px}.audit-row small,.audit-row time{margin-top:4px;color:var(--muted);font-size:9px}\n
.floor-panel{margin-top:20px}.floor-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.floor-table{min-height:92px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.floor-table b{font-size:15px}.floor-table small{font-size:9px}.floor-table em{font-size:8px;font-style:normal}.floor-table.available{border:1px dashed #9ebcad;color:#54816d;background:#f3faf6}.floor-table.reserved{border:1px solid #e3cd8e;color:#947022;background:#fff9e8}.floor-table.arrived{border:1px solid #a8c9ba;color:#285d48;background:#e7f3ed}.arrived-dot{background:#315f4e}
@media(max-width:900px){.floor-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:620px){.floor-grid{grid-template-columns:repeat(3,1fr)}.floor-table{min-height:82px}}

.reports-panel{margin-top:22px;scroll-margin-top:24px}.report-actions{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.report-actions label{font-size:.78rem;color:var(--muted);display:grid;gap:6px}.report-actions input{min-width:150px}.sales-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.sales-kpis article{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}.sales-kpis small{display:block;color:var(--muted);margin-bottom:8px}.sales-kpis strong{font-size:1.45rem}.sales-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}.sales-layout h4,.sales-list-wrap h4{margin:0 0 12px}.payment-breakdown>div,.daily-sales>div{display:grid;grid-template-columns:88px 1fr 90px;gap:10px;align-items:center;margin:10px 0;font-size:.84rem}.payment-breakdown i,.daily-sales i{height:8px;background:var(--line);border-radius:999px;overflow:hidden}.payment-breakdown b,.daily-sales b{display:block;height:100%;background:var(--accent);border-radius:inherit}.payment-breakdown strong,.daily-sales strong{text-align:right}.sales-list-wrap{margin-top:24px}.sales-list{display:grid;gap:8px}.sales-list article{display:grid;grid-template-columns:100px 1fr auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px}.sales-list article div{display:grid;gap:3px}.sales-list small,.sales-list article>span{color:var(--muted);font-size:.78rem}.sale-total-preview{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:14px;background:var(--surface-soft);margin:6px 0 16px}.sale-total-preview strong{font-size:1.5rem}
@media(max-width:800px){.sales-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.sales-layout{grid-template-columns:1fr}.sales-list article{grid-template-columns:80px 1fr}.sales-list article>span{grid-column:2}.report-actions{width:100%}.report-actions .primary-button{flex:1}}

.floor-table.counter b{color:#9a6b19}.floor-table.table{border-radius:18px}.floor-table.private-room{grid-column:span 2;border-style:double;border-width:3px}.floor-table.private-room b{color:#7b4c8f}@media(max-width:600px){.floor-table.private-room{grid-column:span 2}}

#saleReservation{max-width:100%}.report-actions .text-button{padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}.report-actions .text-button:hover{border-color:var(--coral)}