:root { color-scheme: light; --bg:#f5f6f8; --paper:#fff; --ink:#253040; --muted:#657185; --line:#e1e5eb; --accent:#4657b8; --soft:#edf0fb; --ok:#176a55; --warn:#855317; --bad:#a73944; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.7 system-ui,-apple-system,"Noto Sans JP","Hiragino Sans",sans-serif; }
[hidden] { display:none!important; }
a { color:var(--accent); text-underline-offset:4px; }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #7885d5; outline-offset:4px; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.55; }
.skip { position:absolute; top:-100px; left:15px; z-index:20; background:white; padding:8px; }
.skip:focus { top:12px; }
.topbar { height:80px; display:flex; align-items:center; gap:30px; padding:0 max(24px,calc((100vw - 1200px)/2)); border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-size:20px; font-weight:750; letter-spacing:-.7px; }
.brand-mark { display:grid; place-items:center; background:var(--ink); color:white; width:37px; height:37px; border-radius:11px; font-size:20px; }
.product-label { color:var(--muted); font-size:12px; letter-spacing:.8px; border-left:1px solid var(--line); padding-left:28px; }
.nav-link { margin-left:auto; color:var(--muted); font-size:13px; text-decoration:none; }
main { max-width:1248px; padding:28px 24px 60px; margin:auto; min-height:calc(100vh - 160px); }
.breadcrumb { display:flex; gap:13px; font-size:12px; color:var(--muted); margin-bottom:28px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.site-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--accent); margin:0 0 7px; }
h1 { font-size:32px; font-weight:650; line-height:1.4; letter-spacing:-.8px; margin:0; overflow-wrap:anywhere; }
h2 { font-size:15px; margin:0 0 18px; font-weight:700; }
p { margin:0 0 12px; }
.muted,.hint { color:var(--muted); }
.hint { font-size:12px; line-height:1.8; }
#site-url { margin:6px 0 0; font-size:13px; overflow-wrap:anywhere; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:24px; font-size:13px; font-weight:650; background:#e9edf4; white-space:nowrap; }
.badge::before { content:""; width:7px; height:7px; background:currentColor; border-radius:50%; }
.badge.running { background:#e9edfc; color:var(--accent); }
.badge.done { background:#e7f3ee; color:var(--ok); }
.badge.failed,.badge.canceled { background:#fbecef; color:var(--bad); }
.badge.unknown,.badge.reconnecting,.badge.canceling { background:#fcf2df; color:var(--warn); }
.connection { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; color:var(--muted); font-size:13px; }
.connection.problem { border-left:3px solid #c58b36; padding-left:12px; color:var(--warn); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 3px 14px #26304703; min-width:0; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.metric { padding:20px 22px; }
.metric>span { color:var(--muted); font-size:12px; }
.metric strong { display:block; font-size:30px; font-weight:650; line-height:1.7; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.metric strong.unmeasured { font-size:24px; line-height:2.1; color:var(--muted); }
.metric small { display:block; font-size:11px; color:var(--muted); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); gap:24px; align-items:start; }
.side-column { display:grid; gap:20px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.mini-label { font-size:11px; color:var(--muted); }
.current-stage { font-size:20px; margin:0 0 26px; font-weight:650; }
.timeline { list-style:none; margin:0 0 16px; padding:0; }
.timeline li { position:relative; display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:start; min-height:61px; color:var(--muted); font-size:13px; }
.timeline li:not(:last-child)::before { content:""; position:absolute; width:1px; background:var(--line); left:14px; top:30px; bottom:2px; }
.step-number { border:1px solid var(--line); border-radius:50%; width:29px; height:29px; display:grid; place-items:center; font-size:11px; background:var(--paper); }
.step-title { padding-top:3px; }
.step-time { font-size:11px; padding-top:5px; font-variant-numeric:tabular-nums; }
.timeline li.active { color:var(--accent); font-weight:650; }
.timeline li.active .step-number { background:var(--accent); border-color:var(--accent); color:white; box-shadow:0 0 0 5px var(--soft); }
.timeline li.done .step-number { background:#e7f3ee; border-color:#e7f3ee; color:var(--ok); }
.timeline li.stopped .step-number { color:var(--bad); background:#fbecef; border-color:#fbecef; }
.facts { display:grid; grid-template-columns:72px 1fr; gap:10px 12px; font-size:12px; margin:0 0 20px; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; overflow-wrap:anywhere; }
.mono { font-family:ui-monospace,monospace; font-size:11px; }
.issue { border-left:3px solid #c58b36; padding:0 0 0 12px; margin:0 0 14px; font-size:13px; overflow-wrap:anywhere; }
.issue.error { border-color:var(--bad); }
.error { color:var(--bad); font-size:13px; overflow-wrap:anywhere; }
.success-card { border-color:#b9d9cc; background:#f5faf7; }
.success-card.has-warnings { border-color:#e6d2a6; background:#fffbf0; }
dialog { width:95vw; max-width:1400px; max-height:92vh; border:1px solid var(--line); border-radius:16px; padding:24px; color:var(--ink); }
dialog::backdrop { background:#182132bb; }
dialog form { text-align:right; }
#viewer-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#viewer-images figure { margin:0; font-size:12px; }
#viewer-images img { width:100%; }
@media(max-width:640px) { #viewer-images { grid-template-columns:1fr; } }
.result-links { display:flex; gap:10px; flex-wrap:wrap; }
.result-links a { font-size:13px; }
.logs-card,.report-card,#compare-box { margin-top:24px; }
summary { cursor:pointer; font-size:14px; font-weight:600; }
summary .muted { font-size:12px; font-weight:400; padding-left:8px; }
details[open] summary { margin-bottom:16px; }
.log,.report { padding:18px; margin:0; border-radius:10px; font:12px/1.9 ui-monospace,SFMono-Regular,monospace; white-space:pre-wrap; overflow-wrap:anywhere; max-height:360px; overflow:auto; }
.log { background:#232c3b; color:#dce4ee; }
.report { background:var(--bg); }
.toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:24px; }
.toolbar label { font-size:12px; color:var(--muted); }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:14px; min-height:42px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:9px 16px; font-size:13px; text-decoration:none; }
.btn:hover { border-color:#9fa9c0; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:white; }
.btn.quiet { min-height:36px; background:transparent; font-size:12px; }
.btn.danger { color:var(--bad); }
.notice { padding:12px; background:#fcf2df; margin-bottom:20px; font-size:13px; }
.home { max-width:800px; margin:50px auto 0; }
.home h1 { font-size:38px; }
.intro { color:var(--muted); margin:20px 0 30px; }
.create-form label { display:block; font-size:13px; font-weight:600; margin-bottom:9px; }
.input-row { display:flex; gap:12px; margin-bottom:14px; }
input:not([type=checkbox]) { min-width:0; border:1px solid var(--line); border-radius:9px; padding:11px 14px; color:var(--ink); background:var(--paper); }
.input-row input { flex:1; }
.password-field { margin-bottom:16px; }
.password-field input { width:100%; }
.recent-section { margin:32px 0; }
.recent-job { display:flex; gap:12px; justify-content:space-between; align-items:center; text-decoration:none; color:var(--ink); background:var(--paper); border:1px solid var(--line); padding:16px 20px; border-radius:12px; margin-bottom:10px; }
.recent-job strong { font-size:14px; overflow-wrap:anywhere; }
.recent-job small { display:block; color:var(--muted); font-size:11px; }
.compare-table { width:100%; border-collapse:collapse; font-size:12px; }
.compare-table td,.compare-table th { padding:10px; text-align:left; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.compare-scroll { overflow:auto; }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:22px max(24px,calc((100vw - 1200px)/2)); color:var(--muted); font-size:11px; }
@media(max-width:850px) { .metrics { grid-template-columns:repeat(2,1fr); } .dashboard-grid { grid-template-columns:1fr; } .side-column { grid-template-columns:1fr 1fr; } .success-card { grid-column:1/-1; } }
@media(max-width:540px) { .topbar { height:65px; padding:0 20px; } .product-label { display:none; } main { padding:22px 16px 40px; } h1 { font-size:25px; } .site-heading { align-items:flex-start; } .badge { font-size:11px; padding:6px 10px; } .metrics { gap:10px; margin-bottom:16px; } .metric { padding:15px; } .metric strong { font-size:25px; } .metric small { font-size:10px; } .card { padding:20px; border-radius:13px; } .metric { padding:15px; } .side-column { grid-template-columns:1fr; } .dashboard-grid { gap:16px; } .connection { align-items:flex-start; font-size:12px; } .connection .btn { flex-shrink:0; } .timeline li { grid-template-columns:30px 1fr auto; gap:9px; font-size:12px; } .step-time { font-size:10px; } .home { margin-top:25px; } .home h1 { font-size:30px; } .input-row { flex-direction:column; } footer { padding:20px 16px; font-size:10px; } }
@media(prefers-reduced-motion:no-preference) { .btn,.recent-job { transition:border-color .15s,background .15s; } }
.email-field { border: 1px solid var(--line, #d7dfd9); border-radius: 12px; margin: 20px 0 0; padding: 16px; min-width: 0; }
.email-field legend { padding: 0 6px; font-size: 14px; font-weight: 600; }
.email-field input[type=email] { width: 100%; box-sizing: border-box; margin: 8px 0 12px; }
.email-field .consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.7; }
.email-field .consent input { flex: 0 0 auto; margin-top: 5px; }
.email-field:disabled { opacity: .65; }
#notification-status { margin-bottom: 16px; line-height: 1.7; }