:root{
 --blue:#13277c;
 --green:#179447;
 --text:#0f172a;
 --muted:#64748b;
 --admin-accent:#13277c;
 --admin-sidebar:#0f172a;
 --admin-sidebar-text:#e2e8f0;
 --admin-content-bg:#ffffff;
 --admin-topbar-bg:#ffffff;
 --admin-topbar-text:#0f172a;
 --admin-layout:260px 1fr;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
 font-family:Arial,Helvetica,sans-serif;
 color:var(--text);
 background:#fff;
 font-size:15px;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

.topbar{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 padding:14px 28px;
 background:var(--admin-topbar-bg)!important;
 color:var(--admin-topbar-text)!important;
 border-bottom:1px solid #e5e7eb;
 position:sticky;
 top:0;
 z-index:1000;
}
.brand{
 display:flex;
 align-items:center;
 gap:12px;
 min-width:170px;
 color:#0f172a;
}
.brand img{
 width:62px!important;
 height:auto!important;
 display:block;
}
.brand strong{
 font-size:18px;
 font-weight:800;
}
.button-nav{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 justify-content:flex-end;
 align-items:center;
}
.nav-btn{
 display:inline-flex;
 align-items:center;
 padding:9px 13px;
 border-radius:999px;
 border:1px solid #dbe4f0;
 background:#f8fafc;
 color:#13277c;
 font-size:13px;
 font-weight:700;
 box-shadow:0 4px 12px rgba(15,23,42,.05);
}
.nav-btn:hover{background:#eaf7ee;color:#0f7a39}
.nav-btn.admin{background:var(--admin-accent)!important;color:#fff}
.nav-btn.logout{background:#fee2e2;color:#991b1b}

.userbar{
 background:#eff6ff;
 color:#1e3a8a;
 padding:10px 28px;
 font-size:14px;
}

.hero{
 min-height:650px;
 display:grid;
 place-items:center;
 padding:70px 7vw;
 background:
  radial-gradient(circle at 18% 25%,rgba(23,148,71,.16),transparent 28%),
  radial-gradient(circle at 82% 72%,rgba(19,39,124,.14),transparent 30%),
  linear-gradient(135deg,#f8fafc 0%,#fff 45%,#eef6f0 100%);
 position:relative;
 overflow:hidden;
}
.hero:before{
 content:"";
 position:absolute;
 left:-140px;
 top:60px;
 width:520px;
 height:520px;
 border-radius:50%;
 border:70px solid rgba(19,39,124,.95);
}
.hero:after{
 content:"";
 position:absolute;
 right:-130px;
 bottom:-170px;
 width:560px;
 height:560px;
 border-radius:50%;
 border:78px solid rgba(23,148,71,.95);
}
.hero-card,.page-hero,.card,.login-card{
 background:rgba(255,255,255,.95);
 border:1px solid #e5e7eb;
 border-radius:30px;
 box-shadow:0 18px 60px rgba(15,23,42,.10);
}
.hero-card{
 position:relative;
 z-index:1;
 width:min(980px,100%);
 padding:58px;
}
.hero-card h1{
 font-size:clamp(34px,4.8vw,64px);
 line-height:1;
 margin:0 0 20px;
}
.hero-card p,.page-hero p{
 color:var(--muted);
 font-size:19px;
 line-height:1.7;
}
.eyebrow{
 display:inline-flex;
 background:#eaf7ee;
 color:#0f7a39;
 border-radius:999px;
 padding:8px 14px;
 font-weight:700;
 font-size:13px;
 margin-bottom:18px;
}
.btn{
 display:inline-block;
 background:var(--green);
 color:white!important;
 padding:13px 22px;
 border-radius:14px;
 border:0;
 font-weight:700;
 cursor:pointer;
 margin:4px 8px 4px 0;
}
.btn.secondary{background:var(--blue)}
.btn.danger{background:#dc2626}

.section{padding:58px 7vw}
.page-hero{padding:42px;position:relative;z-index:10}
.page-hero h1{
 font-size:clamp(32px,4vw,52px);
 margin:0 0 18px;
}
.grid,.section-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:22px;
 margin-top:28px;
}
.card{padding:26px}

.builder-sections{
 display:flex;
 flex-direction:column;
 gap:24px;
 align-items:stretch;
 margin-top:28px;
 position:relative;
 z-index:10;
}
.builder-row{
 display:flex;
 gap:24px;
 align-items:stretch;
 flex-wrap:wrap;
}
.builder-block{
 max-width:1200px;
 position:relative;
 overflow:hidden;
}
.block-image{
 max-width:100%;
 border-radius:18px;
 margin-bottom:16px;
}

.login-shell{
 min-height:100vh;
 display:grid;
 place-items:center;
 padding:32px;
 background:
  radial-gradient(circle at 18% 28%,rgba(19,39,124,.24),transparent 28%),
  radial-gradient(circle at 82% 70%,rgba(23,148,71,.25),transparent 30%),
  linear-gradient(135deg,#f8fafc 0%,#fff 42%,#eaf7ee 100%);
}
.login-card{width:min(560px,100%);padding:44px}
.login-logo{display:block;width:150px;margin:0 auto 26px}
.login-card h1,.login-card p{text-align:center}

label{display:block;font-weight:700;margin:12px 0 7px}
input,textarea,select{
 width:100%;
 padding:12px;
 border:1px solid #cbd5e1;
 border-radius:12px;
}
textarea{min-height:130px}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-weight:normal;margin:12px 0}
.checkbox input{width:auto;margin-top:4px}
.error{background:#fee2e2;color:#991b1b;padding:12px;border-radius:12px;margin-bottom:14px}
.success{background:#dcfce7;color:#166534;padding:12px;border-radius:12px;margin-bottom:14px}

.admin-layout{
 display:grid;
 grid-template-columns:var(--admin-layout);
 min-height:calc(100vh - 90px);
}
.sidebar{
 background:var(--admin-sidebar)!important;
 color:var(--admin-sidebar-text)!important;
 padding:24px;
}
.sidebar h3{margin-top:0}
.sidebar a{
 display:block;
 color:var(--admin-sidebar-text)!important;
 padding:10px 0;
}
.content{
 padding:32px;
 padding-bottom:96px;
 background:var(--admin-content-bg)!important;
}
.table{width:100%;background:white;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:12px;text-align:left}
.editor-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sortable-item{
 cursor:grab;
 border:1px dashed #94a3b8;
 border-radius:16px;
 padding:16px;
 margin:10px 0;
 background:#fff;
}
.dragging{opacity:.45}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sticky-actions{
 position:fixed;
 left:260px;
 right:0;
 bottom:0;
 z-index:999;
 display:flex;
 gap:10px;
 align-items:center;
 justify-content:flex-end;
 padding:14px 24px;
 background:rgba(255,255,255,.96);
 border-top:1px solid #e5e7eb;
 box-shadow:0 -8px 30px rgba(15,23,42,.12);
}

.footer{
 display:grid;
 grid-template-columns:2fr 1fr 1fr;
 gap:24px;
 padding:42px 7vw;
 color:#cbd5e1;
 background:#0f172a;
}

/* shape objects */
.shape-stage{position:relative;overflow:hidden}
.shape-object{
 position:absolute;
 pointer-events:none;
 transform-origin:center center;
}
.shape-circle{border-radius:50%}
.shape-square{border-radius:8px}
.shape-gradient{border-radius:24px}
.shape-triangle{
 width:0!important;
 height:0!important;
 background:transparent!important;
 border-left:var(--shape-w) solid transparent;
 border-right:var(--shape-w) solid transparent;
 border-bottom:var(--shape-h) solid var(--shape-c1);
}
.shape-star{
 background:var(--shape-c1);
 clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.shape-image{
 background-size:cover!important;
 background-position:center!important;
}
.shape-admin-row{
 border:1px dashed #94a3b8;
 border-radius:16px;
 padding:16px;
 margin:12px 0;
 background:#fff;
}
.shape-admin-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:10px;
}
.shape-palette{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 margin:12px 0;
}
.shape-palette button{
 border:0;
 border-radius:12px;
 padding:10px 14px;
 background:#13277c;
 color:#fff;
 font-weight:700;
 cursor:pointer;
}

.live-editor-toolbar{
 position:sticky;
 top:0;
 z-index:1000;
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 align-items:center;
 padding:12px 18px;
 background:#ffffff;
 border-bottom:1px solid #e5e7eb;
 box-shadow:0 8px 26px rgba(15,23,42,.08);
}
.live-editor-toolbar label{margin:0;font-size:12px}
.live-editor-toolbar input,.live-editor-toolbar select{width:auto;min-width:90px;padding:8px}
.live-editable{outline:2px dashed transparent;min-height:24px}
.live-editable:focus{outline:2px dashed #179447;background:rgba(23,148,71,.08)}
.live-block{position:relative;cursor:move;resize:both;overflow:auto;min-width:140px;min-height:80px}
.live-block.selected{outline:3px solid #13277c}
.live-block-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:5}
.live-mini-btn{border:0;border-radius:10px;padding:6px 8px;background:#13277c;color:#fff;font-size:12px;cursor:pointer}
.resize-edge{position:absolute;background:#179447;opacity:.55;z-index:25}
.resize-edge.n{top:-4px;left:20px;right:20px;height:8px;cursor:ns-resize}
.resize-edge.s{bottom:-4px;left:20px;right:20px;height:8px;cursor:ns-resize}
.resize-edge.e{right:-4px;top:20px;bottom:20px;width:8px;cursor:ew-resize}
.resize-edge.w{left:-4px;top:20px;bottom:20px;width:8px;cursor:ew-resize}

@media(max-width:980px){
 .grid,.section-grid,.admin-layout,.footer,.editor-row,.mini-grid,.mini-grid-2,.shape-admin-grid{
  grid-template-columns:1fr;
 }
 .topbar,.button-nav{flex-direction:column;align-items:flex-start}
 .sticky-actions{left:0}
 .builder-row{flex-direction:column}
 .builder-block{flex:1 1 100%!important;max-width:100%!important}
}