:root{
  --ink:#12161C;
  --panel:#1B2129;
  --panel2:#20272F;
  --paper:#ECE8DE;
  --signal:#E8A33D;
  --circuit:#4FA8A0;
  --muted:#8A93A0;
  --danger:#E0654F;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}

#clockstrip{
  display:flex;
  overflow-x:auto;
  gap:0;
  border-bottom:1px solid #2A323C;
  background:var(--panel);
}
.clock-cell{
  flex:1 0 140px;
  padding:10px 16px;
  border-right:1px solid #2A323C;
  white-space:nowrap;
}
.clock-cell .city{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.clock-cell .time{font-size:18px;color:var(--signal);}

header.top{
  padding:28px 24px 8px;
  max-width:1100px;
  margin:0 auto;
}
header.top h1{font-size:26px;margin:0 0 4px;letter-spacing:-0.01em;}
header.top p{color:var(--muted);margin:0;font-size:14px;}
.crumb{font-size:12px;color:var(--muted);margin-bottom:6px;}
.crumb a:hover{color:var(--signal);}

nav#dials{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:10px;
  max-width:1100px;
  margin:20px auto;
  padding:0 24px;
}
.dial{
  background:var(--panel);
  border:1px solid #2A323C;
  border-radius:10px;
  padding:14px 8px;
  text-align:center;
  text-decoration:none;
  display:block;
  cursor:pointer;
  transition:border-color .15s;
}
.dial:hover{border-color:var(--signal);}
.dial.active{border-color:var(--circuit); background:var(--panel2);}
.dial .n{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.dial .l{font-size:12px;margin-top:4px;line-height:1.25;color:var(--paper);}

main{
  max-width:1100px;
  margin:0 auto 30px;
  padding:0 24px;
}
.panel{
  background:var(--panel);
  border:1px solid #2A323C;
  border-radius:14px;
  padding:28px;
}
.panel h2{font-size:20px;margin:0 0 6px;}
.panel .sub{color:var(--muted);font-size:13px;margin:0 0 20px;}

.about{
  max-width:1100px;
  margin:0 auto 30px;
  padding:0 24px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.about h3{color:var(--paper);font-size:15px;margin-bottom:6px;}

label{display:block;font-size:12px;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em;}
input,select,textarea{
  width:100%;
  background:var(--ink);
  border:1px solid #2A323C;
  color:var(--paper);
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  font-family:inherit;
}
textarea{resize:vertical;min-height:120px;}
button.act{
  margin-top:18px;
  background:var(--signal);
  color:var(--ink);
  border:none;
  border-radius:8px;
  padding:10px 20px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
button.act:hover{opacity:.9;}
button.ghost{
  background:transparent;
  border:1px solid #2A323C;
  color:var(--paper);
  border-radius:8px;
  padding:9px 16px;
  font-size:13px;
  cursor:pointer;
  margin-top:10px;
  margin-left:8px;
}
.result{
  margin-top:20px;
  padding:16px;
  background:var(--ink);
  border:1px solid #2A323C;
  border-radius:10px;
  font-size:14px;
  white-space:pre-wrap;
}
.row{display:flex;gap:14px;flex-wrap:wrap;}
.row > div{flex:1;min-width:200px;}
.hidden{display:none;}
footer{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:30px 24px 50px;
}
.strength-bar{height:8px;border-radius:4px;background:#2A323C;overflow:hidden;margin-top:8px;}
.strength-fill{height:100%;transition:width .2s, background .2s;}
.list-plain{list-style:none;padding:0;margin:8px 0;}
.list-plain li{padding:6px 0;border-bottom:1px solid #2A323C;font-size:13px;}
.adslot{max-width:1100px;margin:0 auto 20px;padding:0 24px;display:flex;justify-content:center;}