/*
  ZiipSite Frontend — Sleek UI (GoDaddy x tiiny.host vibe)
  - No build tools
  - Responsive + accessible
  - Fixes “narrow words” with sane typographic widths
*/

:root{
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface2: #f0f2f7;
  --text: #0b1020;
  --muted: rgba(11,16,32,.70);
  --line: rgba(11,16,32,.10);
  --shadow: 0 16px 50px rgba(11,16,32,.10);
  --shadow2: 0 10px 30px rgba(11,16,32,.08);
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;
  --brand: #ff6a00;
  --brand2: #ffb000;
  --ok: #0bb97a;
  --bad: #e12d4f;
}

html.dark{
  --bg: #070a12;
  --surface: #0d1222;
  --surface2: #0b0f1a;
  --text: #eef2ff;
  --muted: rgba(238,242,255,.72);
  --line: rgba(238,242,255,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 12px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255,106,0,.10), transparent 58%),
    radial-gradient(800px 520px at 95% 10%, rgba(255,176,0,.10), transparent 58%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
}

a{color:inherit}
img{max-width:100%;height:auto}

/* Better word wrapping (fixes “narrow words” / awkward breaks) */
h1,h2,h3,h4,p,li{overflow-wrap: normal; word-break: normal; hyphens:auto}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{max-width:var(--max);margin:0 auto;padding:24px}
@media (max-width: 640px){.container{padding:16px}}

/* ---- Top nav ---- */
.topbar{
  position:sticky; top:0; z-index:60;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  width:36px;height:36px;border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow: var(--shadow2);
  display:grid;place-items:center;
}
.brand-mark svg{width:18px;height:18px}
.brand-name{font-weight:950;letter-spacing:-.02em}
.badge{
  font-size:12px;font-weight:800;
  border:1px solid var(--line);
  padding:3px 10px;border-radius:999px;
  color:var(--muted);
}

.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  font-weight:750;
  color:color-mix(in srgb, var(--text) 90%, transparent);
  opacity:.92;
}
.nav-links a:hover{background:color-mix(in srgb, var(--text) 7%, transparent)}
.nav-links a.active{background:color-mix(in srgb, var(--text) 9%, transparent); border:1px solid var(--line)}

.nav-actions{display:flex;align-items:center;gap:10px}

.icon-btn{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}

.nav-toggle{display:none}

/* ---- Buttons / cards ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  color:var(--text);
  text-decoration:none;
  font-weight:850;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px); box-shadow: var(--shadow2)}
.btn:active{transform:translateY(0)}
.btn-primary{border:none;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#111}
.btn-ghost{background:transparent}
.btn-danger{border:none;background:linear-gradient(135deg,#ff4d6d,#ff7aa2);color:#111}
.btn-full{width:100%}

.card{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.card-pad{padding:18px}
@media (max-width: 640px){.card-pad{padding:16px}}

.muted{color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:16px 0}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 84%, transparent);
  padding:7px 12px;border-radius:999px;
  font-size:13px;color:var(--muted);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot.ok{background:var(--ok)}
.dot.bad{background:var(--bad)}

.notice{
  padding:12px 12px;border-radius:16px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface2) 70%, transparent);
  color:var(--muted);
}
.notice.ok{border-color:color-mix(in srgb, var(--ok) 45%, var(--line)); color:color-mix(in srgb, var(--ok) 85%, var(--text))}
.notice.bad{border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); color:color-mix(in srgb, var(--bad) 85%, var(--text))}

/* ---- Typography ---- */
.h1{font-size:clamp(30px, 4vw, 52px); line-height:1.05; margin:0; letter-spacing:-.04em; font-weight:980}
.h2{font-size:clamp(18px, 2vw, 22px); margin:0; letter-spacing:-.02em; font-weight:950}
.lead{font-size:16px; color:var(--muted); margin:10px 0 0; max-width:70ch}
.prose{max-width:74ch}

/* ---- Layout helpers ---- */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row > *{flex:1 1 240px}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width: 960px){.grid2{grid-template-columns:1fr}}
@media (max-width: 920px){.grid3{grid-template-columns:1fr}}

/* ---- Home hero ---- */
.hero{padding:46px 0 14px}
.hero-card{
  border-radius: calc(var(--radius2) + 4px);
  background:
    radial-gradient(720px 380px at 10% 0%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(720px 380px at 95% 10%, rgba(255,176,0,.16), transparent 60%),
    color-mix(in srgb, var(--surface) 92%, transparent);
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-actions .btn{flex:0 0 auto}

.shot{
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface2) 70%, transparent));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.shot-head{padding:14px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.shot-body{padding:14px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-size:18px}

/* ---- Forms ---- */
.form{display:grid;gap:10px}
label{font-weight:800;font-size:13px;color:var(--muted)}
.input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  color:var(--text);
  outline:none;
}
textarea{min-height:130px;resize:vertical}

.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:18px}
.table th,.table td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table tr:last-child td{border-bottom:none}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.12em;background:color-mix(in srgb, var(--text) 6%, transparent);color:color-mix(in srgb, var(--text) 82%, transparent)}

/* ---- Footer ---- */
.footer{padding:28px 0;border-top:1px solid var(--line);margin-top:34px;color:var(--muted)}
.footer a{opacity:.92}

/* ---- Mobile drawer ---- */
.nav-backdrop, .nav-drawer{display:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:80}
.nav-drawer{position:fixed;inset:0;z-index:90}
.drawer-panel{
  position:absolute; right:0; top:0; height:100%;
  width:min(420px, 92vw);
  background:color-mix(in srgb, var(--bg) 86%, black);
  border-left:1px solid var(--line);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  transform:translateX(105%);
  transition:transform .22s ease;
  display:flex;flex-direction:column;
}
.drawer-head{padding:16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer-links{padding:14px 16px;display:grid;gap:10px}
.drawer-links a{padding:12px 12px;border-radius:16px;text-decoration:none;background:color-mix(in srgb, var(--surface) 10%, transparent);border:1px solid color-mix(in srgb, var(--line) 60%, transparent);font-weight:850}
.drawer-links a.active{background:color-mix(in srgb, var(--text) 10%, transparent);border-color:color-mix(in srgb, var(--line) 90%, transparent)}

body.nav-open{overflow:hidden}
body.nav-open .nav-backdrop{display:block}
body.nav-open .nav-drawer{display:block}
body.nav-open .drawer-panel{transform:translateX(0)}

@media (max-width: 960px){
  .nav-links{display:none}
  .nav-actions{display:none}
  .nav-toggle{display:inline-flex}
}

/* Small utility */
.loading{display:inline-flex;align-items:center;gap:10px}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb, var(--text) 18%, transparent);border-top-color:color-mix(in srgb, var(--text) 70%, transparent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

kbd{border:1px solid color-mix(in srgb, var(--text) 18%, transparent);border-bottom-color:color-mix(in srgb, var(--text) 10%, transparent);padding:2px 6px;border-radius:8px;font-size:12px;background:color-mix(in srgb, var(--surface2) 70%, transparent)}

/* Modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}
.modal-content{position:relative;z-index:1;max-height:90vh;overflow-y:auto}
.dropzone-active{border-color:var(--primary) !important;background:color-mix(in srgb, var(--primary) 8%, transparent) !important}