:root { font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; color:#12334c; background:#f3f7fb; font-size:16px; }
* { box-sizing:border-box; } body { margin:0; } button,input,textarea { font:inherit; }
button { cursor:pointer; } button:disabled { opacity:.55; cursor:not-allowed; }
a { color:#006b5a; } :focus-visible { outline:3px solid #27a58e; outline-offset:2px; }
.layout { display:flex; min-height:100vh; } .sidebar { width:260px; flex:none; background:#12334c; color:white; padding:30px 18px; display:flex; flex-direction:column; }
.brand { display:flex; gap:13px; align-items:center; padding:0 9px 28px; } .brand b { font-size:22px; display:block; letter-spacing:.04em; } .brand small { color:#b2cada; display:block; margin-top:4px; }
.brand-mark { background:#087565; padding:12px 17px; border-radius:14px; font-weight:800; font-size:23px; }
nav { display:grid; gap:6px; } nav button { text-align:left; width:100%; padding:14px; border:0; border-radius:11px; background:transparent; color:#d4e1ed; font-weight:700; }
nav button.active,nav button:hover { background:#22516b; color:white; } .side-foot { margin:auto 10px 0; font-size:12px; line-height:1.8; color:#a9c3d1; }
.workspace { flex:1; min-width:0; } .topbar { min-height:72px; background:white; border-bottom:1px solid #dce5ec; display:flex; align-items:center; gap:18px; padding:15px 32px; font-weight:700; }
#userLabel { margin-left:auto; font-size:14px; color:#547187; font-weight:500; } .plain { background:white; color:#006b5a; border:1px solid #bbd8d2; border-radius:9px; padding:9px 14px; }
main { max-width:1200px; margin:auto; padding:32px; } h1 { font-size:28px; margin:7px 0 14px; } h2 { font-size:19px; margin:0 0 15px; } h3 { font-size:17px; }
.lead { margin:0 0 25px; color:#4a6576; line-height:1.8; } .eyebrow { font-size:12px; font-weight:800; letter-spacing:.14em; color:#0b7665; }
.panel { background:#fff; border:1px solid #dae6ed; border-radius:16px; padding:25px; box-shadow:0 9px 25px #1734480b; }
.login { max-width:550px; margin:60px auto; padding:35px; }
.form-stack { display:grid; gap:18px; max-width:530px; margin:25px 0; } label { font-weight:700; display:block; } label input,select,textarea { display:block; width:100%; background:#fff; padding:13px; margin-top:8px; border:1px solid #aec6d3; border-radius:9px; color:#12334c; min-height:47px; }
.primary,.secondary,.danger { border:0; border-radius:10px; padding:13px 19px; font-weight:800; }
.primary { background:#006c59; color:white; } .primary:hover { background:#004e42; } .secondary { background:#e7f2f6; color:#13465b; }
.danger { background:#fcebe7; color:#b03c29; } .note,.small { color:#557183; font-size:13px; line-height:1.8; }
.notice { border:1px solid #b5dae2; background:#e9f5f8; border-radius:11px; padding:13px 17px; margin:18px 0 23px; line-height:1.75; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:22px 0; } .metric { border:1px solid #dce8ed; border-radius:14px; padding:23px; background:white; }
.metric span { display:block; color:#557182; font-weight:700; font-size:14px; } .metric strong { display:block; font-size:32px; margin-top:10px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; } .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:650px; }
th,td { padding:16px 12px; border-bottom:1px solid #e6eef2; text-align:left; vertical-align:top; } th { font-size:13px; background:#f7fafb; } td small { color:#698193; }
.status { display:inline-block; border-radius:20px; background:#e4eef5; color:#31536b; font-weight:700; padding:5px 12px; font-size:12px; }
.status-submitted { background:#fff2d4; color:#875700; } .status-confirmed { background:#e3f5e9; color:#167044; } .status-cancelled { background:#f6e9e9; color:#9b3838; }
.status-shipped { background:#e6eefb; color:#2352a2; } .row-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.row-actions button { padding:7px 11px; border-radius:7px; border:1px solid #c5d9e2; background:#f4fafc; font-size:13px; }
.two-col { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; } .line { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #edf1f3; }
.line:last-child { border-bottom:0; } .line small { color:#688295; display:block; } .total { font-size:21px; font-weight:800; text-align:right; padding:15px 0; }
.empty { text-align:center; padding:35px; color:#557183; } #toast { position:fixed; bottom:22px; right:22px; border-radius:10px; padding:15px 20px; color:white; background:#087565; max-width:min(440px,90vw); box-shadow:0 10px 30px #0002; }
#toast.error { background:#b84230; } .helper { color:#8b470d; }
@media(max-width:850px) { .layout { display:block; } .sidebar { width:100%; padding:16px; } .brand { padding-bottom:12px; } nav { display:flex; gap:6px; overflow-x:auto; } nav button { min-width:max-content; white-space:nowrap; font-size:13px; padding:10px 12px; } .side-foot { display:none; } .topbar { padding:13px 18px; flex-wrap:wrap; } main { padding:17px; } .login { margin:15px auto; padding:22px; } .metrics { grid-template-columns:1fr; } .two-col { grid-template-columns:1fr; } h1 { font-size:24px; } .panel { padding:18px; } }