/* Hearth admin — earth-tone dashboard, matches the app's palette. */
[data-theme="clay"]{
  --bg:#f4ecdd; --surface:#fffaf1; --surface-2:#f6e9d6; --sidebar:#2c1f15;
  --sidebar-2:#3a2a1c; --sidebar-ink:#f0e2cf; --text:#3a2a1c; --text-soft:#7a6450;
  --border:#e6d6bf; --accent:#b5713f; --accent-2:#d99b5b; --accent-ink:#fff7ec;
  --glow:#f3a23b; --danger:#b23b2e;
  --radius:16px; --radius-sm:10px; --shadow:0 10px 30px -14px rgba(60,40,20,.35);
  --font:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ui:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ui); line-height:1.55; }
h1,h2,h3{ font-family:var(--font); line-height:1.2; margin:0 0 .4em; }
a{ color:var(--accent); }
code{ background:var(--surface-2); padding:.1em .4em; border-radius:6px; font-size:.92em; }

/* ---- login ---- */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:2rem; width:min(400px,100%); box-shadow:var(--shadow); text-align:center; }
.login-flame{ font-size:2.4rem; }
.login-card h1{ font-size:1.6rem; margin:.2rem 0 0; }
.login-card label{ display:block; text-align:left; margin-top:1rem; font-size:.85rem; color:var(--text-soft); font-weight:600; }
.login-card input{ width:100%; margin-top:.3rem; }
.login-card .btn{ width:100%; margin-top:1.4rem; }
.form-error{ background:#fbe9e6; color:var(--danger); border:1px solid #f0c4bd; border-radius:10px; padding:.6rem .8rem; font-size:.9rem; margin-top:1rem; }

/* ---- inputs/buttons ---- */
input,textarea,select{ font-family:var(--ui); font-size:1rem; padding:.7rem .8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); width:100%; }
input:focus,textarea:focus{ outline:3px solid var(--accent); outline-offset:1px; }
.btn{ display:inline-flex; align-items:center; gap:.4rem; border:0; border-radius:999px; padding:.7rem 1.2rem; font-weight:600; font-size:.95rem; cursor:pointer; background:var(--surface-2); color:var(--text); text-decoration:none; }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); }
.btn-sm{ padding:.4rem .8rem; font-size:.82rem; }
.btn-danger{ background:#f6e0dc; color:var(--danger); }
.btn:hover{ filter:brightness(1.04); }

/* ---- shell ---- */
.shell{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.sidebar{ background:var(--sidebar); color:var(--sidebar-ink); padding:1.2rem 1rem; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar .brand{ font-family:var(--font); font-size:1.4rem; display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem 1rem; }
.brand-flame{ width:14px; height:18px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:radial-gradient(circle at 50% 70%,var(--glow),var(--accent)); box-shadow:0 0 14px -2px var(--glow); display:inline-block; }
.sidebar nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar nav a, .logout{ display:flex; align-items:center; gap:.7rem; padding:.65rem .7rem; border-radius:10px; color:var(--sidebar-ink); text-decoration:none; font-size:.95rem; opacity:.85; }
.sidebar nav a:hover, .logout:hover{ background:var(--sidebar-2); opacity:1; }
.sidebar nav a.active{ background:var(--accent); color:var(--accent-ink); opacity:1; font-weight:600; }
.mi{ width:20px; height:20px; display:inline-grid; place-items:center; }
.mi svg{ width:20px; height:20px; }
.side-foot{ margin-top:auto; border-top:1px solid var(--sidebar-2); padding-top:.6rem; }

.content{ padding:1.6rem clamp(16px,3vw,40px) 3rem; max-width:1100px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.topbar h1{ font-size:1.7rem; margin:0; }
.who{ color:var(--text-soft); font-size:.9rem; }
.banner{ background:#fff4e0; border:1px solid #f0d9ad; border-radius:12px; padding:.7rem 1rem; margin-bottom:1rem; font-size:.92rem; }
.flash{ background:#e8f3e2; border:1px solid #cbe4bd; border-radius:12px; padding:.7rem 1rem; margin-bottom:1rem; font-size:.92rem; }
.adminfoot{ margin-top:2rem; color:var(--text-soft); font-size:.82rem; text-align:center; }

/* ---- cards/tables ---- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.4rem; box-shadow:var(--shadow); margin-bottom:1.2rem; }
.card h2{ font-size:1.25rem; }
.muted{ color:var(--text-soft); }
.stack{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.stack label{ width:100%; font-size:.85rem; color:var(--text-soft); font-weight:600; }
.stack input{ margin-top:.3rem; }
.inline{ display:inline; }
.tbl{ width:100%; border-collapse:collapse; margin-top:.6rem; }
.tbl th,.tbl td{ text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--border); font-size:.92rem; vertical-align:middle; }
.tbl th{ font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-soft); }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-bottom:1.2rem; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow); }
.stat b{ display:block; font-family:var(--font); font-size:1.9rem; color:var(--accent); }
.stat span{ font-size:.82rem; color:var(--text-soft); }
.privacy-note{ background:linear-gradient(135deg,var(--surface),var(--surface-2)); }

/* ---- themes preview ---- */
.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-top:1rem; }
.theme-card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.theme-card h3{ margin:.6rem .8rem .2rem; font-size:1.05rem; }
.theme-card p{ margin:0 .8rem .8rem; font-size:.84rem; }
.theme-bar{ height:60px; }
.sw-clay{ background:linear-gradient(135deg,#b5713f,#d99b5b,#f4ecdd); }
.sw-sage{ background:linear-gradient(135deg,#6f7f53,#92a06e,#eef0e6); }
.sw-loam{ background:linear-gradient(135deg,#8a5a3b,#b07f54,#efe7df); }
.sw-dune{ background:linear-gradient(135deg,#c08a2d,#d9ad5b,#f3eddf); }
.sw-moss{ background:linear-gradient(135deg,#4f6b50,#728a6f,#e9ece8); }

/* ---- media ---- */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:1rem; }
.media-tile{ margin:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg); }
.media-tile img{ width:100%; height:130px; object-fit:cover; display:block; }
.media-tile figcaption{ padding:.5rem .6rem; font-size:.8rem; }
.media-tile figcaption span{ display:block; color:var(--text-soft); font-size:.72rem; margin-top:.2rem; }
.tile-del{ padding:0 .6rem .6rem; }

/* ---- guides ---- */
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:1rem; }
.guide-card{ display:flex; flex-direction:column; gap:.3rem; padding:1.1rem; border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:var(--text); background:var(--bg); position:relative; }
.guide-card:hover{ box-shadow:var(--shadow); }
.guide-card b{ font-family:var(--font); font-size:1.1rem; }
.guide-num{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; }
.guide-go{ color:var(--accent); font-size:.85rem; font-weight:600; margin-top:.3rem; }
.guide .lead{ font-size:1.05rem; }
.guide h3{ margin-top:1.4rem; color:var(--accent); font-size:1.05rem; }
.guide ol,.guide ul{ padding-left:1.2rem; }
.guide li{ margin:.35rem 0; }
.back-link{ display:inline-block; margin-bottom:.8rem; color:var(--text-soft); text-decoration:none; }

/* ---- responsive: sidebar to top on small screens ---- */
@media (max-width:820px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px; }
  .sidebar .brand{ width:100%; padding-bottom:.4rem; }
  .sidebar nav{ flex-direction:row; flex-wrap:wrap; }
  .sidebar nav a span:last-child, .logout span:last-child{ display:none; }
  .side-foot{ margin:0; border:0; padding:0; }
}
@media (min-width:2000px){ .content{ max-width:1500px; } body{ font-size:18px; } }

/* ============ DATA & HOSTING guide page ============ */
.dh-svg{ width:100%; height:auto; display:block; max-width:720px; margin:.4rem auto 1rem; }
.dh-card-bg{ fill:var(--surface-2); stroke:var(--border); stroke-width:2; }
.dh-tag{ font:700 16px var(--ui); fill:var(--accent); }
.dh-label{ font:600 17px var(--ui); fill:var(--text); }
.dh-sub{ font:400 13px var(--ui); fill:var(--text-soft); }
.dh-icon{ width:48px; height:48px; display:block; margin-bottom:.4rem; }
.wire{ fill:none; stroke:var(--border); stroke-width:3; }
.wire-flow{ fill:none; stroke:var(--accent); stroke-width:3; stroke-dasharray:5 15; stroke-linecap:round; animation:dhflow 1.1s linear infinite; }
@keyframes dhflow{ to{ stroke-dashoffset:-40; } }
.dh-glow{ animation:dhpulse 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes dhpulse{ 0%,100%{ opacity:.45; transform:scale(1);} 50%{ opacity:.7; transform:scale(1.05);} }
.dh-float{ animation:dhfloat 4.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes dhfloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.dh-dash{ fill:none; stroke:var(--accent-2); stroke-width:2.5; stroke-dasharray:4 8; stroke-linecap:round; animation:dhflow 1.4s linear infinite; }
@media (prefers-reduced-motion:reduce){ .wire-flow,.dh-glow,.dh-float,.dh-dash{ animation:none !important; } }

.dh-legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:.6rem; }
.dh-legend span{ background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:.35rem .9rem; font-size:.9rem; }
.dh-legend b{ color:var(--accent); }

.dh-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:1.1rem; }
.dh-platform{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.1rem; }
.dh-platform b{ display:block; margin:.3rem 0; }
.dh-platform p{ margin:0; font-size:.9rem; color:var(--text-soft); }
.dh-ptag{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 .4rem; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-weight:700; }
.dh-server{ background:linear-gradient(135deg,var(--surface),var(--surface-2)); border-color:var(--accent); }
.dh-server .dh-ptag{ font-size:1.1rem; }

.dh-compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.1rem 0; }
.dh-col{ position:relative; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; }
.dh-col h3{ font-size:1.15rem; margin:.2rem 0 .5rem; }
.dh-col ul{ padding-left:1.1rem; margin:0; }
.dh-col li{ margin:.45rem 0; font-size:.92rem; }
.dh-rec{ border:2px solid var(--accent); box-shadow:var(--shadow); }
.dh-badge{ position:absolute; top:-12px; left:1.2rem; background:var(--accent); color:var(--accent-ink); font-size:.74rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; }
@media (max-width:680px){ .dh-compare{ grid-template-columns:1fr; } }

.dh-note{ background:#fff4e0; border:1px solid #f0d9ad; border-left:4px solid var(--accent); border-radius:12px; padding:.9rem 1.1rem; margin-top:1.1rem; font-size:.93rem; line-height:1.6; }
.dh-note-info{ background:#e8f3e2; border-color:#cbe4bd; border-left-color:#5a8f3c; }

.dh-steps{ list-style:none; padding:0; margin:.4rem 0 1rem; counter-reset:dh; }
.dh-steps > li{ display:flex; gap:14px; align-items:flex-start; padding:.9rem 0; border-top:1px solid var(--border); }
.dh-steps > li:first-child{ border-top:0; }
.dh-num{ flex:0 0 auto; min-width:40px; height:40px; padding:0 .5rem; border-radius:12px; background:var(--accent); color:var(--accent-ink); font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.dh-steps a{ color:var(--accent); font-weight:600; }

.dh-check{ list-style:none; padding:0; margin:.6rem 0 0; }
.dh-check li{ position:relative; padding:.45rem 0 .45rem 30px; font-size:.95rem; }
.dh-check li::before{ content:"✓"; position:absolute; left:0; top:.45rem; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.dh-closing{ font-size:1.02rem; margin-top:1.2rem; }