:root {
    --brand:#1976ff;
    --brand-2:#f6f9ff;
    --accent:#f5a623;
    --danger:#e6482e;
    --text:#1b1e28;
    --muted:#6b7280;
    --card:#ffffff;
    --radius:16px;
    --shadow:0 6px 18px rgba(0,0,0,.08);
}

html, body {
    margin:0; padding:0; background:#f3f5f9; color:var(--text);
    font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing:antialiased;
}

.app {
    max-width:480px; margin:0 auto; min-height:100dvh;
    display:flex; flex-direction:column;
}

/* ヘッダー */
.appbar {
    position:sticky; top:0;
    background:var(--brand); color:#fff; z-index:10;
    padding:14px 16px 12px;
    display:flex; align-items:center; gap:12px;
    border-bottom-left-radius:18px; border-bottom-right-radius:18px;
    box-shadow:0 8px 18px rgba(25,118,255,.25);
}
.appbar__title {
    font-family:"Shippori Mincho","Noto Sans JP",serif;
    font-size:22px; font-weight:700;
}
.icon-btn {
    margin-left:auto; border:0; background:transparent;
    color:#fff; padding:8px; border-radius:10px;
}
.icon-btn:active { opacity:.7; }

/* 共通カード */
.card {
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
}

/* 共通アクションボタン */
.btn {
    font:600 16px/1 "Noto Sans JP",system-ui;
    padding:14px 12px; border-radius:16px; border:0;
    box-shadow:var(--shadow);
}
.btn--primary { background:var(--brand); color:#fff; }
.btn--secondary { background:var(--accent); color:#000; }

/* 設定シート */
.sheet {
    position:fixed; inset:0; background:rgba(0,0,0,.25);
    display:none; align-items:flex-end; z-index:30;
}
.sheet.is-open { display:flex; }
.sheet__panel {
    background:var(--card); width:100%; max-width:480px;
    margin:0 auto; border-top-left-radius:22px; border-top-right-radius:22px;
    padding:14px 16px 30px; max-height:80dvh; overflow:auto;
    box-shadow:0 -8px 18px rgba(0,0,0,.15);
}
.sheet__header { display:flex; align-items:center; }
.sheet__title { font-size:18px; font-weight:700; }
.sheet__close {
    margin-left:auto; border:0; background:transparent;
    font-size:22px; padding:8px;
}
.setting {
    display:grid; grid-template-columns:1fr auto;
    align-items:center; gap:10px;
    padding:14px 0; border-bottom:1px solid #eef1f5;
}
.setting small { color:var(--muted); display:block; margin-top:4px; }

/* 入力類 */
select, input[type="text"], input[type="range"] {
    font:600 16px/1 "Noto Sans JP";
    padding:10px 12px; border-radius:12px;
    border:1px solid #e4e8f0; background:#fff;
}
.switch {
    appearance:none; width:48px; height:28px;
    background:#ddd; border-radius:999px;
    position:relative; cursor:pointer;
}
.switch:checked { background:var(--brand); }
.switch:before {
    content:""; position:absolute; top:3px; left:3px;
    width:22px; height:22px; border-radius:50%; background:#fff;
    transition:.2s;
}
.switch:checked:before { transform:translateX(20px); }