/* Websites4Schools - admin, auth and landing styles */
:root { --w-brand:#0f3d38; --w-brand-2:#145a52; --w-accent:#ffc20e; --w-ink:#1d2321; --w-muted:#5f6765; --w-line:#e4e9e7; --w-bg:#f4f6f5; }
body { font-family:Nunito, system-ui, sans-serif; color:var(--w-ink); }
.fw-black { font-weight:900; }
.btn { font-weight:700; border-radius:10px; }
.btn-brand { background:var(--w-brand); border-color:var(--w-brand); color:#fff; }
.btn-brand:hover,.btn-brand:focus,.btn-brand:disabled { background:var(--w-brand-2); border-color:var(--w-brand-2); color:#fff; }
.btn-accent { background:var(--w-accent); border-color:var(--w-accent); color:#1d1d1d; }
.btn-accent:hover { filter:brightness(.96); }
.hp { position:absolute; left:-9999px; height:1px; overflow:hidden; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; background:var(--w-accent); color:#111; font-weight:900; border-radius:10px; padding:4px 8px; font-size:14px; margin-right:6px; }

/* Auth */
.auth-body { background:linear-gradient(160deg,#eaf3f1,#f8faf9 50%); min-height:100vh; }
.auth-wrap { max-width:440px; margin:0 auto; padding:40px 16px; }
.auth-wrap.wide { max-width:640px; }
.auth-brand { display:inline-flex; align-items:center; font-weight:900; font-size:20px; color:var(--w-brand); text-decoration:none; margin-bottom:20px; }
.auth-card { background:#fff; border-radius:20px; padding:32px; box-shadow:0 20px 60px rgba(15,61,56,.08); }

/* Landing */
.landing { background:#f7f9f8; }
.landing-shot { background:#fff; border-radius:20px; box-shadow:0 30px 80px rgba(15,61,56,.15); overflow:hidden; }
.ls-bar { background:#0f1f1d; padding:10px 14px; display:flex; gap:6px; }
.ls-bar span { width:10px; height:10px; border-radius:50%; background:#3b4c49; }
.ls-body { padding:22px; }
.ls-row { background:linear-gradient(135deg,var(--w-brand),var(--w-brand-2)); color:#fff; border-radius:14px; padding:18px; }
.ls-input { background:#fff; color:#333; border-radius:10px; padding:10px 12px; margin-top:10px; font-size:14px; }
.ls-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.ls-grid div { border:1px solid var(--w-line); border-radius:12px; padding:12px; }
.ls-grid small { display:block; color:var(--w-muted); font-weight:700; }
.ls-grid strong { font-size:26px; font-weight:900; }
.feature { padding:10px; }
.feature i { font-size:28px; color:var(--w-brand); background:#e6f1ef; width:56px; height:56px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; }

/* Admin shell */
.admin-body { background:var(--w-bg); }
.admin-shell { display:flex; min-height:100vh; }
.admin-side { width:260px; flex-shrink:0; background:#0f1f1d; color:#a9bcb8; display:flex; flex-direction:column; padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.side-school { display:flex; gap:10px; align-items:center; text-decoration:none; color:#fff; padding:4px 6px; }
.side-school img { width:42px; height:42px; object-fit:contain; background:#fff; border-radius:10px; padding:3px; }
.side-initial { width:42px; height:42px; border-radius:10px; background:var(--w-accent); color:#111; font-weight:900; display:flex; align-items:center; justify-content:center; font-size:18px; }
.side-school b { display:block; font-size:14px; line-height:1.2; }
.side-school small { font-size:11px; color:#8fa5a1; }
.side-switch { background:#1b2d2a; color:#fff; border-color:#2c403c; }
.side-view { background:var(--w-accent); color:#111; margin:14px 6px 8px; }
.side-nav a { display:flex; align-items:center; gap:10px; color:#d2dfdc; text-decoration:none; padding:9px 12px; border-radius:10px; font-weight:700; font-size:14.5px; }
.side-nav a:hover,.side-nav a.on { background:rgba(255,255,255,.08); color:#fff; }
.side-nav a.setup-link { background:rgba(255,194,14,.15); color:var(--w-accent); }
.side-nav .count { margin-left:auto; background:#e5484d; color:#fff; font-size:11px; border-radius:999px; padding:1px 8px; }
.side-foot { margin-top:auto; padding:14px 8px 0; border-top:1px solid #23332f; display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.side-foot .btn-link { color:#a9bcb8; }
.admin-main { flex:1; min-width:0; padding:28px 32px 80px; }
.admin-topbar { display:flex; gap:10px; align-items:center; margin-bottom:16px; }
@media (max-width:991px) {
  .admin-side { position:fixed; left:-280px; z-index:1050; transition:left .2s; }
  .admin-side.open { left:0; box-shadow:0 0 60px rgba(0,0,0,.4); }
  .admin-main { padding:16px 14px 80px; }
}
.page-title { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.page-title h1 { font-size:1.7rem; font-weight:900; margin:0; }
.page-title p { margin:2px 0 0; color:var(--w-muted); }
.card-w { background:#fff; border:1px solid var(--w-line); border-radius:16px; padding:22px; }
.card-w h2 { font-size:1.05rem; font-weight:800; }
.stat { font-size:36px; font-weight:900; line-height:1; }
.stat-label { color:var(--w-muted); font-weight:700; font-size:13px; }
.ring { width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--w-brand) calc(var(--p)*1%), #e6ecea 0); flex-shrink:0; }
.ring span { width:94px; height:94px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:26px; }
.ai-box { background:linear-gradient(135deg,#0f3d38,#17675d); color:#fff; border-radius:18px; padding:22px; }
.ai-box .form-control { border:0; border-radius:12px; padding:14px 16px; font-size:16px; }
.ai-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ai-chips button { background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:999px; padding:4px 12px; font-size:13px; font-weight:600; }
.ai-proposal { background:#fff; color:var(--w-ink); border-radius:14px; padding:18px; margin-top:14px; }
.ai-proposal .prev { max-height:280px; overflow:auto; border:1px solid var(--w-line); border-radius:10px; padding:12px; }
.st { font-size:12px; font-weight:800; border-radius:999px; padding:3px 10px; white-space:nowrap; display:inline-block; }
.st.over,.st.missing { background:#fde8e8; color:#b42318; }
.st.soon,.st.warn,.st.nodate { background:#fff4d6; color:#8a6100; }
.st.ok { background:#e3f5ec; color:#16774a; }
.st.na,.st.draft { background:#eef0f2; color:#555; }
.st.published { background:#e3f5ec; color:#16774a; }
.list-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--w-line); border-radius:12px; background:#fff; margin-bottom:8px; }
.list-row .grow { flex:1; min-width:0; }
.list-row .t { font-weight:800; }
.list-row .m { font-size:13px; color:var(--w-muted); }
.handle { cursor:grab; color:#9aa5a2; }
.empty { text-align:center; padding:40px 20px; color:var(--w-muted); }
.empty i { font-size:40px; display:block; margin-bottom:8px; color:#b8c4c1; }
.drop { border:2px dashed #b9cbc7; border-radius:16px; padding:28px; text-align:center; background:#fbfdfc; cursor:pointer; transition:background .15s; }
.drop:hover,.drop.over { border-color:var(--w-brand); background:#eef6f4; }
.drop i { font-size:34px; color:var(--w-brand); }
.check-row { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--w-line); }
.check-row:last-child { border-bottom:0; }
.check-row > i { font-size:20px; margin-top:1px; }
.nav-pills .nav-link { font-weight:700; color:var(--w-ink); border-radius:10px; }
.nav-pills .nav-link.active { background:var(--w-brand); }

/* Setup wizard */
.wizard { max-width:980px; margin:0 auto; }
.wizard-steps { display:flex; gap:6px; list-style:none; padding:0; margin:0 0 20px; overflow-x:auto; }
.wizard-steps li { flex:1; min-width:120px; }
.wizard-steps a { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--w-muted); font-weight:700; font-size:14px; background:#fff; border:1px solid var(--w-line); }
.wizard-steps span { width:26px; height:26px; border-radius:50%; background:#e6ecea; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.wizard-steps li.on a { color:var(--w-ink); border-color:var(--w-brand); }
.wizard-steps li.on span { background:var(--w-brand); color:#fff; }
.wizard-steps li.done span { background:#16774a; color:#fff; }
.wiz-card { background:#fff; border-radius:20px; padding:32px; border:1px solid var(--w-line); }
.imp-log { list-style:none; padding:0; max-height:260px; overflow:auto; font-size:14px; }
.imp-log li { padding:4px 0; border-bottom:1px dashed var(--w-line); }
.found-chip { display:flex; align-items:center; gap:6px; border:1px solid var(--w-line); border-radius:999px; padding:6px 12px; font-weight:700; font-size:14px; }
.found-chip img { height:24px; }
.found-chip .dot { width:16px; height:16px; border-radius:50%; display:inline-block; }
.keep-head { margin:20px 0 8px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--w-brand); }
.keep-row { display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--w-line); border-radius:12px; margin-bottom:6px; }
.keep-row.off { opacity:.55; background:#fafbfb; }
.keep-row .keep-title { font-weight:700; border-color:transparent; padding-left:0; }
.keep-row .keep-title:focus { border-color:#ced4da; padding-left:.5rem; }
.keep-row .keep-sec { width:170px; flex-shrink:0; }
.min-w-0 { min-width:0; }
@media (max-width:767px) { .keep-row { flex-wrap:wrap; } .keep-row .keep-sec { width:100%; } }
.logo-box { border:1px solid var(--w-line); border-radius:14px; padding:18px; text-align:center; min-height:120px; display:flex; align-items:center; justify-content:center; background:#fff; }
.logo-box img { max-width:100%; max-height:110px; }
.swatch-btn { width:34px; height:34px; border-radius:10px; border:2px solid #fff; box-shadow:0 0 0 1px var(--w-line); }
.palette { width:100%; border:2px solid var(--w-line); background:#fff; border-radius:14px; padding:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.palette.on { border-color:var(--w-ink); }
.palette .pb { width:60%; height:44px; border-radius:8px; }
.palette .pa { width:calc(40% - 6px); height:44px; border-radius:8px; }
.palette small { width:100%; font-weight:700; text-align:left; }
.preview-strip { border-radius:14px; overflow:hidden; border:1px solid var(--w-line); }
.ps-nav { padding:10px 16px; font-weight:700; font-size:14px; }
.ps-hero { padding:28px 16px; color:#fff; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.ps-btn { padding:8px 16px; border-radius:10px; font-weight:800; font-size:14px; }
.theme-card { width:100%; border:2px solid var(--w-line); background:#fff; border-radius:16px; padding:12px; text-align:left; height:100%; }
.theme-card.on { border-color:var(--w-ink); box-shadow:0 0 0 3px rgba(15,61,56,.12); }
.theme-card b { display:block; margin-top:8px; }
.theme-card small { color:var(--w-muted); font-size:12.5px; }
.tc-art { display:block; height:74px; border-radius:10px; position:relative; overflow:hidden; background:#eef3f2; }
.tc-art i { position:absolute; display:block; }
.tc-classic i:nth-child(1) { inset:0 0 40% 0; background:var(--w-brand); }
.tc-classic i:nth-child(2) { left:10%; right:10%; bottom:10%; height:22%; background:#fff; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.tc-photo i:nth-child(1) { inset:0; background:linear-gradient(180deg,#7aa,#245); }
.tc-photo i:nth-child(2) { left:30%; right:30%; top:40%; height:14%; background:#fff; border-radius:4px; }
.tc-minimal i:nth-child(1) { left:8%; top:25%; width:38%; height:12%; background:#333; border-radius:3px; }
.tc-minimal i:nth-child(2) { right:8%; top:15%; width:40%; height:70%; background:#bcd; border-radius:10px; }
.tc-playful i:nth-child(1) { inset:0; background:var(--w-brand); }
.tc-playful i:nth-child(2) { right:10%; top:12%; width:44px; height:44px; border-radius:50%; border:4px solid var(--w-accent); background:#9cb; }
.tc-playful i:nth-child(3) { left:-14px; bottom:-14px; width:50px; height:50px; border-radius:50%; background:var(--w-accent); opacity:.6; }
.preview-frame { border:1px solid var(--w-line); border-radius:16px; overflow:hidden; background:#e9eeed; }
.pf-bar { display:flex; gap:6px; align-items:center; padding:8px 12px; background:#fff; border-bottom:1px solid var(--w-line); }
.pf-bar > span { width:10px; height:10px; border-radius:50%; background:#d5dcda; }
.pf-wrap { display:flex; justify-content:center; }
.pf-wrap iframe { width:100%; height:620px; border:0; background:#fff; transition:width .2s; }

/* Page editor */
.editor-wrap { max-width:900px; }
.blk { background:#fff; border:1px solid var(--w-line); border-radius:14px; margin-bottom:12px; }
.blk-head { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--w-line); font-weight:800; font-size:13px; color:var(--w-muted); }
.blk-head .ms-auto .btn { padding:2px 8px; }
.blk-body { padding:14px; }
.blk .ql-toolbar { border-radius:10px 10px 0 0; border-color:var(--w-line); }
.blk .ql-container { border-radius:0 0 10px 10px; border-color:var(--w-line); font-family:Nunito, sans-serif; font-size:16px; min-height:140px; }
.blk .ql-editor { min-height:140px; }
.add-blk { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.add-blk button { border:1px dashed #b9c6c3; background:#fff; border-radius:12px; padding:10px; text-align:left; font-weight:700; font-size:14px; }
.add-blk button:hover { border-color:var(--w-brand); background:#f2f8f6; }
.add-blk i { color:var(--w-brand); margin-right:4px; }
.img-thumb { width:100%; max-height:240px; object-fit:contain; border-radius:10px; background:#f3f5f4; }
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.gal-grid .g { position:relative; }
.gal-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.gal-grid button { position:absolute; top:4px; right:4px; }
.sticky-save { position:sticky; bottom:0; background:rgba(244,246,245,.95); backdrop-filter:blur(6px); padding:12px 0; border-top:1px solid var(--w-line); margin-top:20px; z-index:10; }
.ai-tools .dropdown-item { font-weight:600; }
.badge-ai { background:#efe6ff; color:#5b2bbd; font-weight:800; }

/* Page builder v2 */
.slug-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.slug-row #slugBase { max-width:50%; }
.slug-row #pSlug { width:auto; min-width:200px; flex:0 1 320px; font-family:ui-monospace,monospace; font-size:13px; }
.tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.tpl { border:2px solid var(--w-line); background:#fff; border-radius:14px; padding:14px; text-align:left; display:flex; flex-direction:column; gap:4px; }
.tpl:hover { border-color:var(--w-brand); background:#f4faf8; }
.tpl i { font-size:24px; color:var(--w-brand); }
.tpl small { color:var(--w-muted); font-size:12.5px; line-height:1.3; }
.pick-cat h6 { text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:900; color:var(--w-brand); margin:6px 0 10px; }
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:18px; }
.pick { border:1px solid var(--w-line); background:#fff; border-radius:14px; padding:14px; text-align:left; display:flex; flex-direction:column; gap:4px; transition:all .12s; }
.pick:hover { border-color:var(--w-brand); box-shadow:0 6px 18px rgba(15,61,56,.08); transform:translateY(-1px); }
.pick small { color:var(--w-muted); font-size:12.5px; line-height:1.3; }
.pick-ico { width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; background:#e6f1ef; color:var(--w-brand); margin-bottom:4px; }
.ins { display:flex; justify-content:center; height:14px; margin:-4px 0 4px; position:relative; z-index:2; }
.ins button { width:28px; height:28px; border-radius:50%; border:1px solid var(--w-line); background:#fff; color:var(--w-brand); opacity:0; transition:opacity .15s; margin-top:-7px; }
.ins:hover button, .ins button:focus { opacity:1; }
@media (hover:none) { .ins button { opacity:1; } }
.blk.collapsed .blk-body { display:none; }
.blk.collapsed .blk-head { border-bottom:0; }
.blk-sum { color:#8a9592; font-weight:600; margin-left:6px; }
.blk-toggle { font-weight:800; font-size:13px; color:var(--w-muted) !important; max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.img-empty { height:120px; border-radius:10px; background:#f1f4f3; display:flex; align-items:center; justify-content:center; color:#a9b6b3; font-size:34px; margin-bottom:8px; }
[data-list] .li { position:relative; border:1px solid var(--w-line); border-radius:12px; padding:10px 44px 10px 10px; margin-bottom:8px; background:#fbfcfc; }
[data-list] .li-del { position:absolute; top:8px; right:8px; }
.person-thumb { position:relative; width:64px; height:64px; border-radius:50%; background:#e6f1ef; color:var(--w-brand); display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden; flex-shrink:0; cursor:pointer; }
.person-thumb img { width:100%; height:100%; object-fit:cover; }
.person-thumb .stretched { position:absolute; inset:0; cursor:pointer; margin:0; }
.add-big { border-style:dashed; border-radius:14px; font-weight:800; }