:root { --ink:#17201d; --muted:#5d6964; --paper:#f4f6f3; --surface:#fff; --line:#cbd3ce; --green:#176b4d; --green-dark:#0d4b36; --amber:#e5a62f; --red:#a5362f; --shadow:0 16px 40px rgba(23,32,29,.09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#eef2ee 0,#f8f9f7 55%,#eef1ed 100%); font-family:"IBM Plex Sans","Noto Sans JP",sans-serif; letter-spacing:0; min-height:100vh; }
.site-header { height:64px; display:flex; align-items:center; border-bottom:1px solid var(--line); background:rgba(255,255,255,.86); padding:0 max(24px,calc((100vw - 1120px)/2)); }
.brand { color:var(--ink); font-family:"IBM Plex Mono","Noto Sans Mono",monospace; font-weight:700; text-decoration:none; }
.page-shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:56px 0 80px; }
h1 { margin:4px 0 28px; font-family:"Source Serif 4","Noto Serif JP",serif; font-size:3rem; line-height:1.12; letter-spacing:0; }
.eyebrow { color:var(--green); font-size:.76rem; font-weight:800; letter-spacing:.12em; margin:0; }.lead { color:var(--muted); line-height:1.7; margin:-14px 0 28px; }
.download-panel,.auth-panel { max-width:620px; padding:42px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }.form-stack { display:grid; gap:20px; }.form-wide { max-width:720px; padding:32px; background:var(--surface); border-left:4px solid var(--green); box-shadow:var(--shadow); }
label { display:grid; gap:8px; color:var(--muted); font-weight:700; font-size:.9rem; } input { width:100%; min-height:46px; padding:10px 12px; border:1px solid #9eaaa4; background:#fff; color:var(--ink); font:inherit; } input:focus { outline:3px solid rgba(23,107,77,.2); border-color:var(--green); }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid var(--green); background:var(--green); color:#fff; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; } button:hover,.button:hover { background:var(--green-dark); }.button-secondary { background:transparent; color:var(--green-dark); }.button-danger { min-height:34px; padding:6px 10px; background:transparent; border-color:var(--red); color:var(--red); }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }.action-row { display:flex; flex-wrap:wrap; gap:12px; }.notice { padding:13px 16px; border-left:4px solid var(--green); background:#e7f2ec; }.notice-error { border-color:var(--red); background:#f7e9e7; }.notice-warning { border-color:var(--amber); background:#fff4d9; }
.table-scroll { overflow-x:auto; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); } table { width:100%; border-collapse:collapse; font-size:.9rem; } th,td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; } th { background:#e9eeea; color:#3e4a45; }
.result-list { display:grid; grid-template-columns:minmax(150px,220px) 1fr; max-width:800px; background:var(--surface); border-top:3px solid var(--green); }.result-list dt,.result-list dd { margin:0; padding:14px; border-bottom:1px solid var(--line); }.result-list dt { color:var(--muted); font-weight:700; }.secret-value { font-family:"IBM Plex Mono",monospace; overflow-wrap:anywhere; }.result-link { overflow-wrap:anywhere; }.copy-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0 24px; }.copy-status { color:var(--green-dark); font-weight:700; min-height:1.5em; }.error-panel { max-width:700px; }.error-code { color:var(--red); font-size:5rem; font-weight:900; margin:0; }
@media (max-width:640px) { .page-shell { padding-top:32px; }.download-panel,.auth-panel,.form-wide { padding:24px; } h1 { font-size:1.75rem; line-height:1.2; }.page-heading { display:block; }.result-list { grid-template-columns:1fr; }.result-list dt { border-bottom:0; padding-bottom:4px; }.result-list dd { padding-top:4px; } }