/* Общие стили интерфейса формы и админки ASFP КП */
:root{
  --bg:#EAF1F6;--paper:#FBFDFF;--card:#FFFFFF;--ink:#131A2D;--ink-2:#3C4658;--muted:#7A8699;
  --hairline:#E2E9F1;--hairline-2:#EEF3F8;--accent:#1DE9B6;--accent-deep:#00BFA5;--accent-ink:#063D34;
  --blue:#2979FF;--mint-soft:#E3FBF4;--danger:#E5484D;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,'Segoe UI',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.font-d{font-family:'Onest',sans-serif;}
a{color:var(--accent-deep);}

.topbar{background:linear-gradient(120deg,#131A2D,#1B2740 60%,#13313A);color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;top:0;z-index:50;}
.topbar .brand{display:flex;align-items:center;gap:12px;}
.topbar .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));display:flex;align-items:center;justify-content:center;}
.topbar .mark svg{width:19px;height:19px;}
.topbar .logo-img{height:30px;width:auto;display:block;object-fit:contain;}
.topbar .divider{width:1px;height:26px;background:rgba(255,255,255,.18);flex-shrink:0;}
.topbar .t{font-family:'Onest';font-weight:700;font-size:16px;letter-spacing:-0.01em;}
.topbar .s{font-size:11px;opacity:.65;}
.topbar nav a{color:rgba(255,255,255,.8);text-decoration:none;font-size:13px;font-weight:600;margin-left:18px;}
.topbar nav a:hover{color:var(--accent);}

.wrap{max-width:880px;margin:0 auto;padding:26px 18px 80px;}
.hidden{display:none!important;}
.login{max-width:420px;margin:56px auto;}
.pw-wrap{position:relative;}
.pw-input{font-size:15px!important;padding:11px 44px 11px 13px!important;letter-spacing:.04em;}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:6px;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.pw-eye svg{width:19px;height:19px;}
.pw-eye:hover{color:var(--ink-2);background:var(--hairline-2);}
.pw-eye.on{color:var(--accent-deep);}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:22px 22px;margin-bottom:16px;}
.card>h2{font-size:17px;font-weight:600;letter-spacing:-0.01em;margin-bottom:4px;}
.card>.hint{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.section-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:var(--mint-soft);color:var(--accent-deep);font-family:'Onest';font-weight:700;font-size:12px;margin-right:9px;}

label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.req-star{color:var(--danger);}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--hairline);border-radius:9px;font:inherit;font-size:14px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(0,191,165,.12);}
textarea{resize:vertical;min-height:74px;line-height:1.5;}
.row{display:grid;gap:14px;margin-bottom:14px;}
.row.c2{grid-template-columns:1fr 1fr;}
.row.c3{grid-template-columns:1fr 1fr 1fr;}
.row:last-child{margin-bottom:0;}
.field{min-width:0;}

.seg{display:inline-flex;background:var(--hairline-2);border-radius:10px;padding:3px;gap:3px;}
.seg button{border:none;background:none;padding:8px 14px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .15s;}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px -2px rgba(19,26,45,.2);}

.tiergrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.tierbox{border:1px solid var(--hairline);border-radius:13px;padding:15px;background:var(--paper);}
.tierbox.feat{border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(0,191,165,.08);}
.tierbox h4{font-size:14px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.tierbox h4 .tag{font-size:9.5px;font-weight:700;color:var(--accent-deep);background:var(--mint-soft);padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;}
.tierbox label{font-size:11px;margin-top:10px;}
.tierbox label:first-of-type{margin-top:0;}

.items-table{width:100%;border-collapse:collapse;}
.items-table th{font-size:11px;color:var(--muted);text-align:left;font-weight:600;padding:0 6px 8px;}
.items-table th.p{text-align:right;}
.items-table td{padding:0 4px 8px;vertical-align:top;}
.items-table input{padding:8px 9px;font-size:13px;}
.items-table .p input{text-align:right;}
.icon-btn{border:1px solid var(--hairline);background:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:18px;display:flex;align-items:center;justify-content:center;}
.icon-btn:hover{border-color:var(--danger);color:var(--danger);}
.btn-add{margin-top:6px;background:var(--mint-soft);color:var(--accent-ink);border:none;padding:9px 16px;border-radius:9px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.btn-add:hover{background:#d2f6ec;}

.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--hairline);border-radius:10px;padding:11px 13px;cursor:pointer;transition:border-color .15s,background .15s;}
.check:hover{border-color:var(--accent-deep);}
.check.on{border-color:var(--accent-deep);background:var(--mint-soft);}
.check input{margin-top:2px;accent-color:var(--accent-deep);width:16px;height:16px;flex-shrink:0;}
.check .cl{font-size:12px;font-weight:600;}
.check .ct{font-size:11.5px;color:var(--muted);}

.examples-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px;}
.examples-preview .ex{aspect-ratio:4/3;border-radius:9px;overflow:hidden;border:1px solid var(--hairline);background:#1B2740;position:relative;}
.examples-preview .ex img{width:100%;height:100%;object-fit:cover;}
.examples-preview .ex .cap{position:absolute;left:0;right:0;bottom:0;font-size:9px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:10px 6px 4px;}
.examples-empty{font-size:12px;color:var(--muted);margin-top:8px;}
.ex-pick{display:block;cursor:pointer;}
.ex-pick input{position:absolute;opacity:0;width:0;height:0;}
.ex-pick .ex{transition:opacity .15s,filter .15s,box-shadow .15s;}
.ex-pick input:not(:checked) ~ .ex{opacity:.4;filter:grayscale(.7);}
.ex-pick input:checked ~ .ex{box-shadow:0 0 0 2px var(--accent-deep);}
.ex-tick{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:var(--accent-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.ex-pick input:not(:checked) ~ .ex .ex-tick{display:none;}

.drop{border:1.5px dashed var(--hairline);border-radius:11px;padding:18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--paper);}
.drop:hover{border-color:var(--accent-deep);background:var(--mint-soft);}
.drop.has{border-style:solid;border-color:var(--accent-deep);padding:0;overflow:hidden;position:relative;}
.drop-del{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(19,26,45,.72);color:#fff;border:none;cursor:pointer;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .15s;z-index:2;}
.drop-del:hover{background:var(--danger);}
.drop .ph{font-size:12.5px;color:var(--muted);}
.drop .ph b{color:var(--accent-deep);}
.drop img{width:100%;max-height:160px;object-fit:cover;display:block;}
.drop input{display:none;}

.actions{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:18px 0 0;display:flex;gap:12px;align-items:center;}
.btn{border:none;border-radius:11px;padding:14px 26px;font:inherit;font-size:15px;font-weight:700;font-family:'Onest';cursor:pointer;transition:transform .15s,box-shadow .15s;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:var(--accent-ink);box-shadow:0 10px 24px -10px rgba(0,191,165,.7);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-ghost{background:#fff;border:1px solid var(--hairline);color:var(--ink-2);}

.result{background:linear-gradient(135deg,#131A2D,#13313A);color:#fff;border-radius:16px;padding:24px;margin-bottom:16px;display:none;}
.result.show{display:block;}
.result h3{font-size:18px;margin-bottom:6px;}
.result .url{display:flex;gap:8px;margin-top:14px;}
.result .url input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;}
.result .url button{white-space:nowrap;background:var(--accent);color:var(--accent-ink);border:none;border-radius:9px;padding:0 16px;font-weight:700;cursor:pointer;font-family:'Onest';}
.result .links{margin-top:12px;display:flex;gap:14px;font-size:13px;}
.result .links a{color:var(--accent);font-weight:600;text-decoration:none;}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;opacity:0;transition:all .25s;z-index:100;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:680px){
  .row.c2,.row.c3,.tiergrid,.checks{grid-template-columns:1fr;}
  .examples-preview{grid-template-columns:repeat(2,1fr);}
  .wrap{padding:18px 12px 80px;}
}