/* Shared visual rules for QR administration and customer pages. */
:root { --qr-bg:#f3f4f6; --qr-panel:#fff; --qr-text:#222; --qr-muted:#647080; --qr-border:#d9dde3; --qr-radius:14px; }
html, body { margin:0; color:var(--qr-text); font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; }
body { background:var(--qr-bg); }
.customer-header { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 24px; background:white; border-bottom:1px solid var(--qr-border); }
.customer-header a { color:#333; text-decoration:none; font-size:14px; }
.customer-header .customer-brand { font-size:18px; font-weight:800; }
.customer-header nav { display:flex; gap:20px; }
.customer-main { width:100%; max-width:1280px; margin:0 auto; padding:28px 24px; box-sizing:border-box; }
.admin-page { width:100%; min-width:0; }
.admin-page h1, .content > h1 { font-size:26px; line-height:1.4; font-weight:800; margin:0 0 22px; }
.admin-page h2, .form-card h2 { font-size:19px; line-height:1.5; font-weight:750; margin:0 0 16px; }
.admin-page h3 { font-size:17px; font-weight:700; }
.admin-card, .form-card { background:var(--qr-panel); border:1px solid var(--qr-border); border-radius:var(--qr-radius); padding:22px; margin:0 0 22px; box-shadow:0 2px 6px #18202a04; }
.admin-card p { color:#586270; line-height:1.7; }
.form-grid { gap:16px; align-items:end; }
.form-grid > label, .form-item > label, .admin-card > label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:#374151; margin:0; min-width:0; }
.admin-page input:not([type=checkbox]):not([type=radio]),
.admin-page select, .admin-page textarea,
.form-card input:not([type=checkbox]):not([type=radio]), .form-card select,
.form-item input:not([type=checkbox]):not([type=radio]), .form-item select {
    width:100%; min-width:0; max-width:100%; box-sizing:border-box; min-height:40px;
    padding:9px 11px; border:1px solid #bfc6cf; border-radius:8px; background:#fff;
    color:#222; font:400 15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.admin-page input[type=checkbox], .admin-page input[type=radio] { width:auto; min-height:0; }
.admin-page input:focus, .admin-page select:focus, .form-card input:focus, .form-card select:focus { outline:2px solid #8ba5bf; outline-offset:2px; }
.primary-button, .secondary-button, .mini-button, .danger-button {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px;
    padding:8px 14px; border-radius:8px; border:1px solid #c4cbd3; background:white;
    color:#28313c; font:600 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
    text-decoration:none; cursor:pointer; box-sizing:border-box; white-space:nowrap;
}
.primary-button { background:#222; border-color:#222; color:white; }
.primary-button:hover { background:#080808; }
.secondary-button:hover, .mini-button:hover { background:#f0f2f5; }
.danger-button { color:#a52636; border-color:#dfb5bb; }
.danger-button:hover { background:#fff2f3; }
button:disabled { opacity:.55; cursor:default; }
.button-row, .form-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0; }
.admin-page > .button-row { padding:0 0 16px; margin:0 0 20px; border-bottom:1px solid var(--qr-border); }
.message-card { border:1px solid #ded1a4; background:#fff9e8; border-radius:8px; padding:12px 14px; margin-bottom:16px; line-height:1.6; }
.table-wrap { border:1px solid var(--qr-border); border-radius:10px; background:white; max-width:100%; overflow:auto; }
.admin-table { min-width:700px; }
.admin-table th, .admin-table td { font-size:14px; padding:12px 14px; border-bottom:1px solid #e7eaf0; line-height:1.6; }
.admin-table th { background:#f4f6f8; color:#3d4754; font-size:13px; }
.admin-table tbody tr:hover { background:#fafbfd; }
.admin-table td > .mini-button, .admin-table td > .secondary-button { margin:2px; }
.small-url { min-width:0; }
.customer-login { max-width:560px; margin:24px auto; }
.customer-login .form-grid { grid-template-columns:1fr; }
.call-button-editor { margin-top:6px; }
.call-button-settings { background:#fafbfc; border-color:var(--qr-border); }
@media (max-width:700px) {
    .customer-main { padding:20px 14px; }
    .customer-header { padding:14px; }
    .admin-page h1, .content > h1 { font-size:23px; margin-bottom:18px; }
    .admin-card, .form-card { padding:16px; margin-bottom:16px; }
    .form-grid { grid-template-columns:minmax(0,1fr); }
    .admin-table { min-width:600px; }
}

/* Public entry, registration, and setup guide. */
.public-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px max(20px,calc((100vw - 1120px)/2)); background:#fff; border-bottom:1px solid var(--qr-border); }
.public-brand { color:#222; font-size:22px; font-weight:800; text-decoration:none; white-space:nowrap; }
.public-brand span, .customer-brand span { display:block; font-size:12px; color:var(--qr-muted); font-weight:600; }
.public-header nav { display:flex; align-items:center; gap:22px; }
.public-header nav > a:not(.primary-button) { color:#333; text-decoration:none; font-size:14px; }
.public-main { max-width:1120px; margin:auto; padding:36px 22px 50px; }
.public-footer { max-width:1120px; margin:auto; display:flex; gap:24px; flex-wrap:wrap; padding:24px 22px; color:var(--qr-muted); border-top:1px solid var(--qr-border); font-size:13px; }
.public-footer a { color:var(--qr-muted); }
.landing-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; padding:40px 0 64px; }
.landing-hero h1 { font-size:clamp(30px,4.4vw,48px); font-weight:850; line-height:1.5; letter-spacing:.01em; margin:20px 0; }
.landing-lead { font-size:17px; color:#586270; line-height:1.9; }
.muted { font-size:13px; color:var(--qr-muted); line-height:1.8; }
.plan-badge, .eyebrow { display:inline-block; font-size:12px; font-weight:700; color:#3e625b; letter-spacing:.08em; }
.plan-badge { background:#e4f0ec; border-radius:20px; padding:7px 12px; }
.landing-demo { display:flex; flex-direction:column; gap:14px; padding:24px; background:#e8ecef; border-radius:22px; }
.landing-demo > div { background:white; padding:20px; border-radius:12px; }
.landing-demo span { color:#87959f; font-size:12px; font-weight:700; margin-right:14px; }
.landing-demo strong { font-size:19px; }
.landing-demo p { margin:8px 0 0 32px; font-size:14px; color:var(--qr-muted); }
.landing-section { margin:10px 0 42px; }
.landing-section h2, .guide-page h1 { font-weight:800; }
.landing-section > h2 { font-size:25px; margin-bottom:22px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-grid h3 { font-size:18px; margin:0 0 12px; font-weight:750; }
.feature-grid p { margin:0; font-size:14px; }
.guide-steps { padding-left:24px; line-height:2.2; }
.guide-page { max-width:800px; margin:auto; }
.guide-page > h1 { font-size:30px; margin:16px 0; }
.guide-page .admin-card { margin-top:22px; }
.guide-page h2 { font-size:21px; font-weight:750; margin:0 0 14px; }
.guide-page h3 { font-size:16px; font-weight:700; margin-top:18px; }
.guide-page li { line-height:1.9; }
.signup-page { max-width:520px; margin:20px auto; }
.signup-page .form-item { margin:0 0 18px; }
.signup-page h1 { margin:12px 0 24px; }
.signup-page small { display:block; margin-top:6px; color:var(--qr-muted); font-size:12px; }
@media (max-width:700px) {
    .public-header { padding:14px; flex-wrap:wrap; gap:12px; }
    .public-header nav { gap:16px; }
    .public-brand { font-size:19px; }
    .public-main { padding:24px 14px 36px; }
    .landing-hero { grid-template-columns:minmax(0,1fr); padding:8px 0 32px; gap:26px; }
    .landing-hero h1 { font-size:32px; }
    .feature-grid { grid-template-columns:minmax(0,1fr); gap:0; }
    .landing-demo { padding:16px; }
    .signup-page { margin:8px auto; }
}

.signup-page p { overflow-wrap: anywhere; }