:root{
  --bg: #0f141a;
  --panel: #151b23;
  --panel-2: #0e1319;
  --muted: #9fb0c7;
  --text: #e7eef7;
  --blue: #3b82f6;
  --blue-2: #2563eb;
  --card: #0d1218;
  --border: #1f2a37;
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(180deg,var(--bg),#0a0f15);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}

.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-bottom:1px solid var(--border)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand a{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:10px;align-items:center}
.nav-link{padding:8px 10px;border-radius:10px;opacity:.7}
.nav-link:hover{opacity:1;background:rgba(255,255,255,.04)}
.nav-link.disabled{opacity:.4;pointer-events:none}
.btn{background:var(--blue);border:none;color:white;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer;display:inline-block}
.btn:hover{background:var(--blue-2)}
.btn.small{padding:8px 12px;font-size:.9rem}

.page-title{margin:22px 0 12px 0;font-size:1.6rem}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.thumb{width:100%;padding-top:62%;background-size:cover;background-position:center}
.card-body{padding:12px}
.card-title{margin:0 0 6px 0;font-size:1.05rem}
.card-text{margin:0;color:var(--muted);font-size:.95rem;line-height:1.35}

.article .hero{width:100%;border-radius:12px;border:1px solid var(--border);margin:10px 0 18px}
.lead{color:var(--muted)}
.md{white-space:pre-wrap;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;padding:12px}

.form{display:grid;gap:12px;max-width:920px}
.form label{display:grid;gap:6px}
.form input{background:#0a0f15;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px}
.form input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.form textarea,.form select{background:#0a0f15;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;font-family:inherit}
.form textarea:focus,.form select:focus{outline:2px solid var(--blue);border-color:var(--blue)}

.form-section{border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin:0;display:grid;gap:12px}
.form-section legend{font-weight:600;padding:0 8px;color:var(--text);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}

.slug-row{display:flex;align-items:center;gap:10px;font-size:.9rem}
.slug-preview{color:var(--muted)}
.slug-preview code{color:var(--text);font-size:.85rem}
.btn-link{background:none;border:none;color:var(--blue);cursor:pointer;font-size:.85rem;padding:0;text-decoration:underline}
.btn-link:hover{color:var(--blue-2)}

.image-preview{max-height:120px;border-radius:8px;margin-top:8px;border:1px solid var(--border)}

.ingredient-row{display:grid;grid-template-columns:80px 110px 1fr 36px;gap:8px;align-items:center;margin-bottom:8px}
.ingredient-row input,.ingredient-row select{background:#0a0f15;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;font-size:.9rem}
.ingredient-row input:focus,.ingredient-row select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.btn-remove{background:transparent;border:1px solid rgba(239,68,68,.3);color:#fca5a5;border-radius:8px;cursor:pointer;font-size:1.1rem;padding:8px;line-height:1}
.btn-remove:hover{background:rgba(239,68,68,.12)}

.footer{margin:30px 0;color:var(--muted);font-size:.9rem;border-top:1px solid var(--border);padding-top:16px}

.servings-controls{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.ingredients h2{margin-top:16px}
.ingredients ul{list-style:disc;padding-left:18px}

.tools-title{margin-bottom:4px}
.tools-title::before{
  content:'';display:block;width:40px;height:4px;
  background:var(--blue);border-radius:2px;margin-bottom:12px;
}
.tools-subtitle{
  color:var(--muted);font-size:1rem;margin:0 0 28px;
}

/* On the tools page, widen the main .container past its default 1100px
   cap so three tool cards can sit side-by-side on a normal desktop. */
main.container:has(> .tools-page){
  max-width:none;
  padding:0;
}

.tools-page{
  max-width:1580px;
  margin:0 auto;
  padding:0 clamp(16px, 3vw, 32px);
}

.tools-grid{
  /* Flex row layout: each card declares its own preferred width via
     flex-basis so wider tools (e.g. the hex converter) can take the
     room they need instead of being forced into equal-width columns. */
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  align-items:flex-start;
  margin-bottom:20px;
}

.tool-card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  position:relative;
  transition:opacity .15s ease, transform .15s ease;
  flex:0 1 400px;
  min-width:340px;
  max-width:100%;
}
.tool-card[data-tool-id="date-calc"]{flex-basis:440px}
.tool-card[data-tool-id="hex-conv"]{flex-basis:640px;min-width:620px}
.tool-card[data-tool-id="whois"]{flex-basis:380px}
.tool-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),#8b5cf6);
  z-index:1;
}
.tool-card.dragging{opacity:.4}
.tool-card.drag-over{outline:2px dashed var(--blue);outline-offset:-2px}
.tool-card-header{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-bottom:1px solid var(--border);
}
.tool-icon{font-size:1.4rem}
.tool-card-title{margin:0;font-size:1.15rem;font-weight:700;flex:1}
.tool-card-body{padding:24px 22px}

.tool-drag-handle{
  cursor:grab;
  color:var(--muted);
  padding:4px 10px;
  border-radius:6px;
  user-select:none;
  font-size:1.1rem;
  line-height:1;
  transition:color .15s ease, background .15s ease;
}
.tool-drag-handle:hover{color:var(--text);background:rgba(255,255,255,.06)}
.tool-drag-handle:active{cursor:grabbing}

.date-calc{display:grid;gap:18px;margin-top:14px}
.date-calc-row{display:grid;gap:8px}
.date-calc-row > label{font-weight:600;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.date-calc-input-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.date-calc-input-group input[type="date"]{background:#0a0f15;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;font-size:1rem;color-scheme:dark}
.date-calc-input-group input[type="date"]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.date-calc-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.date-calc-field{display:grid;gap:6px}
.date-calc-field span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.date-calc-field input{background:#0a0f15;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;font-size:1rem;width:100%}
.date-calc-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.date-calc-result{background:#0a0f15;border:1px solid var(--border);border-radius:10px;padding:14px;font-size:1.15rem;font-weight:600}
.muted-note{margin:4px 0 0;color:var(--muted);font-size:.85rem}

.converter-grid{
  display:grid;
  /* Each input column is at least 250px so the default 20-char
     <input> stays fully visible even when the card is at its
     min width. */
  grid-template-columns:minmax(250px, 1fr) auto minmax(250px, 1fr);
  gap:16px;align-items:end;
  margin-bottom:22px;
}
.converter-field{display:block;min-width:0}
.converter-label{
  display:block;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:8px;
  font-weight:600;
}
.converter-input-wrap{
  display:flex;align-items:center;
  background:#0a0f15;border:1px solid var(--border);
  border-radius:10px;padding:0 12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.converter-input-wrap:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
.converter-prefix{
  color:var(--muted);font-family:'JetBrains Mono',Menlo,Consolas,monospace;
  font-size:1rem;padding-right:6px;border-right:1px solid var(--border);
  margin-right:10px;
}
.converter-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:'JetBrains Mono',Menlo,Consolas,monospace;
  font-size:1.15rem;padding:14px 0;letter-spacing:.5px;
  width:100%;
  min-width:0;
}
.converter-arrows{
  font-size:1.6rem;color:var(--blue);
  padding-bottom:14px;text-align:center;
  user-select:none;
}

.converter-extras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin-top:8px;
  padding-top:18px;border-top:1px solid var(--border);
}
.converter-extra{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;
}
.converter-extra-label{
  display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:4px;
  font-weight:600;
}
.converter-extra-value{
  display:block;font-family:'JetBrains Mono',Menlo,Consolas,monospace;
  font-size:.95rem;color:var(--text);
  word-break:break-all;
}
.converter-error{
  margin:14px 0 0;padding:10px 14px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);
  border-radius:8px;color:#fca5a5;font-size:.88rem;
}

.whois-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.whois-input{
  flex:1;min-width:180px;
  background:#0a0f15;border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:10px;font-size:1rem;
  font-family:'JetBrains Mono',Menlo,Consolas,monospace;
}
.whois-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.whois-result{
  margin-top:16px;
  background:#0a0f15;border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;
  font-family:'JetBrains Mono',Menlo,Consolas,monospace;
  font-size:.92rem;
}
.whois-field{display:flex;gap:12px;padding:3px 0;align-items:flex-start}
.whois-field + .whois-field{border-top:1px dashed rgba(255,255,255,.04)}
.whois-key{color:var(--muted);min-width:90px;font-weight:600;flex-shrink:0}
.whois-val{color:var(--text);word-break:break-word;flex:1}
.whois-error{
  margin:14px 0 0;padding:10px 14px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);
  border-radius:8px;color:#fca5a5;font-size:.88rem;
}

/* ─── Landing Page ─── */

.hero-banner{
  text-align:center;padding:48px 16px 32px;
  border-bottom:1px solid var(--border);margin-bottom:32px;
}
.hero-heading{
  font-size:2.6rem;font-weight:800;letter-spacing:-.03em;
  margin:0 0 8px;
}
.hero-heading::after{
  content:'';display:block;width:48px;height:4px;
  background:var(--blue);border-radius:2px;
  margin:14px auto 0;
}
.hero-subtitle{
  color:var(--muted);font-size:1.15rem;margin:12px 0 0;
}

.widget-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin-bottom:40px;
}
.widget{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 24px;
  display:flex;align-items:center;gap:18px;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
a.widget{cursor:pointer}
a.widget:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  border-color:var(--blue);
}
.widget-placeholder{opacity:.45}
.widget-icon{font-size:2rem;flex-shrink:0;width:48px;text-align:center}
.widget-info{flex:1;min-width:0}
.widget-title{margin:0 0 4px;font-size:1.1rem;font-weight:700}
.widget-desc{margin:0;color:var(--muted);font-size:.9rem;line-height:1.35}
.widget-arrow{
  font-size:1.8rem;font-weight:300;color:var(--muted);
  opacity:.5;transition:opacity .12s ease;
}
a.widget:hover .widget-arrow{opacity:1;color:var(--blue)}

/* ─── Reddit Container ─── */

.reddit-container{
  /* Full-bleed: break out of the 1100px .container and stretch to the viewport */
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  margin-top:40px;margin-bottom:40px;
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.reddit-container::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#ff4500,#ff8717);
  z-index:1;
}
.reddit-container-header{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:18px 22px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-bottom:1px solid var(--border);
}
.reddit-container-icon{font-size:1.4rem}
.reddit-container-title{margin:0;font-size:1.25rem;font-weight:700}
.reddit-container-hint{
  margin-left:auto;color:var(--muted);font-size:.82rem;font-style:italic;
}
.reddit-container-body{padding:24px clamp(22px, 4vw, 56px)}

.reddit-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}

.reddit-widget{
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:opacity .15s ease,transform .15s ease,border-color .15s ease;
}
.reddit-widget.dragging{opacity:.4}
.reddit-widget.drag-over{outline:2px dashed var(--blue);outline-offset:-2px}

.reddit-widget-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.reddit-sub-name{
  flex:1;
  font-weight:700;font-size:1rem;color:var(--blue);
  letter-spacing:.2px;
}
.reddit-sub-name:hover{text-decoration:underline}
.reddit-drag-handle{
  cursor:grab;
  color:var(--muted);
  padding:4px 8px;
  border-radius:6px;
  user-select:none;
  font-size:1rem;
  line-height:1;
  transition:color .15s ease,background .15s ease;
}
.reddit-drag-handle:hover{color:var(--text);background:rgba(255,255,255,.08)}
.reddit-drag-handle:active{cursor:grabbing}

.reddit-posts{
  list-style:none;margin:0;padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.reddit-post{
  padding:12px 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.reddit-post:hover{
  background:rgba(59,130,246,.06);
  border-color:rgba(59,130,246,.4);
  transform:translateY(-1px);
}
.reddit-post-title{
  display:block;font-size:.95rem;line-height:1.4;
  margin-bottom:8px;color:var(--text);font-weight:500;
}
.reddit-post-title:hover{color:var(--blue)}
.reddit-post-meta{
  display:flex;gap:14px;font-size:.78rem;color:var(--muted);
  align-items:center;
}
.reddit-meta-item{display:inline-flex;align-items:center;gap:4px}
.reddit-meta-author{
  margin-left:auto;font-style:italic;
  background:transparent;padding:0;
}
.reddit-error{
  padding:24px;color:var(--muted);font-size:.9rem;
  font-style:italic;margin:0;text-align:center;
}

/* ─── Admin Tables ─── */

.table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  font-size:.95rem;
}
.table th{
  text-align:left;
  padding:10px 12px;
  color:var(--muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:2px solid var(--border);
}
.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.table tbody tr:hover{
  background:rgba(59,130,246,.04);
}
.table .actions{
  white-space:nowrap;
  text-align:right;
}

/* ─── Badges ─── */

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.03em;
  vertical-align:middle;
}
.badge-green{
  background:rgba(34,197,94,.12);
  color:#4ade80;
  border:1px solid rgba(34,197,94,.25);
}
.badge-blue{
  background:rgba(59,130,246,.12);
  color:var(--blue);
  border:1px solid rgba(59,130,246,.25);
}
.badge-muted{
  background:rgba(159,176,199,.08);
  color:var(--muted);
  border:1px solid rgba(159,176,199,.15);
}
.badge-red{
  background:rgba(239,68,68,.12);
  color:#fca5a5;
  border:1px solid rgba(239,68,68,.25);
}

/* ─── Flash Messages ─── */

.flash-messages{
  margin:12px 0;
  display:grid;
  gap:8px;
}
.flash{
  padding:10px 16px;
  border-radius:10px;
  font-size:.9rem;
  font-weight:500;
}
.flash-success{
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.3);
  color:#4ade80;
}
.flash-error{
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.3);
  color:#fca5a5;
}

/* ─── Form Enhancements ─── */

.perm-fieldset{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
  margin:0;
}
.perm-fieldset legend{
  font-weight:600;
  padding:0 8px;
  color:var(--text);
}
.checkbox-label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  cursor:pointer;
}
.checkbox-label input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--blue);
  cursor:pointer;
  flex-shrink:0;
}
.checkbox-label + .checkbox-label{
  border-top:1px solid rgba(255,255,255,.04);
}
.text-muted{color:var(--muted);font-size:.85rem}
.divider{
  border:none;
  border-top:1px solid var(--border);
  margin:28px 0 20px;
}

/* ─── Responsive ─── */

@media(max-width:900px){
  /* On narrow viewports the hex card's 620px min-width would overflow,
     so relax it and stack the converter vertically. */
  .tool-card,
  .tool-card[data-tool-id="hex-conv"]{
    min-width:0;
    flex-basis:100%;
  }
  .converter-grid{grid-template-columns:1fr;gap:10px}
  .converter-arrows{transform:rotate(90deg);padding:0}
}

@media(max-width:768px){
  .hero-heading{font-size:1.8rem}
  .widget-grid{grid-template-columns:1fr}
  .reddit-grid{grid-template-columns:1fr}
}