:root{
  --mango:#FF8C00;--mango-l:#FFB347;--mango-d:#E07000;
  --cream:#F8F9FA;--dark:#1A1A2E;--mid:#3D3D5C;
  --leaf:#2D6A4F;--leaf-l:#52B788;
  --white:#FFF;--error:#E63946;
  --bd:rgba(0,0,0,0.08);--sh:0 4px 24px rgba(0,0,0,0.08);
  --r:12px;--r-lg:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--dark);line-height:1.6}
.hidden{display:none!important}

/* ===== AUTH ===== */
.auth-page{min-height:100vh}
.auth-wrap{display:grid;grid-template-columns:1fr 440px;min-height:100vh}
.auth-left{background:linear-gradient(135deg,#1A1A2E 0%,#2D1B00 60%,#1A3D2E 100%);padding:60px;display:flex;flex-direction:column;justify-content:center}
.auth-brand{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--mango-l);margin-bottom:48px}
.auth-headline{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem);color:#fff;line-height:1.15;margin-bottom:16px}
.auth-headline em{color:var(--mango-l);font-style:normal}
.auth-pitch{color:rgba(255,255,255,.55);font-size:.95rem;margin-bottom:32px;max-width:400px;line-height:1.7}
.auth-features{display:flex;flex-direction:column;gap:10px}
.af-item{color:rgba(255,255,255,.7);font-size:.88rem}
.auth-right{background:#fff;display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{width:100%;max-width:360px}
.auth-title{font-family:'Playfair Display',serif;font-size:1.8rem;margin-bottom:4px}
.auth-sub{color:#888;font-size:.88rem;margin-bottom:22px}
.auth-footer{text-align:center;margin-top:18px;font-size:.84rem;color:#888}
.auth-footer a{color:var(--mango);font-weight:600;text-decoration:none}

/* fields */
.fg{margin-bottom:15px}
.fg label,.fg-label{display:block;font-size:.82rem;font-weight:600;color:var(--mid);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;padding:10px 13px;border:1.5px solid #E0E0E0;border-radius:9px;
  font-family:'DM Sans',sans-serif;font-size:.9rem;color:var(--dark);
  background:#FAFAFA;transition:all .2s;outline:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--mango);background:#fff;box-shadow:0 0 0 3px rgba(255,140,0,.1)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF8C00' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
textarea{resize:vertical;min-height:80px}
input[type=color]{width:100%;height:42px;padding:3px;border:1.5px solid #E0E0E0;border-radius:9px;cursor:pointer;background:#fff}

/* buttons */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;background:linear-gradient(135deg,var(--mango),var(--mango-d));color:#fff;border:none;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s;box-shadow:0 4px 14px rgba(255,140,0,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,140,0,.4)}
.btn-ghost{display:inline-flex;align-items:center;padding:9px 18px;background:transparent;color:var(--mid);border:1.5px solid var(--bd);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all .2s}
.btn-ghost:hover{border-color:var(--mango);color:var(--mango)}
.btn-ghost-sm{display:inline-flex;align-items:center;padding:6px 13px;background:transparent;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.15);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.83rem;cursor:pointer;text-decoration:none;transition:all .2s}
.btn-ghost-sm:hover{color:var(--mango-l);border-color:var(--mango)}
.btn-danger-outline{display:inline-flex;align-items:center;padding:9px 18px;background:transparent;color:var(--error);border:1.5px solid var(--error);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-danger-outline:hover{background:var(--error);color:#fff}
.w-full{width:100%}
.alert{padding:10px 13px;border-radius:9px;margin-bottom:13px;font-size:.85rem;font-weight:500}
.alert-error{background:#FFF0F0;color:var(--error);border:1px solid #FFCDD2}
.alert-success{background:#F0FFF4;color:var(--leaf);border:1px solid #C8E6C9}

/* nav */
.app-nav{background:var(--dark);padding:0 26px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 14px rgba(0,0,0,.2)}
.nav-brand{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--mango-l)}
.nav-right{display:flex;align-items:center;gap:12px}
.user-pill{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:.88rem}
.user-init{width:30px;height:30px;border-radius:50%;background:var(--mango);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.84rem}

/* app body */
.app-body{max-width:1100px;margin:0 auto;padding:30px 22px 60px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:13px}
.page-title{font-family:'Playfair Display',serif;font-size:1.75rem}
.page-sub{color:#888;font-size:.87rem;margin-top:2px}

/* forms grid */
.forms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.fcard-outer{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);border:1px solid var(--bd);overflow:hidden;transition:all .25s}
.fcard-outer:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.11)}
.fcard-cover{height:84px;position:relative;overflow:hidden}
.fcard-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.fcard-badge{position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:20px;font-size:.71rem;font-weight:700;background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(4px)}
.fcard-badge.live{background:rgba(45,106,79,.85)}
.fcard-body{padding:15px 17px 10px}
.fcard-title{font-weight:600;font-size:.97rem;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard-meta{font-size:.77rem;color:#999}
.fcard-date{font-size:.75rem;color:#bbb;margin-top:2px}
.fcard-actions{padding:9px 17px;border-top:1px solid #F5F5F5;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn-xs{display:inline-flex;align-items:center;padding:5px 10px;border:1.5px solid var(--bd);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.77rem;font-weight:500;cursor:pointer;background:#fff;text-decoration:none;color:var(--dark);transition:all .2s}
.btn-xs:hover{border-color:var(--mango);color:var(--mango)}
.btn-xs.accent{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.btn-xs.accent:hover{background:var(--leaf-l)}
.fcard-more{margin-left:auto;position:relative}
.btn-dot{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;font-size:1.1rem;color:#aaa}
.btn-dot:hover{background:var(--cream)}
.drop-menu{display:none;position:absolute;right:0;top:100%;background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:0 8px 30px rgba(0,0,0,.12);min-width:130px;z-index:50;overflow:hidden}
.drop-menu.open{display:block}
.drop-menu button{display:block;width:100%;padding:9px 15px;background:none;border:none;text-align:left;font-family:'DM Sans',sans-serif;font-size:.85rem;cursor:pointer;color:var(--dark)}
.drop-menu button:hover{background:var(--cream)}
.drop-menu button.del{color:var(--error)}
.drop-menu button.del:hover{background:#FFF0F0}

/* empty / modal */
.empty-state{text-align:center;padding:70px 20px;color:#bbb}
.empty-emoji{font-size:3.2rem;margin-bottom:14px}
.empty-state h3{font-size:1.15rem;color:var(--mid);margin-bottom:7px}
.empty-state p{font-size:.88rem;margin-bottom:18px}
.modal-overlay{position:fixed;inset:0;background:rgba(26,26,46,.7);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:var(--r-lg);padding:34px;max-width:450px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.modal-lg{max-width:660px;max-height:85vh;overflow-y:auto}
.modal h3{font-family:'Playfair Display',serif;font-size:1.25rem;margin-bottom:18px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-head h3{margin:0;font-size:1.05rem;font-weight:600}
.modal-head button{background:none;border:none;cursor:pointer;font-size:1.1rem;color:#aaa;padding:3px;border-radius:5px}
.modal-btns{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}

/* stats */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px;margin-bottom:22px}
.stat-card{background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);border-left:4px solid var(--mango)}
.stat-card.green{border-left-color:var(--leaf)}
.stat-card.blue{border-left-color:#457B9D}
.stat-card.purple{border-left-color:#9B5DE5}
.sn{font-family:'Playfair Display',serif;font-size:1.85rem;font-weight:900}
.sl{font-size:.75rem;color:#999;margin-top:2px}

/* table */
.table-wrap{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;border:1px solid var(--bd)}
.table-scroll{overflow-x:auto}
.resp-table{width:100%;border-collapse:collapse;font-size:.82rem}
.resp-table thead th{background:var(--dark);color:rgba(255,255,255,.75);padding:12px 15px;text-align:left;font-weight:600;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.resp-table thead th:first-child{color:var(--mango-l)}
.resp-table tbody tr{border-bottom:1px solid #F5F5F5;cursor:pointer;transition:background .15s}
.resp-table tbody tr:hover{background:#FFF8F0}
.resp-table tbody td{padding:11px 15px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resp-table tbody td:first-child{font-weight:600;color:var(--mango-d)}
.resp-detail{display:flex;flex-direction:column}
.rd-row{padding:11px 0;border-bottom:1px solid #F5F5F5}
.rd-row:last-child{border:none}
.rd-label{font-size:.75rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.rd-val{font-size:.92rem}

/* ===== BUILDER ===== */
.builder-page{background:#EDECEA;overflow:hidden;height:100vh;display:flex;flex-direction:column}

/* top bar */
.bld-bar{
  background:var(--dark);height:52px;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 14px;gap:12px;
  flex-shrink:0;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  z-index:100;
}
.bld-bar-l{display:flex;align-items:center;gap:10px}
.bld-bar-c{display:flex;justify-content:center}
.bld-bar-r{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.back-btn{color:rgba(255,255,255,.55);text-decoration:none;font-size:.84rem;padding:5px 9px;border-radius:7px;transition:color .2s;white-space:nowrap}
.back-btn:hover{color:var(--mango-l)}
.title-inp{
  background:transparent!important;border:none!important;
  border-bottom:1.5px solid rgba(255,255,255,.2)!important;
  border-radius:0!important;color:#fff!important;
  font-size:.9rem!important;font-weight:600!important;
  width:180px!important;padding:3px 5px!important;
  box-shadow:none!important;
}
.title-inp:focus{border-bottom-color:var(--mango)!important;box-shadow:none!important}

/* tabs */
.tabs{display:flex;gap:2px;background:rgba(255,255,255,.08);padding:4px;border-radius:9px}
.tab{padding:6px 14px;background:transparent;border:none;color:rgba(255,255,255,.5);font-family:'DM Sans',sans-serif;font-size:.83rem;font-weight:500;cursor:pointer;border-radius:6px;transition:all .2s;white-space:nowrap}
.tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.tab.active{color:var(--mango-l);background:rgba(255,140,0,.15)}
.save-txt{font-size:.76rem;color:rgba(255,255,255,.4);white-space:nowrap}
.btn-pub{padding:7px 16px;border:none;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;background:var(--mango);color:var(--dark);white-space:nowrap}
.btn-pub:hover{background:var(--mango-l)}
.btn-pub.is-live{background:transparent;color:var(--error);border:1.5px solid var(--error)}
.btn-pub.is-live:hover{background:var(--error);color:#fff}
.btn-share{padding:7px 16px;border:none;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;background:var(--leaf);color:#fff}
.btn-share:hover{background:var(--leaf-l)}

/* TAB BODIES */
.tab-body{flex:1;overflow:hidden;min-height:0}

/* build layout */
.build-layout{
  display:grid!important;
  grid-template-columns:210px 1fr 250px;
  height:calc(100vh - 52px);
  overflow:hidden;
}

/* left panel */
.bleft{background:#fff;border-right:1px solid var(--bd);overflow-y:auto;display:flex;flex-direction:column}
.bleft-section{padding:12px;border-bottom:1px solid #F0EEE8}
.bleft-label{font-size:.67rem;font-weight:700;color:#bbb;letter-spacing:.1em;margin-bottom:9px}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pitem{display:flex;align-items:center;gap:6px;padding:7px 8px;background:#FAFAFA;border:1.5px solid #F0EEE8;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:500;color:var(--mid);transition:all .2s;text-align:left}
.pitem:hover{border-color:var(--mango);background:#FFF5E8;color:var(--mango-d)}
.pgitem{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:.83rem;transition:background .15s}
.pgitem:hover{background:var(--cream)}
.pgitem.active{background:#FFF5E8;color:var(--mango);font-weight:600}
.pg-num{width:18px;height:18px;border-radius:50%;background:#E8E0D5;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;flex-shrink:0}
.pgitem.active .pg-num{background:var(--mango);color:#fff}
.pg-del{background:none;border:none;cursor:pointer;color:#ccc;padding:2px;font-size:.9rem;border-radius:4px}
.pg-del:hover{color:var(--error)}
.btn-addpage{margin:10px 12px;padding:7px;background:transparent;border:1.5px dashed #D0CCC8;border-radius:7px;color:#bbb;font-family:'DM Sans',sans-serif;font-size:.8rem;cursor:pointer;width:calc(100% - 24px);transition:all .2s}
.btn-addpage:hover{border-color:var(--mango);color:var(--mango)}

/* center canvas */
.bcenter{overflow-y:auto;padding:18px;background:#EDECEA}
.canvas{max-width:640px;margin:0 auto;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 8px 36px rgba(0,0,0,.1)}
.canvas-cover{min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 24px 22px;transition:background .3s}
.canvas-pg-badge{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px;min-height:16px}
.canvas-title{font-family:'Playfair Display',serif;font-size:1.7rem;color:#fff;line-height:1.2;margin-bottom:7px;outline:none;cursor:text;min-width:60px}
.canvas-desc{color:rgba(255,255,255,.65);font-size:.9rem;outline:none;cursor:text;min-width:60px}
.canvas-page-tabs{background:#fff;border-bottom:1px solid var(--bd);display:flex;padding:0 18px;gap:2px}
.cvtab{padding:9px 15px;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:.83rem;cursor:pointer;border-bottom:2px solid transparent;color:#888;transition:all .2s}
.cvtab.active{border-bottom-color:var(--mango);color:var(--mango);font-weight:600}
.canvas-fields{padding:14px;min-height:180px}
.canvas-empty{text-align:center;padding:44px 18px;color:#ccc;font-size:.88rem;border:2px dashed #E8E0D5;border-radius:var(--r);margin:6px 0}

/* field cards in canvas */
.fcard{border:1.5px solid #F0EEE8;border-radius:9px;padding:13px;margin-bottom:7px;cursor:pointer;transition:all .2s;background:#fff}
.fcard:hover{border-color:var(--mango-l);box-shadow:0 2px 10px rgba(255,140,0,.1)}
.fcard.sel{border-color:var(--mango);box-shadow:0 0 0 3px rgba(255,140,0,.1)}
.fc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.fc-label{font-weight:600;font-size:.87rem}
.fc-type{font-size:.69rem;background:#F5F5F5;color:#999;padding:2px 7px;border-radius:20px}
.fc-req{color:var(--mango);font-size:.78rem}
.fc-body{margin-top:4px}
.fc-prev{background:#FAFAFA;border-radius:6px;padding:6px 11px;font-size:.79rem;color:#bbb}
.sc-pip{display:inline-flex;width:21px;height:21px;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:4px;font-size:.68rem;color:#bbb;margin-right:3px}

/* right field editor */
.bright{background:#fff;border-left:1px solid var(--bd);overflow-y:auto;padding:13px}
.fe-empty{height:100%;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:.84rem;text-align:center;padding:36px 14px}
.fe-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--bd)}
.fe-badge{font-size:.71rem;font-weight:700;color:var(--mango);background:#FFF5E8;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.fe-delbtn{background:none;border:none;cursor:pointer;padding:5px 7px;border-radius:6px;font-size:.9rem}
.fe-delbtn:hover{background:#FFF0F0}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #F5F5F5}
.toggle-row label:first-child{font-size:.87rem;font-weight:500;margin-bottom:0!important}
.sw{position:relative;display:inline-block;width:36px;height:19px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw-t{position:absolute;inset:0;background:#ddd;border-radius:10px;transition:.3s;cursor:pointer}
.sw-t::before{content:'';position:absolute;width:13px;height:13px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked+.sw-t{background:var(--mango)}
.sw input:checked+.sw-t::before{transform:translateX(17px)}
.btn-addopt{margin-top:6px;padding:7px 13px;background:transparent;border:1.5px dashed #D0CCC8;border-radius:7px;color:#bbb;font-family:'DM Sans',sans-serif;font-size:.79rem;cursor:pointer;width:100%;transition:all .2s}
.btn-addopt:hover{border-color:var(--mango);color:var(--mango)}
.btn-move{flex:1;padding:7px;background:#FAFAFA;border:1.5px solid var(--bd);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.79rem;cursor:pointer;transition:all .2s}
.btn-move:hover{border-color:var(--mango);color:var(--mango)}

/* ===== THEME / SETTINGS PANELS ===== */
.panel-body{flex-direction:column!important;overflow-y:auto;background:#EDECEA;height:calc(100vh - 52px)}
.panel-inner{max-width:860px;margin:0 auto;padding:28px 22px 60px;width:100%}
.panel-title{font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:22px}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.pcard{background:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh)}
.pcard h3{font-size:.97rem;font-weight:600;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid #F5F5F5}
.pcard.full{grid-column:1/-1}
.card-note{font-size:.81rem;color:#999;margin-bottom:11px}
.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.citem label{font-size:.74rem;font-weight:600;color:var(--mid);display:block;margin-bottom:4px;text-align:center}
.cover-preview-box{height:110px;background:#F5F5F5;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:.84rem;background-size:cover;background-position:center;margin-top:7px;border:2px dashed #E0DDD8;transition:all .3s}
.presets{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.preset{padding:10px 18px;border-radius:9px;border:none;cursor:pointer;font-size:.8rem;font-weight:700;color:#fff;font-family:'DM Sans',sans-serif;transition:transform .2s}
.preset:hover{transform:scale(1.04)}
.info-box{background:#FFF8E1;border:1px solid #FFD54F;border-radius:9px;padding:12px;font-size:.78rem;color:#7B5B00;margin-top:11px;line-height:1.9}
.info-box code{background:#FFE082;padding:1px 5px;border-radius:4px;font-family:monospace;font-size:.76rem}
.share-row{display:flex;gap:8px}
.share-row input{flex:1;font-size:.81rem!important}

/* ===== PREVIEW ===== */
.preview-body{flex-direction:column!important;background:#EDECEA;height:calc(100vh - 52px)}
.preview-bar{padding:11px 18px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:9px;flex-shrink:0}
.prev-btn{padding:6px 15px;border:1.5px solid var(--bd);border-radius:7px;background:none;font-family:'DM Sans',sans-serif;font-size:.81rem;cursor:pointer;transition:all .2s}
.prev-btn.active{border-color:var(--mango);color:var(--mango);background:#FFF5E8}
.prev-note{font-size:.76rem;color:#aaa;margin-left:auto}
.preview-area{flex:1;padding:18px;overflow:auto;display:flex;justify-content:center}
.prev-frame{border:none;border-radius:var(--r-lg);box-shadow:0 8px 36px rgba(0,0,0,.12);background:#fff;height:calc(100vh - 160px);transition:max-width .3s}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:24px;right:24px;background:var(--dark);color:#fff;padding:11px 17px;border-radius:var(--r);font-size:.85rem;font-weight:500;box-shadow:0 8px 28px rgba(0,0,0,.2);transform:translateY(80px);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);z-index:9999;max-width:300px;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{border-left:4px solid var(--leaf-l)}
.toast.info{border-left:4px solid var(--mango)}

/* responsive */
@media(max-width:900px){
  .auth-left{display:none}
  .auth-wrap{grid-template-columns:1fr}
  .build-layout{grid-template-columns:1fr!important}
  .bleft,.bright{display:none}
  .panel-grid{grid-template-columns:1fr}
}

/* ===== DRAG & DROP ===== */
.fcard{cursor:grab;position:relative;display:flex;align-items:stretch;gap:0}
.fcard:active{cursor:grabbing}
.fcard.dragging{opacity:.4;transform:scale(.98)}
.fcard.drag-over{border-color:var(--mango);background:#FFF5E8;box-shadow:0 0 0 3px rgba(255,140,0,.15)}
.fc-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 8px;color:#ddd;font-size:1rem;cursor:grab;flex-shrink:0;transition:color .2s}
.fc-drag-handle:hover{color:var(--mango)}
.fc-main{flex:1;min-width:0}

/* ===== COVER TABS ===== */
.cover-tabs{display:flex;gap:4px;margin-bottom:4px}
.ctab{padding:6px 14px;border:1.5px solid var(--bd);border-radius:7px;background:none;font-family:'DM Sans',sans-serif;font-size:.8rem;cursor:pointer;transition:all .2s}
.ctab.active{border-color:var(--mango);color:var(--mango);background:#FFF5E8}

/* ===== UNSPLASH GRID ===== */
.unsplash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.unsplash-item{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;cursor:pointer;background:#f0f0f0}
.unsplash-item img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.unsplash-item:hover img{transform:scale(1.05)}
.unsplash-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem;transition:background .2s;opacity:0}
.unsplash-item:hover .unsplash-overlay{background:rgba(0,0,0,.45);opacity:1}

/* ===== SOLID PRESETS ===== */
.solid-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.solid-opt{padding:14px;border-radius:9px;cursor:pointer;font-size:.78rem;font-weight:700;color:white;text-align:center;transition:transform .2s;border:2px solid transparent}
.solid-opt:hover{transform:scale(1.04);border-color:rgba(255,255,255,.4)}

/* ===== MOBILE RESPONSIVE ===== */
.mob-fields-btn{display:none;position:fixed;bottom:80px;left:16px;z-index:200;padding:12px 20px;background:var(--mango);color:var(--dark);border:none;border-radius:30px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;box-shadow:0 4px 20px rgba(255,140,0,.4)}

@media(max-width:768px){
  /* Auth */
  .auth-left{display:none}
  .auth-wrap{grid-template-columns:1fr}
  .auth-right{padding:24px 16px}

  /* App nav */
  .app-nav{padding:0 16px}
  .user-pill span{display:none}

  /* App body */
  .app-body{padding:20px 14px 50px}
  .page-head{flex-direction:column;align-items:flex-start}

  /* Forms grid */
  .forms-grid{grid-template-columns:1fr}

  /* Stats */
  .stats-row{grid-template-columns:repeat(2,1fr)}

  /* Builder top bar */
  .bld-bar{grid-template-columns:1fr auto;height:auto;padding:8px 10px;flex-wrap:wrap;gap:6px}
  .bld-bar-c{grid-column:1/-1;order:3}
  .bld-bar-l{gap:6px}
  .title-inp{width:120px!important;font-size:.82rem!important}
  .tabs{gap:1px}
  .tab{padding:5px 9px;font-size:.75rem}
  .save-txt{display:none}
  .btn-pub,.btn-share{padding:6px 10px;font-size:.78rem}

  /* Builder layout — stack vertically on mobile */
  .build-layout{
    grid-template-columns:1fr!important;
    height:calc(100vh - 90px);
    position:relative;
  }

  /* Left panel slides in on mobile */
  .bleft{
    position:fixed;left:-100%;top:0;bottom:0;width:260px;
    z-index:300;transition:left .3s;
    box-shadow:4px 0 20px rgba(0,0,0,.15);
  }
  .bleft.mob-open{left:0}
  .mob-fields-btn{display:block}

  /* Center takes full width */
  .bcenter{height:calc(100vh - 90px);overflow-y:auto}
  .canvas{margin:12px;border-radius:12px}

  /* Right panel slides in from right */
  .bright{
    position:fixed;right:-100%;top:0;bottom:0;width:280px;
    z-index:300;transition:right .3s;
    box-shadow:-4px 0 20px rgba(0,0,0,.15);
  }
  .bright.mob-open{right:0}

  /* Theme/settings panels */
  .panel-grid{grid-template-columns:1fr}
  .pcard.full{grid-column:1}
  .color-grid{grid-template-columns:repeat(3,1fr)}
  .unsplash-grid{grid-template-columns:repeat(2,1fr)}
  .solid-presets{grid-template-columns:repeat(2,1fr)}

  /* Preview */
  .preview-area{padding:10px}
  .prev-frame{border-radius:8px!important}

  /* Table scroll */
  .table-wrap{overflow-x:auto}
}

@media(max-width:480px){
  .stats-row{grid-template-columns:1fr 1fr}
  .fcard-actions{flex-wrap:wrap}
  .page-head>div:last-child{width:100%;justify-content:stretch}
  .page-head>div:last-child .btn-primary,
  .page-head>div:last-child .btn-danger-outline{flex:1;justify-content:center}
}