/* ===== Reset & Base (Tablet-optimized) ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:20px;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Noto Sans JP',sans-serif;
  background:#f0f2f5;color:#1a1a2e;line-height:1.6;min-height:100vh}
button{font:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit}

/* ===== Header ===== */
.header{background:linear-gradient(135deg,#1a237e,#283593);color:#fff;padding:0 16px;
  position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:transform .3s ease,box-shadow .3s ease;will-change:transform}
.header.header-collapsed{transform:translateY(-100%);box-shadow:none;pointer-events:none}
.header-row{display:flex;align-items:center;gap:12px;height:56px}
.header-row h1{font-size:1.15rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;flex-shrink:0}
.header-controls{display:flex;gap:8px;align-items:center;flex:1;min-width:0}
.header-controls select,.header-controls input[type="date"]{
  padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.15);color:#fff;font-size:.85rem;min-width:0;max-width:180px}
.header-controls select option{color:#333;background:#fff}
.lang-toggle{display:flex;background:rgba(255,255,255,.15);border-radius:6px;overflow:hidden;flex-shrink:0}
.lang-btn{padding:6px 14px;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.6);
  transition:all .2s;letter-spacing:.05em}
.lang-btn.active{background:rgba(255,255,255,.95);color:#1a237e}
.lang-btn:hover:not(.active){color:#fff;background:rgba(255,255,255,.25)}

/* ===== Tab Bar ===== */
.tab-bar{display:flex;background:#fff;border-bottom:2px solid #e0e0e0;
  position:sticky;top:56px;z-index:99;box-shadow:0 1px 4px rgba(0,0,0,.08);
  transition:top .3s ease}
.header.header-collapsed~.tab-bar{top:0}
.tab-btn{flex:1;padding:10px 4px;font-size:.9rem;font-weight:600;color:#666;
  border-bottom:3px solid transparent;transition:all .2s;min-height:44px}
.tab-btn.active{color:#1a237e;border-bottom-color:#1a237e;background:#f5f7ff}

/* ===== Mode Badge ===== */
.mode-badge{display:inline-block;padding:4px 12px;border-radius:6px;font-size:.75rem;font-weight:700;
  letter-spacing:.05em;margin-right:4px;flex-shrink:0}
.mode-supervisor{background:rgba(255,255,255,.2);color:#fff}
.mode-staff{background:#66bb6a;color:#fff}
.mode-front{background:#42a5f5;color:#fff}
.staff-header{margin-bottom:12px}
.staff-header h2{font-size:1.15rem;font-weight:700}

/* ===== Main ===== */
main{padding:24px;max-width:1200px;margin:0 auto}
.tab-content{display:none}
.tab-content.active{display:block}