:root{
  --bg:#f7fafa;--surface:#fff;--primary:#168c91;--primary-dark:#0f6f74;
  --primary-light:#e6f5f4;--accent:#45b9b2;--text:#243438;--muted:#687a7e;
  --border:#dce8e8;--danger:#c94b4b;--warning:#c78a28;--success:#2f8c69;
  --radius:14px;--sidebar:238px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--text);background:var(--bg)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.login-body{min-height:100vh;background:
linear-gradient(rgba(22,140,145,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(22,140,145,.035) 1px,transparent 1px),var(--bg);
background-size:32px 32px}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-panel{width:min(420px,100%);background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:20px;padding:38px;box-shadow:0 20px 60px rgba(30,70,75,.08)}
.login-panel h1{margin:8px 0;font-size:30px;font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--primary);margin:0}
.brand-mark{width:54px;height:42px;position:relative;margin-bottom:24px}
.brand-mark span{position:absolute;border:1.5px solid var(--primary);border-radius:50%}
.brand-mark span:nth-child(1){width:36px;height:36px;left:0;top:3px}
.brand-mark span:nth-child(2){width:29px;height:29px;left:18px;top:0}
.brand-mark span:nth-child(3){width:8px;height:8px;left:36px;top:29px;background:var(--primary)}
.brand-mark.small{transform:scale(.72);transform-origin:left center;margin:0;width:45px}
.form-stack{display:grid;gap:18px;margin-top:28px}
label{display:grid;gap:8px;font-size:14px;color:var(--muted)}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
textarea{min-height:92px;resize:vertical}
.primary-btn,.ghost-btn,.danger-btn,.icon-btn{border-radius:10px;min-height:42px;padding:9px 14px;border:1px solid transparent}
.primary-btn{background:var(--primary);color:#fff}
.primary-btn:hover{background:var(--primary-dark)}
.ghost-btn{background:#fff;border-color:var(--border);color:var(--text)}
.danger-btn{background:#fff;border-color:#efcaca;color:var(--danger)}
.full{width:100%}
.notice{padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--primary);background:#fff;border-radius:10px;margin:14px 0}
.notice.error{border-left-color:var(--danger);background:#fff8f8}
.notice.success{border-left-color:var(--success);background:#f7fffb}
.loader-line{margin-top:18px;text-align:center;color:var(--muted)}
.loader-line span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);margin:0 3px;animation:pulse 1.1s infinite}
.loader-line span:nth-child(2){animation-delay:.15s}.loader-line span:nth-child(3){animation-delay:.3s}
.loader-line small{display:block;margin-top:9px}
@keyframes pulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--border);padding:20px 16px;display:flex;flex-direction:column}
.brand-row{display:flex;align-items:center;gap:8px;padding:0 8px 20px}
.brand-row strong,.brand-row small{display:block}.brand-row small{color:var(--muted);font-size:11px;margin-top:2px}
.nav{display:grid;gap:5px;overflow:auto;flex:1}
.nav button{border:0;background:transparent;color:var(--muted);text-align:left;padding:10px 12px;border-radius:9px}
.nav button:hover,.nav button.active{color:var(--primary-dark);background:var(--primary-light)}
.main-area{min-width:0}
.topbar{min-height:82px;background:rgba(247,250,250,.92);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:14px 24px;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.topbar h1{font-size:21px;margin:0}.topbar p{margin:4px 0 0;font-size:13px}
.icon-btn{display:none;background:#fff;border-color:var(--border)}
.user-chip{margin-left:auto;text-align:right}.user-chip span,.user-chip small{display:block}.user-chip small{color:var(--muted);font-size:11px;margin-top:3px}
.content{padding:24px;max-width:1500px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.metric{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:17px}
.metric small{color:var(--muted)}.metric strong{display:block;font-size:28px;font-weight:550;margin-top:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.panel h2{font-size:16px;margin:0 0 16px;font-weight:600}
.bar-list{display:grid;gap:11px}.bar-row{display:grid;grid-template-columns:70px 1fr 80px;gap:10px;align-items:center;font-size:13px}
.track{height:10px;background:var(--primary-light);border-radius:99px;overflow:hidden}.fill{height:100%;background:var(--primary);border-radius:99px}
.module-tools{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:15px}
.module-tools label{min-width:180px}.module-tools .spacer{flex:1}
.data-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}
th,td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px;vertical-align:top}
th{color:var(--muted);font-weight:500;background:#fbfdfd;position:sticky;top:0}
td .actions{display:flex;gap:7px}
.form-panel{margin-bottom:16px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.form-actions{display:flex;gap:9px;align-items:center;margin-top:14px}
.inline-confirm{margin-top:12px;border:1px solid #efcaca;background:#fff8f8;padding:12px;border-radius:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.empty{padding:35px;text-align:center;color:var(--muted)}
.fixed-notice{position:fixed;right:20px;bottom:20px;z-index:40;max-width:420px;box-shadow:0 12px 30px rgba(30,70,75,.12)}
.global-loader{position:fixed;inset:0;z-index:60;background:rgba(247,250,250,.74);backdrop-filter:blur(3px);display:grid;place-items:center;text-align:center;color:var(--primary-dark)}
.ai-loader{width:72px;height:72px;position:relative;margin:auto}.ai-loader i{position:absolute;width:12px;height:12px;border:2px solid var(--primary);border-radius:50%;animation:orbit 1.4s linear infinite}
.ai-loader i:nth-child(1){left:30px;top:0}.ai-loader i:nth-child(2){right:0;top:30px;animation-delay:-.35s}.ai-loader i:nth-child(3){left:30px;bottom:0;animation-delay:-.7s}.ai-loader i:nth-child(4){left:0;top:30px;animation-delay:-1.05s}
@keyframes orbit{50%{transform:scale(.55);opacity:.35}}
.file-line{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.file-line label{flex:1;min-width:230px}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){
  .app-shell{display:block}.sidebar{position:fixed;z-index:50;left:-260px;width:250px;transition:.2s}.sidebar.open{left:0;box-shadow:20px 0 50px rgba(0,0,0,.12)}
  .icon-btn{display:inline-block}.topbar{padding:12px 15px}.content{padding:15px}.grid-2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.user-chip{display:none}
}
@media(max-width:520px){.login-panel{padding:27px 22px}.metrics{grid-template-columns:1fr 1fr}.metric strong{font-size:23px}.bar-row{grid-template-columns:60px 1fr 65px}}

#uploadStatus{
  display:block;
  width:100%;
  margin-top:4px;
  line-height:1.6;
  word-break:break-all;
}

/* receipt preview */
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.icon-btn{display:inline-grid;place-items:center;min-width:42px;background:#fff;border-color:var(--border)}
.inline-receipts{margin-top:18px;padding-top:18px;border-top:1px dashed var(--border)}
.receipt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.receipt-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(12,35,39,.04)}
.receipt-thumb{aspect-ratio:4/3;display:grid;place-items:center;background:#f6fbfb;overflow:hidden}
.receipt-thumb img{width:100%;height:100%;object-fit:cover}
.receipt-file-icon{width:76px;height:76px;border-radius:16px;display:grid;place-items:center;background:var(--primary-light);color:var(--primary-dark);font-weight:700}
.receipt-meta{padding:12px}
.receipt-meta strong{display:block;font-size:14px;line-height:1.4;word-break:break-all}
.receipt-meta small{display:block;color:var(--muted);margin-top:6px}

/* map visual */
.trip-map-board{margin-bottom:18px}
.map-tiles{display:grid;gap:8px}
.map-row{display:flex;flex-wrap:wrap;gap:8px}
.map-tile{min-width:84px;padding:10px 8px;border:1px solid var(--border);border-radius:12px;background:#fff;text-align:center;transition:transform .35s ease, box-shadow .35s ease}
.map-tile .name{display:block;font-size:13px}
.map-tile small{display:block;color:var(--muted);margin-top:4px}
.map-tile.active{background:linear-gradient(180deg,#f0ffff 0%,#ffffff 100%);border-color:#8ad6d2;box-shadow:0 0 0 1px rgba(22,140,145,.08),0 10px 24px rgba(22,140,145,.16);animation:floatGlow 1.9s ease-in-out infinite}
@keyframes floatGlow{
  0%,100%{transform:translateY(0);box-shadow:0 10px 24px rgba(22,140,145,.16)}
  50%{transform:translateY(-6px);box-shadow:0 14px 30px rgba(69,185,178,.28), 0 0 22px rgba(69,185,178,.18)}
}
.map-note{margin-top:-4px}

/* office wall */
.office-panel{overflow:hidden}
.office-stage{position:relative;min-height:700px;border-radius:18px;border:1px solid var(--border);overflow:hidden;background:linear-gradient(180deg,#eef9f8 0%,#f7fafa 42%,#ffffff 100%)}
.office-stage.morning{background:linear-gradient(180deg,#fff5de 0%,#eef9f8 34%,#ffffff 100%)}
.office-stage.day{background:linear-gradient(180deg,#dff7ff 0%,#eef9f8 38%,#ffffff 100%)}
.office-stage.dusk{background:linear-gradient(180deg,#ffe4cf 0%,#f8edf7 34%,#ffffff 100%)}
.office-stage.night{background:linear-gradient(180deg,#1b2944 0%,#314968 30%,#f1f6fb 88%,#ffffff 100%)}
.office-zone{position:absolute;border:1px dashed rgba(36,52,56,.18);border-radius:16px;padding:10px;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);font-size:13px;color:#355}
.office-zone.reception{left:2%;top:10%;width:18%;height:16%}
.office-zone.meeting{left:24%;top:8%;width:28%;height:20%}
.office-zone.pantry{left:56%;top:10%;width:14%;height:15%}
.office-zone.lounge{left:72%;top:10%;width:23%;height:18%}
.office-zone.balcony{left:78%;top:34%;width:18%;height:54%;background:rgba(255,255,255,.35)}
.office-zone.restroom{left:2%;top:72%;width:14%;height:15%}
.office-zone.visitor{left:18%;top:72%;width:18%;height:15%}
.office-zone.desks{left:10%;top:34%;width:64%;height:32%}
.office-character{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;animation:wander var(--duration,10s) ease-in-out infinite;animation-delay:var(--delay,0s);z-index:2}
.office-character .speech{font-size:12px;background:rgba(255,255,255,.95);border:1px solid var(--border);padding:5px 8px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.06);white-space:nowrap}
.office-character strong{font-size:13px}
.office-character small{font-size:11px;color:var(--muted)}
.office-character:hover .speech{color:var(--primary-dark)}
@keyframes wander{
  0%,100%{transform:translate(-50%,-50%)}
  20%{transform:translate(-48%,-52%)}
  40%{transform:translate(-53%,-48%)}
  60%{transform:translate(-49%,-55%)}
  80%{transform:translate(-52%,-49%)}
}
.pixel-person{position:relative;width:28px;height:40px}
.pixel-person .head,.pixel-person .body{position:absolute;left:50%;transform:translateX(-50%);display:block}
.pixel-person .head{top:0;width:18px;height:18px;background:#ffd1b5;box-shadow:0 0 0 2px #2d3a3e inset;border-radius:4px}
.pixel-person .body{top:18px;width:20px;height:18px;background:#168c91;box-shadow:0 0 0 2px #2d3a3e inset;border-radius:4px}
.office-stage.night .office-zone{background:rgba(255,255,255,.66)}
@media (max-width: 1024px){
  .office-stage{min-height:820px}
  .office-zone.balcony{position:relative;left:auto;top:auto;width:auto;height:auto;margin:12px}
}