/* DaVinciWeb platform UI */
:root{
  --p:#4f46e5;--p2:#7c3aed;--bg:#f6f7fb;--card:#fff;--fg:#171923;--muted:#6b7280;
  --line:#e5e7ef;--ok:#16a34a;--err:#dc2626;--warn:#d97706;--r:14px;
  --sh:0 1px 2px rgba(16,24,40,.05),0 8px 24px -10px rgba(16,24,40,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--fg);line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--p);text-decoration:none}
button{font:inherit;cursor:pointer}
.container{width:min(1120px,100% - 2rem);margin-inline:auto}
.narrow{max-width:760px}

/* topbar */
.topbar{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font-weight:800;font-size:1.2rem;color:var(--fg);letter-spacing:-.02em}
.brand span{background:linear-gradient(120deg,var(--p),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.topnav{display:flex;align-items:center;gap:1rem}
.topnav a{color:var(--muted);font-weight:600;font-size:.93rem}
.topnav a:hover{color:var(--fg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:none;border-radius:11px;padding:.55rem 1.15rem;font-weight:600;transition:.16s;font-size:.93rem;text-decoration:none}
.btn-p{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff!important;box-shadow:0 4px 14px -6px rgba(79,70,229,.6)}
.btn-p:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-p:disabled{opacity:.6;transform:none}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--fg)!important}
.btn-ghost:hover{border-color:var(--muted)}
.btn-danger{background:#fee2e2;color:#b91c1c!important;border:1px solid #fecaca}
.btn-lg{padding:.85rem 1.8rem;font-size:1.05rem;border-radius:13px}
.btn-block{width:100%}

/* cards & forms */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:1.4rem;margin-bottom:1.1rem}
.card h2{font-size:1.2rem;margin-bottom:1rem}
.card h3{font-size:1.02rem;margin-bottom:.8rem}
.card h4{margin:1.2rem 0 .6rem}
label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.9rem}
label small{color:var(--muted);font-weight:400}
input,textarea,select{width:100%;margin-top:.3rem;border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;font:inherit;background:#fff;color:var(--fg);transition:.14s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
input[type=color]{padding:.15rem;height:42px;cursor:pointer}
input[type=checkbox]{width:auto;margin:0;accent-color:var(--p)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}
.hint{color:var(--muted);font-size:.84rem}
.alert{padding:.7rem 1rem;border-radius:10px;font-size:.9rem;margin-bottom:1rem}
.alert.err{background:#fef2f2;color:#b91c1c}
.alert.ok{background:#f0fdf4;color:#15803d}
.alert.warn{background:#fffbeb;color:#b45309}
.okc{color:var(--ok);font-weight:700}.errc{color:var(--err);font-weight:700}

/* landing */
.hero-l{padding:5.5rem 0 3.5rem;text-align:center;background:radial-gradient(80% 90% at 50% 0%,rgba(79,70,229,.10),transparent)}
.hero-l h1{font-size:clamp(2.1rem,5.5vw,3.6rem);letter-spacing:-.03em;line-height:1.1}
.hero-l h1 span{background:linear-gradient(120deg,var(--p),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-l p{max-width:600px;margin:1.2rem auto 2rem;color:var(--muted);font-size:1.1rem}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;padding:2rem 0}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh)}
.feat .fi{font-size:1.6rem;margin-bottom:.5rem}
.feat h3{margin-bottom:.3rem;font-size:1rem}
.feat p{color:var(--muted);font-size:.88rem}
.steps{padding:2rem 0 4rem}
.steps h2{text-align:center;margin-bottom:1.6rem}
.steps ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;list-style:none;counter-reset:s}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;counter-increment:s;position:relative}
.steps li::before{content:counter(s);position:absolute;top:-14px;left:1rem;width:28px;height:28px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.steps b{display:block;margin-top:.4rem}
.steps span{color:var(--muted);font-size:.85rem}
.pagefoot{border-top:1px solid var(--line);padding:1.4rem 0;color:var(--muted);font-size:.82rem;background:#fff}

/* auth */
.auth-wrap{display:grid;place-items:center;padding:4rem 1rem}
.auth-card{width:min(420px,100%)}
.auth-card h1{font-size:1.4rem;margin-bottom:1.2rem}
.auth-links{margin-top:1rem;font-size:.88rem;color:var(--muted)}

/* dashboard */
.page-head{display:flex;justify-content:space-between;align-items:center;margin:2rem 0 1.2rem}
.page-title{font-size:1.6rem;letter-spacing:-.02em}
.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.site-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.site-url{color:var(--muted);font-size:.88rem;margin:.3rem 0 1rem}
.site-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.pill.pub{background:#dcfce7;color:#15803d}
.pill.draft{background:#fef3c7;color:#b45309}
.empty{text-align:center;padding:3.5rem 1.5rem}
.empty .fi{font-size:2.4rem}
.empty h2{margin:.6rem 0 .4rem}
.empty p{color:var(--muted);margin-bottom:1.4rem}

/* wizard */
.wizard{padding:2rem 0 4rem}
.wsteps{display:flex;gap:.4rem;list-style:none;margin-bottom:1.4rem;flex-wrap:wrap}
.wsteps li{flex:1;text-align:center;font-size:.78rem;font-weight:700;color:var(--muted);padding:.5rem .3rem;border-bottom:3px solid var(--line);min-width:70px}
.wsteps li.on{color:var(--p);border-color:var(--p)}
.wsteps li.done{color:var(--ok);border-color:var(--ok)}
.wnav{display:flex;justify-content:space-between;margin-top:1.2rem}
.svc-row{display:grid;grid-template-columns:2fr 1fr auto;gap:.6rem;margin-bottom:.6rem;align-items:center}
.svc-row input{margin-top:0}
.mini-x{border:none;background:var(--bg);border-radius:8px;width:32px;height:32px;color:var(--muted)}
.mini-x:hover{background:#fee2e2;color:#b91c1c}
.logo-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.logo-drop{border:2px dashed var(--line);border-radius:var(--r);display:grid;place-items:center;min-height:180px;text-align:center;color:var(--muted);font-size:.86rem;cursor:pointer;transition:.15s;padding:1rem}
.logo-drop:hover,.logo-drop.drag{border-color:var(--p);background:rgba(79,70,229,.05)}
.logo-drop img{max-height:120px;max-width:100%}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.theme-card{background:#fff;border:2px solid var(--line);border-radius:12px;padding:.6rem;text-align:left;transition:.15s;display:flex;flex-direction:column;gap:.15rem}
.theme-card:hover{border-color:var(--p)}
.theme-card.sel{border-color:var(--p);box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.tc-name{font-weight:700;font-size:.9rem}
.tc-desc{font-size:.74rem;color:var(--muted)}
.tc-prev{display:block;height:64px;border-radius:8px;margin-bottom:.4rem;position:relative;overflow:hidden;background:#eef}
.tc-prev i,.tc-prev b{position:absolute;display:block}
.tc-aurora{background:linear-gradient(140deg,#6366f1,#8b5cf6)}.tc-aurora i{left:20%;right:20%;top:22%;height:10px;background:#fff;border-radius:6px}.tc-aurora b{left:35%;right:35%;bottom:22%;height:8px;background:rgba(255,255,255,.6);border-radius:6px}
.tc-atelier{background:#faf7f2}.tc-atelier i{left:8%;top:20%;width:40%;height:12px;background:#333}.tc-atelier b{right:8%;top:15%;width:34%;bottom:15%;background:#d4c5ae}
.tc-nordic{background:#fff}.tc-nordic i{left:8%;top:30%;width:52%;height:6px;background:#111}.tc-nordic b{left:8%;top:48%;width:30%;height:4px;background:#4f46e5}
.tc-bauhaus{background:#f5e642}.tc-bauhaus i{left:8%;top:18%;width:45%;height:16px;background:#111}.tc-bauhaus b{left:8%;bottom:18%;width:26%;height:12px;background:#e11d48}
.tc-verde{background:#eef7ee}.tc-verde i{left:8%;top:25%;width:40%;height:10px;background:#166534;border-radius:8px}.tc-verde b{right:8%;top:20%;width:32%;bottom:20%;background:#86efac;border-radius:50%}
.tc-noir{background:#15151b}.tc-noir i{left:25%;right:25%;top:30%;height:8px;background:#d4af37}.tc-noir b{left:35%;right:35%;bottom:26%;height:5px;background:#555}
.tc-metro{background:#fff}.tc-metro i{left:0;top:0;bottom:0;width:46%;background:#e5e7ef}.tc-metro b{right:8%;top:22%;width:36%;height:10px;background:#0ea5e9}
.tc-classic{background:#f8fafc}.tc-classic i{left:30%;right:30%;top:14%;height:8px;background:#1e3a8a}.tc-classic b{left:20%;right:20%;top:38%;height:22px;background:#1e3a8a;opacity:.15}
.tc-sunrise{background:linear-gradient(140deg,#fde68a,#fca5a5)}.tc-sunrise i{left:22%;right:22%;top:26%;height:12px;background:#fff;border-radius:999px}.tc-sunrise b{left:34%;right:34%;bottom:20%;height:10px;background:rgba(255,255,255,.7);border-radius:999px}
.tc-craft{background:#f3ede2}.tc-craft i{left:8%;top:20%;width:50%;height:10px;background:#7c4a1d}.tc-craft b{left:8%;bottom:20%;width:70%;height:6px;background:#b98a52}
.slug-row{display:flex;align-items:center;gap:0;margin-top:.3rem}
.slug-prefix{background:var(--bg);border:1px solid var(--line);border-right:none;border-radius:10px 0 0 10px;padding:.55rem .6rem;color:var(--muted);font-size:.9rem;white-space:nowrap}
.slug-row input{border-radius:0 10px 10px 0;margin-top:0}
.ai-bar{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.w-content textarea{resize:vertical}

/* manage */
.manage{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 58px)}
.m-side{background:#fff;border-right:1px solid var(--line);padding:1.1rem;display:flex;flex-direction:column;gap:1rem;position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto}
.m-sitehead{display:flex;flex-direction:column;gap:.4rem}
.m-sitehead b{font-size:1.05rem}
.m-tabs{display:flex;flex-direction:column;gap:.2rem}
.m-tabs button{text-align:left;border:none;background:none;padding:.6rem .7rem;border-radius:9px;font-weight:600;color:var(--muted);font-size:.92rem}
.m-tabs button:hover{background:var(--bg);color:var(--fg)}
.m-tabs button.on{background:rgba(79,70,229,.1);color:var(--p)}
.m-publish{margin-top:auto;display:flex;flex-direction:column;gap:.5rem}
.live-link{font-size:.85rem;text-align:center}
.back-link{font-size:.82rem;color:var(--muted);text-align:center}
.m-main{padding:1.4rem;min-width:0}
.m-panel{max-width:980px}
.m-toolbar{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.m-toolbar h2,.m-toolbar h3{margin-right:auto}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:none;background:none;padding:.45rem .8rem;font-weight:600;color:var(--muted);font-size:.88rem}
.seg button.on{background:var(--p);color:#fff}
.input-s{width:auto;margin:0}
.prev-frame-wrap{background:#e9eaf2;border:1px solid var(--line);border-radius:var(--r);padding:1rem;display:grid;place-items:start center;min-height:70vh}
#m_frame{width:100%;height:75vh;border:none;border-radius:10px;background:#fff;box-shadow:var(--sh);transition:width .25s}
.page-list,.sec-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.page-item,.sec-item{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:11px;padding:.6rem .8rem}
.page-item.dragging,.sec-item.dragging{opacity:.4}
.drag{cursor:grab;color:var(--muted)}
.pi-title{font-weight:700;font-size:.93rem}
.pi-slug{color:var(--muted);font-size:.82rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi-actions{display:flex;gap:.35rem}
.tagx{font-style:normal;font-size:.68rem;background:var(--bg);border-radius:6px;padding:.1rem .4rem;color:var(--muted);margin-left:.3rem}
.chk{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;margin:0;font-weight:500;color:var(--muted)}
.mini{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.3rem .6rem;font-size:.8rem;font-weight:600;color:var(--fg)}
.mini:hover{border-color:var(--p);color:var(--p)}
.mini.danger:hover{border-color:var(--err);color:var(--err)}
.add-sec{display:flex;gap:.6rem;align-items:center}
.add-sec select{width:auto;margin:0}
.media-drop{border:2px dashed var(--line);border-radius:var(--r);padding:1.6rem;text-align:center;color:var(--muted);cursor:pointer;transition:.15s;margin-bottom:1rem;font-size:.9rem}
.media-drop:hover,.media-drop.drag{border-color:var(--p);background:rgba(79,70,229,.05)}
.media-drop.small{padding:.9rem}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem}
.media-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer}
.media-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.media-item:hover{border-color:var(--p)}
.mi-name{display:block;font-size:.7rem;padding:.3rem .4rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-del{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.9)}
.hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 1rem}
.logo-mini{display:flex;align-items:center;gap:.7rem;margin-top:.4rem}
.logo-mini img{height:48px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:.2rem}
.danger-zone{border-color:#fecaca}
.svc-edit{padding:1rem}

/* modal */
.modal{position:fixed;inset:0;background:rgba(15,17,28,.55);display:grid;place-items:center;z-index:100;padding:1rem}
.modal-box{background:#fff;border-radius:16px;width:min(720px,100%);max-height:85vh;overflow:auto;padding:1.2rem;box-shadow:0 24px 70px -20px rgba(0,0,0,.5)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--err);color:#fff;padding:.7rem 1.3rem;border-radius:12px;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:92vw;text-align:center}
.toast.ok{background:var(--ok)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:880px){
  .manage{grid-template-columns:1fr}
  .m-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .m-tabs{flex-direction:row;flex-wrap:wrap}
  .m-publish{margin:0;flex-direction:row;width:100%}
  .grid2,.grid3,.logo-row{grid-template-columns:1fr}
  .svc-row{grid-template-columns:1fr auto auto}
}