/* Commonplace shared design system */
:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-bg: #f7f8fb;
  --color-surface: #fff;
  --color-text: #101a36;
  --color-muted: #5d6984;
  --color-border: #e1e6ef;
  --color-primary: #2458e8;
  --color-primary-hover: #1745c8;
  --color-soft-primary: #edf3ff;
  --color-success: #18764e;
  --color-danger: #b42318;
  --color-lime: #c7f45b;
  --content-width: 1240px;
  --radius-card: 18px;
  --radius-control: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg); }
html, body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: inherit; line-height: 1.6; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
button, input, textarea, select { font: inherit; }
button { transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.container { width: min(var(--content-width), calc(100% - 48px)); margin-inline: auto; }
.site-header { position: relative; z-index: 2; padding: 17px 0; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(225,230,239,.8); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--color-text); font-size:1.17rem; font-weight:800; text-decoration:none; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:white; background:linear-gradient(145deg,#3675ff,#174bd9); box-shadow:0 5px 12px #2458e82b; }
.brand-mark svg { width:19px; fill:currentColor; }
.nav-links { display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.nav-links a { color:#46516c; text-decoration:none; font-size:.94rem; font-weight:600; }
.nav-links a:hover { color:var(--color-primary); }
.hero { padding:64px 0 38px; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:#eff5d9; color:#304619; font-size:.78rem; font-weight:750; letter-spacing:.02em; }
h1 { margin:17px 0 12px; font-size:clamp(2.35rem,5vw,4rem); line-height:1.08; letter-spacing:-.055em; }
.hero p { max-width:680px; margin:0 auto; color:var(--color-muted); font-size:1.08rem; }
.search-wrap { max-width:630px; margin:28px auto 0; position:relative; }
.search-wrap input { width:100%; padding:15px 18px 15px 48px; border:1px solid #d8dfeb; border-radius:14px; background:#fff; color:var(--color-text); font:inherit; outline:none; box-shadow:0 8px 24px #101a360a; }
.search-wrap input:focus { border-color:#7da0ff; box-shadow:0 0 0 4px #2458e81a; }
.search-icon { position:absolute; left:17px; top:12px; color:#7b87a1; font-size:1.2rem; }
main { padding-bottom:60px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:30px 0 17px; }
h2 { margin:0; font-size:1.5rem; line-height:1.2; letter-spacing:-.035em; }
.section-heading p { margin:0; color:var(--color-muted); font-size:.92rem; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tool-card { display:flex; color:var(--color-text); text-decoration:none; flex-direction:column; min-height:218px; padding:22px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:#fff; text-decoration:none; box-shadow:0 5px 18px #101a3607; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
a.tool-card:hover { transform:translateY(-3px); border-color:#c0d0fb; box-shadow:0 14px 32px #101a3612; color:var(--color-text); }
.tool-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:17px; border-radius:15px; background:var(--color-soft-primary); color:var(--color-primary); font-size:1.25rem; font-weight:750; }
.tool-card h3 { margin:0 0 7px; font-size:1.07rem; letter-spacing:-.02em; }
.tool-card p { margin:0; color:var(--color-muted); font-size:.94rem; line-height:1.55; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:20px; }
.status { display:inline-flex; align-items:center; gap:7px; color:var(--color-success); font-size:.78rem; font-weight:700; }
.status:before { content:""; width:7px; height:7px; border-radius:50%; background:#28a76e; box-shadow:0 0 0 3px #28a76e1c; }
.status.soon { color:#7b8495; }
.status.soon:before { background:#aab2c0; box-shadow:none; }
.arrow { color:var(--color-primary); font-size:1.15rem; transition:transform .18s ease; }
a.tool-card:hover .arrow { transform:translateX(3px); }
.tool-card.soon { background:#fbfcfe; }
.empty { display:none; padding:24px; color:var(--color-muted); text-align:center; background:#fff; border:1px solid var(--color-border); border-radius:14px; }
.about-strip { margin-top:32px; padding:27px 30px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:linear-gradient(110deg,#fff 0%,#f4f7ff 100%); }
.about-strip p { max-width:800px; margin:9px 0 0; color:var(--color-muted); }
footer, .site-footer { border-top:1px solid var(--color-border); padding:24px 0 32px; color:var(--color-muted); font-size:.9rem; background:#fff; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer p { margin:0; }
.footer-inner nav { display:flex; gap:20px; flex-wrap:wrap; }
footer a { color:var(--color-muted); text-decoration:none; transition:color .15s ease; }
footer a:hover { color:var(--color-primary); text-decoration:none; }
.content-page { width:min(900px,calc(100% - 40px)); margin:48px auto; padding:clamp(26px,5vw,48px); background:#fff; border:1px solid var(--color-border); border-radius:22px; box-shadow:0 12px 40px #101a3608; }
.content-page h1 { margin:0 0 20px; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-.045em; }
.content-page h2 { margin:32px 0 8px; font-size:1.25rem; }
.content-page p, .content-page li { color:#4f5b75; line-height:1.8; }
.content-page .page-links { margin-top:24px; }
.tool-page { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding-bottom:54px; }
.tool-page-header { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding:38px 0 22px; text-align:left; }
.tool-page-header h1 { margin:9px 0 8px; font-size:clamp(2rem,4vw,2.75rem); letter-spacing:-.05em; }
.tool-page-header .muted { max-width:740px; color:var(--color-muted); margin:0; font-size:1rem; }
.tool-page-header .back-link { margin:0; font-size:.84rem; }
.tool-page-header .back-link a { display:inline-flex; align-items:center; gap:6px; color:#506080; text-decoration:none; font-weight:650; }
.tool-page-header .back-link a:hover { color:var(--color-primary); }
.tool-page .panel, .tool-page .results, .tool-page .info { background:#fff; border:1px solid var(--color-border); border-radius:18px; padding:24px; margin:18px 0; box-shadow:0 7px 24px #101a3608; }
.tool-page label { display:block; color:#26324f; font-weight:680; margin:0 0 9px; }
.tool-page textarea, .tool-page input[type="text"], .tool-page input[type="number"], .tool-page input[type="search"], .tool-page select { width:100%; border:1px solid #d2d9e6; border-radius:12px; padding:13px 14px; font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--color-text); background:#fcfdff; transition:border-color .16s ease,box-shadow .16s ease; }
.tool-page textarea:focus, .tool-page input:focus, .tool-page select:focus { outline:none; border-color:#7da0ff; box-shadow:0 0 0 3px #2458e81a; }
.tool-page textarea { min-height:240px; resize:vertical; }
.tool-page button, .tool-page .file-button { border:0; border-radius:11px; background:var(--color-primary); color:#fff; padding:11px 17px; font-weight:720; font-size:.91rem; cursor:pointer; box-shadow:0 4px 10px #2458e822; }
.tool-page button:hover, .tool-page .file-button:hover { background:var(--color-primary-hover); transform:translateY(-1px); }
.tool-page button.secondary { background:#f0f3f8; color:#27334d; box-shadow:none; }
.tool-page button.secondary:hover { background:#e4eaf3; }
.tool-page button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.tool-page .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.tool-page .grid, .tool-page .editors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tool-page .field { margin:14px 0; }
.tool-page .message { margin-top:12px; font-size:.9rem; color:var(--color-muted); overflow-wrap:anywhere; }
.tool-page .message.error, .tool-page .error { color:var(--color-danger); }
.tool-page .message.success, .tool-page .success { color:var(--color-success); }
.tool-page .hint { font-size:.82rem; color:var(--color-muted); margin:8px 0 0; }
.tool-page .ad-slot { min-height:90px; border:1px dashed var(--color-border); border-radius:14px; margin:22px 0; padding:14px; text-align:center; color:#8791a3; font-size:.78rem; }
.tool-page .stat-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.tool-page .stat { flex:1 1 130px; background:#f2f5ff; border:1px solid #e5ebfb; border-radius:14px; padding:14px 16px; color:#52607b; }
.tool-page .stat strong { display:block; color:var(--color-text); font-size:1.55rem; letter-spacing:-.04em; }
.tool-page .preview { max-width:100%; height:auto; border:1px solid var(--color-border); border-radius:14px; background:#f8faff; }
.tool-page .drop-zone { border:2px dashed #c6d3ea; border-radius:16px; padding:34px 20px; text-align:center; background:#f8faff; }
.tool-page .editor { display:flex; width:100%; min-height:300px; border:1px solid #d8dfeb; border-radius:13px; overflow:hidden; background:#fbfcff; }
.tool-page .line-numbers { flex:0 0 46px; padding:14px 8px; border-right:1px solid var(--color-border); background:#f4f6fa; color:#8a94a8; text-align:right; font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; user-select:none; overflow:hidden; white-space:pre; }
.tool-page .editor textarea { display:block; flex:1; width:0; min-width:0; min-height:300px; padding:14px; border:0; border-radius:0; outline:none; font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; background:transparent; white-space:pre; overflow:auto; tab-size:2; box-shadow:none; }
.tool-page .editor:focus-within { outline:3px solid #2458e81b; border-color:#8daaff; }
.tool-page .summary { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0; }
.tool-page .count { padding:6px 11px; border-radius:999px; font-size:.83rem; font-weight:720; }
.tool-page .added { background:#e3f7ec; color:#17603d; }
.tool-page .removed { background:#fff0ef; color:#a3312b; }
.tool-page .changed { background:#fff6df; color:#875b0a; }
.tool-page .diff-item { border:1px solid var(--color-border); border-radius:13px; padding:15px; margin:12px 0; overflow-wrap:anywhere; background:#fcfdff; }
.tool-page .diff-item code { display:block; margin-top:9px; padding:10px 12px; border-radius:9px; background:#f3f5f9; white-space:pre-wrap; }
.tool-page .diff-item .path { margin-top:8px; color:#3d4a67; font-weight:700; font-family:ui-monospace,monospace; }
.tool-page .empty { color:var(--color-muted); padding:14px 0; }
.tool-page .info { margin:26px 0; }
.tool-page .info h2, .tool-page .panel h2 { margin-top:0; font-size:1.2rem; }
.tool-page :is(.panel,.info,.results) p, .tool-page li { color:#53607b; line-height:1.75; }
.tool-page .panel h3 { margin-bottom:6px; }
.tool-page main a:not(.tool-card) { text-underline-offset:3px; }
:focus-visible { outline:3px solid #7898ff; outline-offset:3px; }
@media (max-width:900px) { .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tool-page .editors { grid-template-columns:1fr; } }
@media (max-width:700px) { .tool-page .grid { grid-template-columns:1fr; } .tool-page .panel,.tool-page .results,.tool-page .info { padding:18px; } .tool-page-header { padding-top:28px; } }
@media (max-width:600px) { .container { width:min(100% - 32px, var(--content-width)); } .site-header { padding:14px 0; } .nav { align-items:flex-start; } .nav-links { gap:16px; } .hero { padding:44px 0 28px; } .tool-grid { grid-template-columns:1fr; } .tool-card { min-height:185px; } .section-heading { align-items:flex-start; flex-direction:column; gap:5px; } .tool-page,.tool-page-header { width:calc(100% - 32px); } .tool-page-header h1 { font-size:2rem; } .footer-inner { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }