/* ============================================================================
   Rooski Tools — "Light Classic" shared theme
   Loaded by every tool at tools.gorooski.com via: <link rel="stylesheet" href="/shared/theme.css">
   Brand: white + #0098cf accent · Archivo heads · Inter body · Oswald labels.
   Change the brand once HERE and every tool updates on the next push.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600&family=Oswald:wght@500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#fff; --paper:#f6f7f8; --ink:#0b0d10; --ink2:#3b424a; --mut:#79818b;
  --line:rgba(12,14,17,.12); --line2:rgba(12,14,17,.07);
  --blue:#0098cf; --blue-hover:#0086b8; --blue-soft:#ecf5fb;
  --ok:#1e7b34; --ok-soft:#e7f4ea; --warn:#9c6500; --warn-soft:#fdf3da; --bad:#c0142b; --bad-soft:#fdeaec;
  --head:'Archivo',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --label:'Oswald',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:6px; --shadow:0 18px 44px -28px rgba(12,14,17,.45);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:15px}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}

/* layout */
.rk-top{height:3px;background:var(--blue)}
.rk-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.rk-section{padding:26px 0}
.rk-grid{display:grid;gap:14px}
.cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* header */
.rk-header{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line2)}
.rk-brand{font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:-.01em}
.rk-brand b{color:var(--blue)}
.rk-footer{border-top:1px solid var(--line2);margin-top:34px;padding:18px 0;color:var(--mut);font-size:12px;text-align:center}

/* type */
h1,h2,h3{font-family:var(--head);letter-spacing:-.012em;line-height:1.12;margin:0}
h1{font-weight:800;font-size:clamp(26px,4vw,42px)} h2{font-weight:800;font-size:24px} h3{font-weight:700;font-size:17px}
p{margin:10px 0;color:var(--ink2)}
.rk-eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:600;color:var(--blue);display:inline-block}
.rk-lead{font-family:var(--head);font-weight:700;font-size:clamp(19px,2.4vw,26px);line-height:1.25}
.rk-mut{color:var(--mut)} .rk-mono{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--mut)}
.label{font-family:var(--label);text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:600;color:var(--ink2);display:block;margin-bottom:5px}

/* buttons */
.btn{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:13px;padding:10px 18px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:8px;line-height:1}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn-ghost{background:transparent}
.btn-danger{color:var(--bad);border-color:var(--bad)} .btn-danger:hover{background:var(--bad);color:#fff}
.btn-sm{padding:6px 12px;font-size:12px} .btn[disabled]{opacity:.45;cursor:not-allowed}

/* form controls */
.input,.select,textarea.input{font-family:var(--body);font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card-accent{border-top:3px solid var(--blue)}
.card-hover{transition:.12s} .card-hover:hover{border-color:var(--blue);box-shadow:var(--shadow)}

/* table */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--ink2);text-align:left;padding:9px 10px;border-bottom:2px solid var(--line)}
.table td{padding:9px 10px;border-bottom:1px solid var(--line2)}
.table tr:hover td{background:var(--paper)}

/* chips / badges / pills */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--paper);cursor:pointer;user-select:none}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.badge{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:600;padding:3px 8px;border-radius:4px;background:var(--blue-soft);color:var(--blue)}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.bad{background:var(--bad-soft);color:var(--bad)}

/* segmented toggle (My/Rooski-style pill) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600;padding:6px 16px;border:0;background:#fff;color:var(--ink2);cursor:pointer}
.seg button.on{background:var(--blue);color:#fff}

/* utilities */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.center{text-align:center}.hidden{display:none}