/* ============================================================
   DERYVIER LANDING CONSTRUCTOR — интерфейс
   Тёмный премиум: уголь + шампань-золото, serif-дисплей
   ============================================================ */
:root{
  --bg:#0c0c0f; --bg2:#121217; --surface:#17171d; --surface2:#1e1e26;
  --line:#26262f; --line-gold:rgba(201,163,92,.35);
  --text:#e9e3d5; --muted:#8f8a7e; --gold:#c9a35c; --gold2:#e6c98a;
  --danger:#c4574f; --ok:#6fae7b;
  --r:10px; --tr:.22s cubic-bezier(.4,0,.2,1);
  --font-d:Georgia,'Times New Roman',serif;
  --font-b:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:15px/1.6 var(--font-b);min-height:100vh}
a{color:var(--gold);text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%;outline:none;transition:border-color var(--tr)}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:vertical;min-height:70px}
::selection{background:rgba(201,163,92,.3)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c2c36;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#3a3a46}
::-webkit-scrollbar-track{background:transparent}

/* --- Кнопки --- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:14px;letter-spacing:.02em;transition:all var(--tr);white-space:nowrap}
.btn:hover{border-color:var(--line-gold);color:var(--gold2)}
.btn-gold{background:linear-gradient(135deg,#b9924e,#d9b877);border-color:transparent;color:#17130a;font-weight:600}
.btn-gold:hover{filter:brightness(1.08);color:#17130a}
.btn-ghost{background:transparent}
.btn-danger{color:#e0968f}
.btn-danger:hover{border-color:var(--danger);color:#f0aca4}
.btn-sm{padding:5px 11px;font-size:13px;border-radius:7px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* --- Шапка приложения --- */
.appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:10px 20px;background:rgba(12,12,15,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--font-d);font-size:17px;letter-spacing:.14em;color:var(--gold);white-space:nowrap}
.logo b{color:var(--text);font-weight:400}
.appbar .grow{flex:1}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;letter-spacing:.08em;border:1px solid var(--line-gold);color:var(--gold)}
.badge.pro{background:linear-gradient(135deg,#b9924e,#d9b877);color:#17130a;border:0;font-weight:700}

/* --- Авторизация --- */
/*.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1000px 600px at 70% -10%,rgba(201,163,92,.07),transparent 60%),var(--bg)} */
  
  
  .auth-wrap {
    min-height: 0vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px; 
    background: none;
}
  
  
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.auth-card h1{font-family:var(--font-d);font-weight:400;font-size:24px;letter-spacing:.1em;color:var(--gold);text-align:center}
.auth-card .sub{color:var(--muted);text-align:center;font-size:13px;margin:6px 0 24px}
.auth-tabs{display:flex;gap:6px;margin-bottom:20px;background:var(--bg2);border-radius:9px;padding:4px}
.auth-tabs button{flex:1;padding:8px;border-radius:7px;color:var(--muted);transition:all var(--tr);font-size:14px}
.auth-tabs button.on{background:var(--surface2);color:var(--gold)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;text-transform:uppercase}
.form-err{color:#e0968f;font-size:13px;min-height:18px;margin:4px 0 10px;text-align:center}
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent);margin:18px 0}

/* --- Кабинет / карточки --- */
.page{max-width:1180px;margin:0 auto;padding:26px 20px 60px}
.page h2{font-family:var(--font-d);font-weight:400;letter-spacing:.08em;font-size:22px;margin-bottom:4px}
.page .sub{color:var(--muted);font-size:13px;margin-bottom:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;transition:border-color var(--tr),transform var(--tr)}
.card:hover{border-color:var(--line-gold)}
.card h3{font-size:16px;font-weight:600;margin-bottom:6px;word-break:break-word}
.card .meta{color:var(--muted);font-size:12px;margin-bottom:12px;display:flex;gap:10px;flex-wrap:wrap}
.card .row{display:flex;gap:8px;flex-wrap:wrap}
.card.new{display:flex;align-items:center;justify-content:center;min-height:150px;border-style:dashed;color:var(--muted);cursor:pointer;font-size:15px}
.card.new:hover{color:var(--gold)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;vertical-align:middle}
.dot.pub{background:var(--ok)} .dot.draft{background:var(--muted)} .dot.blk{background:var(--danger)}
.linkline{font-size:12px;color:var(--muted);word-break:break-all;margin:8px 0;padding:7px 9px;background:var(--bg2);border-radius:7px;border:1px solid var(--line)}

/* --- Таблицы (админ) --- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.tbl th{padding:11px 12px;text-align:left;color:var(--muted);font-weight:500;letter-spacing:.05em;font-size:11px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgba(201,163,92,.03)}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.stat b{display:block;font-family:var(--font-d);font-size:26px;color:var(--gold);font-weight:400}
.stat span{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* --- Тосты и модалки --- */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--surface2);border:1px solid var(--line-gold);color:var(--text);padding:10px 20px;border-radius:10px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toastIn .3s ease}
.toast.err{border-color:var(--danger);color:#f0aca4}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal-bg{position:fixed;inset:0;background:rgba(5,5,8,.7);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;max-width:860px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.modal-h{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-h h3{font-family:var(--font-d);font-weight:400;letter-spacing:.08em;font-size:17px;flex:1}
.modal-b{padding:18px 20px;overflow-y:auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.x{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px}
.x:hover{color:var(--gold);background:var(--bg2)}

/* ============ КОНСТРУКТОР ============ */
.builder{display:flex;height:calc(100vh - 53px);overflow:hidden}

/* Палитра блоков слева */
.palette{width:216px;min-width:216px;background:var(--bg2);border-right:1px solid var(--line);overflow-y:auto;padding:12px}
.palette h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:12px 4px 8px}
.palette h4:first-child{margin-top:0}
.pal-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;background:var(--surface);cursor:grab;font-size:13px;transition:all var(--tr);user-select:none}
.pal-item:hover{border-color:var(--line-gold);color:var(--gold2)}
.pal-item:active{cursor:grabbing}
.pal-item .ic{width:18px;text-align:center;color:var(--gold);font-size:14px}

/* Холст по центру */
.canvas-wrap{flex:1;overflow-y:auto;background:
  radial-gradient(700px 400px at 50% -10%,rgba(201,163,92,.05),transparent 60%),#0a0a0d;padding:26px 20px}
.canvas-frame{margin:0 auto;transition:max-width .3s ease;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55);min-height:400px}
.canvas-frame.desktop{max-width:1120px}
.canvas-frame.tablet{max-width:768px}
.canvas-frame.mobile{max-width:390px}
#canvas{min-height:400px}
.canvas-empty{padding:90px 30px;text-align:center;color:#999;font-size:15px}
.canvas-empty b{display:block;font-size:18px;color:#666;margin-bottom:8px}

/* Обёртка блока в редакторе */
.blk-wrap{position:relative;outline:1px dashed transparent;outline-offset:-1px;transition:outline-color .15s}
.blk-wrap:hover{outline-color:rgba(201,163,92,.55)}
.blk-wrap.sel{outline:2px solid #c9a35c;outline-offset:-2px}
.blk-wrap.drag-over-top{box-shadow:inset 0 4px 0 #c9a35c}
.blk-wrap.drag-over-bot{box-shadow:inset 0 -4px 0 #c9a35c}
.blk-tools{position:absolute;top:6px;right:6px;z-index:130;display:none;gap:4px;background:rgba(14,14,18,.94);border:1px solid var(--line-gold);border-radius:8px;padding:4px}
.blk-wrap:hover .blk-tools,.blk-wrap.sel .blk-tools{display:flex}
.blk-tools button{width:27px;height:27px;border-radius:6px;color:#cfc9ba;font-size:13px;display:flex;align-items:center;justify-content:center}
.blk-tools button:hover{background:#26262f;color:#e6c98a}
.blk-tools .drag{cursor:grab}
.blk-label{position:absolute;top:6px;left:6px;z-index:130;display:none;font-size:10px;letter-spacing:.08em;background:rgba(14,14,18,.94);color:var(--gold);border:1px solid var(--line-gold);border-radius:6px;padding:3px 8px;text-transform:uppercase}
.blk-wrap:hover .blk-label,.blk-wrap.sel .blk-label{display:block}
#dropHint{border:2px dashed rgba(201,163,92,.6);border-radius:8px;margin:8px 14px;padding:14px;text-align:center;color:#a08a5e;background:rgba(201,163,92,.06);font-size:13px}

/* Режим магнитной сетки */
.blk-wrap.grid-mode{outline:2px solid #c9a35c;outline-offset:-2px;user-select:none}
.blk-wrap.grid-mode::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  background-image:linear-gradient(rgba(201,163,92,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(201,163,92,.16) 1px,transparent 1px);
  background-size:20px 20px}
.blk-wrap.grid-mode .dl-c>*{outline:1px dashed rgba(201,163,92,.55);outline-offset:5px;cursor:grab;touch-action:none}
.blk-wrap.grid-mode .dl-c>*:active{cursor:grabbing}
.blk-wrap.grid-mode .blk-label{display:block;background:#c9a35c;color:#17130a}

/* Выдвижная панель настроек справа */
.drawer{width:0;min-width:0;background:var(--bg2);border-left:1px solid var(--line);overflow:hidden;transition:width .28s ease,min-width .28s ease;display:flex;flex-direction:column}
.drawer.open{width:330px;min-width:330px}
.drawer-h{display:flex;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line);gap:8px}
.drawer-h h3{flex:1;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-b{flex:1;overflow-y:auto;padding:15px;width:330px}
.drawer .field{margin-bottom:13px}
.drawer .field label{font-size:11px}
.color-field{display:flex;gap:8px;align-items:center}
.color-field input[type=color]{width:42px;height:36px;padding:2px;cursor:pointer;flex:none}
.color-field input[type=text]{flex:1}
.items-list .item-row{border:1px solid var(--line);border-radius:9px;padding:10px;margin-bottom:9px;background:var(--surface);position:relative}
.items-list .item-row .del-item{position:absolute;top:6px;right:6px;color:var(--muted);width:22px;height:22px;border-radius:5px;font-size:13px}
.items-list .item-row .del-item:hover{color:#f0aca4;background:#241416}
.items-list .item-row .field{margin-bottom:8px}
.items-list .item-row .field:last-child{margin-bottom:0}
.add-item{width:100%;border:1px dashed var(--line);border-radius:9px;padding:8px;color:var(--muted);font-size:13px}
.add-item:hover{color:var(--gold);border-color:var(--line-gold)}
.img-field{display:flex;gap:6px}
.img-field input{flex:1}
.img-thumb{margin-top:7px;max-width:100%;max-height:90px;border-radius:7px;border:1px solid var(--line);display:block}
.range-field{display:flex;align-items:center;gap:10px}
.range-field input[type=range]{flex:1;accent-color:var(--gold)}
.range-field output{width:44px;text-align:right;font-size:12px;color:var(--muted)}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px}
.seg button{flex:1;padding:6px 4px;font-size:12px;border-radius:6px;color:var(--muted)}
.seg button.on{background:var(--surface2);color:var(--gold)}

/* Верхняя панель конструктора */
.b-top{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.b-top input.title-in{width:210px;background:transparent;border-color:transparent;font-size:15px;padding:6px 8px}
.b-top input.title-in:hover,.b-top input.title-in:focus{border-color:var(--line)}
.device-seg{display:flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px}
.device-seg button{width:34px;height:28px;border-radius:6px;color:var(--muted);font-size:14px}
.device-seg button.on{background:var(--surface2);color:var(--gold)}
.device-seg button[disabled]{opacity:.35;pointer-events:none}
.b-top .grow{flex:1}
.savestate{font-size:12px;color:var(--muted);min-width:90px;text-align:right}

/* Галерея шаблонов */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px}
.tpl-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;cursor:pointer;background:var(--bg2);transition:all var(--tr)}
.tpl-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.tpl-prev{height:104px;display:flex;flex-direction:column;justify-content:center;padding:14px;gap:6px}
.tpl-prev .l1{height:10px;border-radius:3px;width:70%}
.tpl-prev .l2{height:6px;border-radius:3px;width:90%;opacity:.55}
.tpl-prev .l3{height:6px;border-radius:3px;width:55%;opacity:.4}
.tpl-prev .bt{height:14px;border-radius:4px;width:44%;margin-top:4px}
.tpl-card p{padding:9px 12px;font-size:12.5px;border-top:1px solid var(--line)}
.tpl-card p span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.tpl-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tpl-tabs button{padding:6px 13px;border-radius:20px;border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.tpl-tabs button.on{border-color:var(--gold);color:var(--gold)}

/* Галерея эффектов */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.fx-card{border:1px solid var(--line);border-radius:9px;padding:11px;cursor:pointer;font-size:12.5px;background:var(--bg2);transition:all var(--tr);text-align:center}
.fx-card:hover{border-color:var(--line-gold);color:var(--gold2)}
.fx-card.on{border-color:var(--gold);color:var(--gold);background:rgba(201,163,92,.07)}

/* Редактор кода */
.code-ta{font:12.5px/1.55 'SF Mono',Consolas,'Courier New',monospace;min-height:340px;white-space:pre;overflow:auto;background:#0a0a0d;tab-size:2}

/* Медиатека */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.media-cell{position:relative;border:1px solid var(--line);border-radius:9px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--bg2)}
.media-cell img{width:100%;height:100%;object-fit:cover;display:block}
.media-cell:hover{border-color:var(--gold)}
.media-cell .del{position:absolute;top:4px;right:4px;background:rgba(10,10,13,.85);border-radius:6px;width:22px;height:22px;color:#e0968f;font-size:12px;display:none;align-items:center;justify-content:center}
.media-cell:hover .del{display:flex}

/* Мобильная адаптация конструктора */
@media (max-width:900px){
  .builder{flex-direction:column;height:auto;overflow:visible}
  .palette{width:100%;min-width:0;display:flex;overflow-x:auto;overflow-y:hidden;padding:9px;border-right:0;border-bottom:1px solid var(--line);gap:6px}
  .palette h4{display:none}
  .pal-item{margin:0;flex:none}
  .drawer.open{position:fixed;right:0;top:0;bottom:0;z-index:120;width:min(330px,92vw);min-width:0;box-shadow:-20px 0 60px rgba(0,0,0,.6)}
  .canvas-wrap{padding:14px 8px}
  .b-top input.title-in{width:130px}
}
@media (max-width:600px){
  .appbar{padding:9px 12px;gap:8px}
  .logo{font-size:14px}
  .page{padding:18px 14px 40px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}