:root { --bg:#f6f7f9; --fg:#1f2430; --muted:#6b7280; --line:#e2e5ea; --accent:#2f5bea; --danger:#c62828; --ok:#1b7a3a; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1.25rem; background:#fff; border-bottom:1px solid var(--line); }
.site-header .brand { font-weight:700; color:var(--fg); text-decoration:none; font-size:1.1rem; }
.site-header nav a { margin-left:1rem; color:var(--accent); text-decoration:none; font-size:.9rem; }
body.area-systemkanri .site-header { border-bottom:3px solid #6a1b9a; }
body.area-kanri .site-header { border-bottom:3px solid #00897b; }
.container { max-width:1000px; margin:1.5rem auto; padding:0 1rem; }
h1 { font-size:1.4rem; margin:.2rem 0 1rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem 1.25rem; margin-bottom:1rem; }
.form label { display:block; margin-bottom:.9rem; font-size:.9rem; color:var(--muted); }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=url], .form input[type=number], .form select, .form textarea {
  display:block; width:100%; margin-top:.25rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius:6px; font-size:1rem; color:var(--fg); }
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:.5rem 1rem; font-size:.9rem; cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary, .btn.secondary { background:#fff; color:var(--accent); border:1px solid var(--accent); }
button.danger { background:var(--danger); }
button.small { padding:.25rem .6rem; font-size:.8rem; }
button:disabled { opacity:.5; cursor:not-allowed; }
.flash { padding:.7rem 1rem; border-radius:6px; margin-bottom:1rem; }
.flash-error { background:#fdecea; color:var(--danger); border:1px solid #f5c2c0; }
.flash-success { background:#e8f5e9; color:var(--ok); border:1px solid #b7dfbf; }
table { width:100%; border-collapse:collapse; background:#fff; font-size:.88rem; }
th, td { padding:.5rem .6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; word-break:break-word; }
th { background:#fafbfc; color:var(--muted); font-weight:600; }
.table-wrap { overflow-x:auto; }
.badge { display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.75rem; background:#eef; color:#334; }
.badge.pending { background:#fff4d6; color:#8a6100; } .badge.approved { background:#e0f4e6; color:#1b7a3a; }
.badge.rejected, .badge.suspended { background:#fde3e1; color:#c62828; }
.inline-form { display:inline; }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; margin-bottom:1rem; }
.filters label { font-size:.8rem; color:var(--muted); }
.filters input, .filters select { display:block; padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; }
.tabs a { margin-right:.5rem; padding:.3rem .8rem; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--fg); background:#fff; }
.tabs a.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.muted { color:var(--muted); font-size:.85rem; }
.step { font-size:1.05rem; margin:0 0 .8rem; }
.choice { display:block; border:1px solid var(--line); border-radius:8px; padding:.7rem; background:#fff; cursor:pointer; color:var(--fg) !important; font-size:.9rem !important; }
.choice input { margin-right:.4rem; }
.choice .muted { display:block; }
.choice-inline { display:block; margin-bottom:.4rem; color:var(--fg) !important; }
.thumb { display:block; width:100%; max-width:120px; height:120px; object-fit:cover; border-radius:6px; margin:.4rem 0; }
.badge.planning, .badge.generating { background:#e3ecff; color:#1a3fa8; }
.badge.completed { background:#e0f4e6; color:#1b7a3a; }
[hidden] { display:none !important; }
.ratio-box { display:inline-block; vertical-align:middle; border:2px solid var(--accent); border-radius:3px; background:#eef2ff; margin:0 .5rem 0 .2rem; }
.ratio-box.landscape { width:32px; height:18px; }
.ratio-box.portrait { width:18px; height:32px; }
.thumb-slot { display:block; margin:.4rem 0; }
.thumb-empty { display:flex; align-items:center; justify-content:center; text-align:center; font-size:.75rem; color:var(--muted); border:1px dashed var(--line); border-radius:6px; background:#fafbfc; padding:.4rem; }
#order-form[data-orientation="landscape"] .thumb, #order-form[data-orientation="landscape"] .thumb-empty { width:100%; max-width:200px; aspect-ratio:16/9; height:auto; }
#order-form[data-orientation="portrait"]  .thumb, #order-form[data-orientation="portrait"]  .thumb-empty { width:100%; max-width:110px; aspect-ratio:9/16; height:auto; }
.thumb { object-fit:cover; }
.char-preview { display:block; border-radius:8px; border:1px solid var(--line); max-width:100%; }
.char-preview.landscape { max-width:320px; } .char-preview.portrait { max-height:360px; }