/* ===================== Design tokens ===================== */
:root{
  --bg:#0c0f14;
  --panel:#12161d;
  --panel2:#181e28;
  --panel3:#0e1218;
  --border:#232b37;
  --border2:#2c3644;
  --text:#e8ebf1;
  --muted:#8a93a5;
  --faint:#5d6776;
  --accent:#ffb454;
  --accent-ink:#241a0c;
  --accent-dim:rgba(255,180,84,.10);
  --ok:#69d39b;
  --err:#ff7b72;
  --tok-key:#7fc8ff;
  --tok-str:#a8e6a0;
  --tok-num:#ffb454;
  --tok-bool:#e3a5ff;
  --tok-null:#8a93a5;
  --tok-punct:#5d6776;
  --radius:8px;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3340;border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#37414f}
::-webkit-scrollbar-track{background:transparent}

/* ===================== Layout ===================== */
.app{display:flex;height:100vh;overflow:hidden}

/* ---- Sidebar ---- */
.sidebar{
  width:268px;flex-shrink:0;height:100%;
  display:flex;flex-direction:column;
  background:var(--panel);
  border-right:1px solid var(--border);
  z-index:40;
}
.brand{padding:20px 18px 16px;border-bottom:1px solid var(--border);display:block;color:inherit;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-name{font-size:20px;font-weight:800;letter-spacing:.5px;display:flex;align-items:center;gap:2px}
.brand-name .cursor{display:inline-block;width:10px;height:18px;background:var(--accent);margin-left:3px;animation:blink 1.1s steps(1) infinite}
.brand-tag{font-size:11px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.nav{flex:1;overflow-y:auto;padding:10px 8px 16px}
.nav-group-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:6px;
  color:var(--muted);font-size:13px;
  border:1px solid transparent;
  transition:background .12s,color .12s;
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.nav-item:hover{background:var(--panel2);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent);border-color:rgba(255,180,84,.25)}
.nav-item.active svg{opacity:1}
.sidebar-foot{
  padding:12px 16px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--faint);line-height:1.5;
}

/* ---- Main ---- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:0 24px;height:56px;flex-shrink:0;
  background:var(--bg);border-bottom:1px solid var(--border);
}
.topbar-title{font-size:14px;font-weight:600;letter-spacing:.3px}
.topbar-title::before{content:"~/";color:var(--faint)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.privacy-chip{
  font-size:11px;color:var(--ok);
  border:1px solid rgba(105,211,155,.3);
  background:rgba(105,211,155,.08);
  padding:3px 10px;border-radius:99px;letter-spacing:.03em;
}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:6px;color:var(--text);width:34px;height:34px;align-items:center;justify-content:center}
.menu-btn:hover{border-color:var(--border2)}
.scrim{display:none;position:fixed;inset:0;background:rgba(5,7,10,.6);z-index:30;backdrop-filter:blur(2px)}
.content{flex:1;overflow-y:auto}

/* ===================== Views ===================== */
.view{display:none;padding:28px 32px 60px;max-width:1080px;margin:0 auto}
.view.active{display:block;animation:fadeIn .18s ease}

.tool-head{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--faint);
  margin-bottom:18px;user-select:none;
}
.tool-head .prompt{color:var(--ok)}
.tool-head .cmd{color:var(--accent)}
.tool-head .cursor{display:inline-block;width:7px;height:13px;background:var(--accent);animation:blink 1.1s steps(1) infinite}
.tool-title{font-size:26px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
.tool-desc{color:var(--muted);font-size:13.5px;max-width:720px;margin-bottom:26px}

/* ===================== Home / hero ===================== */
.hero{padding:56px 4px 34px}
.hero h1{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.2;letter-spacing:-.5px}
.hero h1 .cursor{display:inline-block;width:14px;height:26px;background:var(--accent);margin-left:4px;vertical-align:-4px;animation:blink 1.1s steps(1) infinite}
.hero p{color:var(--muted);font-size:14px;margin-top:14px;max-width:620px}
.search{
  width:100%;max-width:560px;margin-top:26px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-family:inherit;font-size:14px;
  padding:12px 16px;outline:none;transition:border-color .12s,box-shadow .12s;
}
.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.search::placeholder{color:var(--faint)}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding-bottom:20px}
.tool-card{
  display:block;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 18px 14px;
  transition:border-color .12s,transform .12s,background .12s;
  position:relative;overflow:hidden;
}
.tool-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);opacity:0;transition:opacity .12s;
}
.tool-card:hover{border-color:var(--border2);transform:translateY(-2px);background:var(--panel2)}
.tool-card:hover::before{opacity:1}
.tool-card .tc-icon{width:20px;height:20px;color:var(--accent);margin-bottom:12px}
.tool-card .tc-name{font-size:14.5px;font-weight:700;margin-bottom:5px}
.tool-card .tc-desc{font-size:12px;color:var(--muted);line-height:1.5;min-height:38px}
.tool-card .tc-run{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--faint);margin-top:12px}
.tool-card .tc-run::before{content:"$";color:var(--ok)}
.tool-card .tc-run span{color:var(--faint)}
.tool-card:hover .tc-run span{color:var(--muted)}

.no-result{padding:40px 4px;color:var(--faint);font-size:13px}

/* ===================== Cards / controls ===================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:820px){.split,.two-col{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px}
.card-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}

.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.row.tight{margin-bottom:8px}
.spacer{flex:1}

.input,.select{
  background:var(--panel3);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:inherit;font-size:13px;
  padding:9px 12px;outline:none;transition:border-color .12s;
}
.input:focus,.select:focus{border-color:var(--accent)}
.input.mono{flex:1;min-width:180px}
.select{min-width:150px}
input[type="datetime-local"]{color-scheme:dark}
input[type="color"]{
  width:42px;height:38px;padding:2px;border:1px solid var(--border);border-radius:6px;
  background:var(--panel3);cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px}
input[type="checkbox"]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}

.btn{
  background:transparent;border:1px solid var(--border2);border-radius:6px;
  color:var(--text);font-size:12.5px;font-weight:600;
  padding:9px 16px;transition:all .12s;white-space:nowrap;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.ghost{color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:var(--border2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.copy-mini{
  background:none;border:1px solid var(--border);border-radius:5px;
  color:var(--muted);font-size:11px;padding:3px 9px;transition:all .12s;
}
.copy-mini:hover{border-color:var(--accent);color:var(--accent)}
.copy-mini.done{border-color:var(--ok);color:var(--ok)}

.textarea,.pre{
  width:100%;background:var(--panel3);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:inherit;font-size:12.5px;line-height:1.6;
  padding:12px 14px;outline:none;transition:border-color .12s;
}
.textarea{min-height:220px;resize:vertical}
.textarea:focus{border-color:var(--accent)}
.pre{min-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0}
.pre.empty{color:var(--faint)}

.kv{width:100%;border-collapse:collapse}
.kv td{padding:7px 4px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.kv td:first-child{color:var(--faint);width:150px;white-space:nowrap}
.kv tr:last-child td{border-bottom:none}
.kv .mono{word-break:break-all}

.msg{font-size:12.5px;margin:10px 2px;min-height:18px}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--err)}
.msg .pos{color:var(--faint)}

/* json highlight */
.tok-key{color:var(--tok-key)}
.tok-str{color:var(--tok-str)}
.tok-num{color:var(--tok-num)}
.tok-bool{color:var(--tok-bool)}
.tok-null{color:var(--tok-null)}
.tok-punct{color:var(--tok-punct)}

/* misc tool styles */
.live{font-size:18px;font-weight:700;color:var(--accent);letter-spacing:.3px}
.live .sub{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px}

.swatch{width:100%;height:74px;border-radius:6px;border:1px solid var(--border);margin-bottom:14px;transition:background .15s}
.option-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;margin-bottom:12px}
.option-row input[type="checkbox"]{margin-right:2px}

.hash-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border)}
.hash-row:last-child{border-bottom:none}
.hash-row .label{width:86px;flex-shrink:0;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.hash-row .val{flex:1;font-size:12px;word-break:break-all;color:var(--text)}
.hash-row .copy-mini{flex-shrink:0}

.regex-out{background:var(--panel3);border:1px solid var(--border);border-radius:6px;padding:12px 14px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;min-height:120px}
.regex-out mark{background:rgba(255,180,84,.28);color:var(--accent);border-radius:2px;padding:0 1px}
.matches{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px}
.matches th{text-align:left;color:var(--faint);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.matches td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top;word-break:break-all}
.matches tr:last-child td{border-bottom:none}

.status-group{margin-bottom:22px}
.status-group h3{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:10px;letter-spacing:.04em}
.status-group h3 .code-range{color:var(--faint);font-weight:500}
.status-item{display:flex;gap:14px;align-items:baseline;padding:7px 4px;border-bottom:1px solid var(--border)}
.status-item:last-child{border-bottom:none}
.status-code{color:var(--accent);font-weight:700;min-width:64px;font-size:13px}
.status-name{color:var(--text);min-width:200px;font-size:13px;font-weight:600}
.status-desc{color:var(--muted);font-size:12px}

.cidr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cidr-item{background:var(--panel3);border:1px solid var(--border);border-radius:6px;padding:12px 14px}
.cidr-item .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.cidr-item .v{font-size:13px;word-break:break-all}
.cidr-item .v.accent{color:var(--accent);font-weight:700}

.cron-next{display:flex;align-items:center;gap:12px;padding:7px 4px;border-bottom:1px solid var(--border);font-size:13px}
.cron-next:last-child{border-bottom:none}
.cron-next .when{color:var(--accent);font-weight:600;min-width:220px}
.cron-next .rel{color:var(--muted);font-size:12px}

.tip{font-size:11.5px;color:var(--faint);margin-top:10px;line-height:1.6}
.tip code{color:var(--muted);background:var(--panel3);padding:1px 5px;border-radius:4px;border:1px solid var(--border)}

/* ===================== Animations ===================== */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===================== Responsive ===================== */
@media (max-width:768px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s ease}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,.5)}
  .scrim.show{display:block}
  .menu-btn{display:flex}
  .view{padding:20px 16px 48px}
  .privacy-chip{display:none}
  .tool-grid{grid-template-columns:repeat(auto-fill,minmax(100%,1fr))}
  .content{overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* Readable working surfaces and narrow-screen layout. */
:root{--muted:#a5afbf;--faint:#919bad}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
.mono,.pre,.regex-out,.brand-name,.tool-head,.live,.topbar-title{font-family:var(--mono)}
.view{max-width:1440px;padding:24px 28px 48px}
.hero{padding:24px 4px 28px}
.hero h1{font-size:clamp(28px,3.3vw,40px)}
.hero p,.tool-desc{font-size:16px}
.hero h1 .cursor,.tool-head .cursor,.brand-name .cursor{animation:none}
.card,.two-col>* ,.split>*{min-width:0}
.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.textarea,.pre,.regex-out{font-size:14px;min-height:300px;overflow-wrap:anywhere}
.input,.select,.btn,.option-row,.nav-item,.hash-row .val,.kv td{font-size:14px}
.btn,.copy-mini{min-height:40px}
.card-title,.nav-group-label,.brand-tag,.tip,.sidebar-foot,.hash-row .label{font-size:12px;letter-spacing:.04em}
.copy-mini{font-size:13px}
.search{font-family:inherit;font-size:16px}
.card{padding:16px;margin-bottom:16px}
.tool-title{font-size:28px}
.tool-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tc-desc{font-size:14px}
.kv td{overflow-wrap:anywhere}
.kv td:first-child{width:115px;white-space:normal}
.cron-next{flex-wrap:wrap;overflow-wrap:anywhere}
.cron-next .when{min-width:0}
.cidr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.status-item{display:grid;grid-template-columns:52px minmax(150px,1fr) minmax(0,2fr)}
.status-code,.status-name{min-width:0}
.status-name,.status-desc{overflow-wrap:anywhere;font-size:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px}
.skip-link:focus{top:8px}
@media(max-width:1100px){.split{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){.two-col{grid-template-columns:minmax(0,1fr)}}
@media(max-width:768px){
 .app{height:100dvh}.view{padding:20px 16px 40px}
 .topbar{padding:0 16px;gap:10px}.topbar-title{font-size:13px}
 .sidebar:not(.open){visibility:hidden}.sidebar.open{visibility:visible}
 .input,.select,.textarea,.search{font-size:16px;max-width:100%}
 .input.mono{min-width:0!important;flex-basis:100%!important}
 .select{min-width:0;flex:1}.row{gap:8px}
 .textarea,.pre{min-height:240px}.hero{padding-top:12px}
 .tool-grid{grid-template-columns:minmax(0,1fr)}
 .status-item{grid-template-columns:48px minmax(0,1fr);gap:6px 12px;padding:14px 0}
 .status-desc{grid-column:2}.status-code{min-width:0}
 .cidr-grid{grid-template-columns:minmax(0,1fr)}
 .hash-row{flex-wrap:wrap}.hash-row .val{flex-basis:100%;order:3}
 .hash-row .copy-mini{margin-left:auto}.hash-row .label{width:auto}
 .kv td:first-child{width:96px}.cron-next{display:grid;gap:4px}
 .brand{padding:16px}.nav{padding-top:4px}.nav-item{padding:8px 10px}
}


.tool-guide{margin-top:36px;border-top:1px solid var(--border);padding-top:20px;max-width:900px;line-height:1.65}.tool-guide h2{font-size:20px;margin:24px 0 12px}.tool-guide li{margin:8px 0}.tool-guide p{color:var(--muted)}.tool-guide pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px;font-size:14px}.site-footer{display:flex;gap:24px;flex-wrap:wrap;margin-top:40px;padding:20px 0;border-top:1px solid var(--border)}.site-footer a{color:var(--muted)}.noscript{padding:12px;background:var(--panel2);color:var(--accent)}