/* =========================================================================
   Система договорів — Назавжди молоді
   Дизайн-система сайту: фірмова палітра, товсті рамки, «поп»-тіні.
   ========================================================================= */

@font-face{ font-family:"Halvar Breitschrift"; font-weight:400; src:url("../fonts/HalvarBreitschrift-Regular.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Halvar Breitschrift"; font-weight:500; src:url("../fonts/HalvarBreitschrift-Medium.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Halvar Breitschrift"; font-weight:700; src:url("../fonts/HalvarBreitschrift-Bold.woff2") format("woff2"); font-display:swap; }

:root{
  --deep:#501A70; --violet:#770CB4; --sky:#A8C8F2; --orchid:#BD70EA;
  --mint:#C1E9C3; --lemon:#FCFEAD; --paper:#F5F5F5; --white:#FFFFFF;
  --font:"Halvar Breitschrift","Manrope",system-ui,sans-serif;
  --radius-lg:28px; --radius-md:18px; --radius-sm:10px;
  --border:3px solid var(--deep);
  --shadow:7px 7px 0 var(--deep); --shadow-sm:4px 4px 0 var(--deep);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--paper); color:var(--deep); font-family:var(--font); font-weight:500; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; }
img{ max-width:100%; display:block; }
a{ color:var(--violet); }
button{ font-family:inherit; cursor:pointer; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
[hidden]{ display:none !important; }
::selection{ background:var(--orchid); color:var(--deep); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.001ms !important; animation-duration:.001ms !important; } }

.container{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* ---------- typography ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); background:var(--lemon); border:2px solid var(--deep); padding:5px 12px 5px 10px; border-radius:999px; box-shadow:var(--shadow-sm); }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--violet); }
.h1{ font-weight:700; font-size:clamp(30px,4.6vw,52px); line-height:1.02; text-transform:uppercase; letter-spacing:-.01em; text-wrap:balance; }
.h2{ font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.1; text-transform:uppercase; text-wrap:balance; }
.h3{ font-weight:700; font-size:18px; line-height:1.2; text-transform:uppercase; }
.lede{ font-size:clamp(15px,1.4vw,18px); max-width:62ch; opacity:.85; text-wrap:pretty; }
.muted{ opacity:.7; }
.small{ font-size:13px; }
.mono{ font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase; padding:13px 24px; border-radius:999px; border:3px solid var(--deep); background:var(--deep); color:var(--paper); box-shadow:var(--shadow); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; white-space:nowrap; text-decoration:none; }
.btn:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--deep); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--deep); }
.btn-violet{ background:var(--violet); }
.btn-outline{ background:var(--paper); color:var(--deep); }
.btn-lemon{ background:var(--lemon); color:var(--deep); }
.btn-mint{ background:var(--mint); color:var(--deep); }
.btn-orchid{ background:var(--orchid); color:var(--deep); }
.btn-sky{ background:var(--sky); color:var(--deep); }
.btn-sm{ padding:8px 15px; font-size:12px; box-shadow:var(--shadow-sm); }
.btn-sm:hover{ box-shadow:6px 6px 0 var(--deep); }
.btn-xs{ padding:5px 11px; font-size:11px; border-width:2px; box-shadow:2px 2px 0 var(--deep); }
.btn-xs:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--deep); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }
.btn-danger{ background:var(--paper); color:var(--violet); border-style:dashed; }
.linkish{ background:none; border:0; padding:0; color:var(--violet); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:900; background:rgba(245,245,245,.9); backdrop-filter:blur(10px); border-bottom:3px solid var(--deep); }
.site-header .wrap{ display:flex; align-items:center; gap:16px; padding-top:12px; padding-bottom:12px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; color:var(--deep); }
.brand img{ height:34px; width:auto; }
.brand .tagline{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-left:3px solid var(--deep); padding-left:12px; line-height:1.15; }
.main-nav{ display:flex; gap:4px; flex-wrap:wrap; margin-left:auto; }
.main-nav button{ border:2px solid transparent; background:none; font-weight:700; font-size:13px; text-transform:uppercase; padding:8px 13px; border-radius:999px; position:relative; }
.main-nav button:hover{ border-color:var(--deep); background:var(--lemon); }
.main-nav button.active{ background:var(--deep); color:var(--paper); }
.main-nav .count{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; margin-left:4px; border-radius:999px; background:var(--orchid); color:var(--deep); font-size:11px; border:2px solid var(--deep); }
.main-nav button.active .count{ border-color:var(--paper); }
.user-box{ display:flex; align-items:center; gap:8px; }
.user-chip{ font-size:12px; font-weight:700; border:2px solid var(--deep); border-radius:999px; padding:6px 12px; background:var(--white); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-toggle{ display:none; }
@media (max-width:1080px){
  .menu-toggle{ display:inline-flex; margin-left:auto; }
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:3px solid var(--deep); padding:12px 24px 16px; flex-direction:column; }
  .main-nav.open{ display:flex; }
  .main-nav button{ text-align:left; padding:12px 14px; }
  .user-chip{ display:none; }
}
@media (max-width:520px){
  .brand .tagline{ display:none; }
  .brand img{ height:28px; }
  .site-header .wrap{ gap:8px; }
  .container{ padding:0 16px; }
  .menu-toggle, .user-box .btn{ padding:7px 11px; font-size:11px; box-shadow:2px 2px 0 var(--deep); }
}

/* ---------- layout ---------- */
main{ padding:36px 0 100px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.page-head .titles{ display:flex; flex-direction:column; gap:12px; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid{ display:grid; gap:18px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:1fr 1fr; }
@media (max-width:980px){ .grid-4{ grid-template-columns:1fr 1fr; } .grid-2{ grid-template-columns:1fr; } }
@media (max-width:520px){ .grid-4{ grid-template-columns:1fr; } }
.section{ margin-top:34px; }
.section-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }

.panel{ background:var(--white); border:var(--border); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-sm); }
.panel + .panel{ margin-top:18px; }
.panel.tint-lemon{ background:var(--lemon); }
.panel.tint-mint{ background:var(--mint); }
.panel.tint-sky{ background:var(--sky); }

/* stat tiles */
.stat{ border:var(--border); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; min-height:128px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .2s var(--ease), box-shadow .2s var(--ease); text-align:left; font:inherit; color:var(--deep); }
button.stat:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--deep); }
.stat .num{ font-size:46px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.stat .lbl{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.stat .hint{ font-size:12px; opacity:.75; }
.stat-lemon{ background:var(--lemon); } .stat-mint{ background:var(--mint); } .stat-sky{ background:var(--sky); } .stat-orchid{ background:var(--orchid); } .stat-paper{ background:var(--white); }
.stat .deco{ position:absolute; right:-14px; bottom:-14px; width:84px; opacity:.22; pointer-events:none; }

/* reminders list */
.remind-list{ display:flex; flex-direction:column; gap:10px; }
.remind-item{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:var(--white); border:var(--border); border-radius:var(--radius-sm); padding:12px 14px; }
.days{ min-width:74px; text-align:center; font-weight:700; border:2px solid var(--deep); border-radius:12px; padding:6px 8px; line-height:1.1; background:var(--lemon); }
.days b{ display:block; font-size:22px; }
.days small{ font-size:10px; text-transform:uppercase; }
.days.over{ background:var(--orchid); }
.remind-item .who{ font-weight:700; }
.remind-item .meta{ font-size:12px; opacity:.75; }
@media (max-width:640px){ .remind-item{ grid-template-columns:auto 1fr; } .remind-item .actions{ grid-column:1 / -1; } }

.empty{ border:3px dashed var(--deep); border-radius:var(--radius-md); padding:28px; text-align:center; opacity:.8; background:var(--white); }
.empty img{ width:46px; margin:0 auto 10px; }

/* ---------- toolbar / filters ---------- */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; background:var(--white); border:var(--border); border-radius:var(--radius-md); padding:14px 16px; }
.toolbar .field{ margin:0; min-width:150px; flex:1; }
.toolbar .field.grow{ flex:2.5; min-width:220px; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.chip{ border:2px solid var(--deep); background:var(--white); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; text-transform:uppercase; }
.chip.active{ background:var(--deep); color:var(--paper); }

/* ---------- table ---------- */
.table-wrap{ border:var(--border); border-radius:var(--radius-md); overflow:auto; background:var(--white); box-shadow:var(--shadow-sm); }
table.reg{ width:100%; border-collapse:collapse; font-size:14px; min-width:880px; }
table.reg th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; background:var(--deep); color:var(--paper); padding:12px 12px; position:sticky; top:0; white-space:nowrap; }
table.reg td{ padding:11px 12px; border-top:2px solid rgba(80,26,112,.14); vertical-align:middle; }
table.reg tr:hover td{ background:#FBFCE0; }
table.reg tr.att td{ background:rgba(252,254,173,.55); }
table.reg td.num{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.reg .name{ font-weight:700; min-width:210px; }
table.reg td.mono{ white-space:nowrap; }
table.reg .sub{ font-size:12px; opacity:.7; }
table.reg input[type=checkbox]{ width:18px; height:18px; accent-color:var(--violet); }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }

/* status badges */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border:2px solid var(--deep); border-radius:999px; padding:3px 10px; white-space:nowrap; background:var(--white); }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.st-draft{ background:var(--white); }
.st-sent{ background:var(--sky); }
.st-upcoming{ background:var(--sky); }
.st-active{ background:var(--mint); }
.st-expiring{ background:var(--lemon); }
.st-expired{ background:var(--orchid); }
.st-renewed{ background:var(--paper); opacity:.75; }
.st-terminated{ background:var(--paper); opacity:.6; text-decoration:line-through; }
.type-tag{ font-size:11px; font-weight:700; text-transform:uppercase; border-radius:6px; padding:2px 7px; border:2px solid var(--deep); white-space:nowrap; }
.type-media{ background:var(--sky); } .type-project{ background:var(--mint); } .type-ak{ background:var(--lemon); } .type-grant{ background:var(--orchid); }

.bulkbar{ position:sticky; bottom:16px; z-index:50; margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--deep); color:var(--paper); border-radius:999px; padding:10px 12px 10px 22px; box-shadow:var(--shadow-sm); }
.bulkbar .grow{ flex:1; font-weight:700; }

/* ---------- forms ---------- */
.field{ margin-bottom:16px; }
.field label, .label{ display:block; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px; }
.field input:not([type=checkbox]):not([type=radio]), .field textarea, .field select{ width:100%; border:3px solid var(--deep); border-radius:var(--radius-sm); padding:11px 13px; font-family:var(--font); font-size:15px; background:var(--white); color:var(--deep); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--violet); box-shadow:var(--shadow-sm); }
.field input[type=file]{ padding:10px; border-style:dashed; cursor:pointer; }
.field textarea{ resize:vertical; min-height:80px; }
.field .req{ color:var(--violet); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row.three{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:640px){ .field-row, .field-row.three{ grid-template-columns:1fr; } }
.helper{ font-size:12px; opacity:.7; margin-top:5px; }
.check{ display:flex; align-items:flex-start; gap:10px; font-weight:600; font-size:14px; cursor:pointer; margin-bottom:14px; }
.check input{ width:20px; height:20px; accent-color:var(--violet); flex-shrink:0; margin-top:1px; }
fieldset{ border:3px solid var(--deep); border-radius:var(--radius-md); padding:18px 18px 4px; margin:0 0 18px; background:var(--white); }
fieldset legend{ font-weight:700; text-transform:uppercase; font-size:13px; background:var(--lemon); border:2px solid var(--deep); border-radius:999px; padding:3px 12px; }
fieldset.minor{ background:#FDFDE6; }
.type-pick{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
@media (max-width:760px){ .type-pick{ grid-template-columns:1fr 1fr; } }
.type-pick label{ border:3px solid var(--deep); border-radius:var(--radius-sm); padding:12px; cursor:pointer; background:var(--white); font-weight:700; font-size:13px; text-transform:uppercase; display:flex; gap:8px; align-items:center; transition:transform .15s var(--ease); }
.type-pick label:hover{ transform:translateY(-2px); }
.type-pick input{ accent-color:var(--violet); }
.type-pick label.on{ background:var(--deep); color:var(--paper); box-shadow:var(--shadow-sm); }
.period-preview{ font-weight:700; background:var(--lemon); border:2px solid var(--deep); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; margin-bottom:16px; }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.warn-box{ background:var(--lemon); border:3px solid var(--deep); border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; margin-bottom:14px; }
.err-box{ background:var(--orchid); border:3px solid var(--deep); border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; font-weight:700; margin-bottom:14px; }

/* ---------- modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(80,26,112,.55); display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; z-index:1200; opacity:0; pointer-events:none; transition:opacity .2s var(--ease); overflow:auto; }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{ background:var(--paper); border:var(--border); border-radius:var(--radius-lg); max-width:780px; width:100%; padding:32px; box-shadow:var(--shadow); transform:translateY(16px); transition:transform .2s var(--ease); position:relative; }
.modal-box.narrow{ max-width:480px; }
.modal-overlay.open .modal-box{ transform:none; }
.modal-close{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; border:3px solid var(--deep); background:var(--white); font-weight:700; }
.modal-close:hover{ background:var(--lemon); }
.modal-title{ margin-bottom:18px; padding-right:48px; }
@media (max-width:600px){ .modal-box{ padding:24px 18px; } }

/* contract detail */
.detail-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px; margin-bottom:18px; }
@media (max-width:600px){ .detail-grid{ grid-template-columns:1fr; } }
.kv .k{ font-size:11px; text-transform:uppercase; font-weight:700; opacity:.65; letter-spacing:.05em; }
.kv .v{ font-weight:600; word-break:break-word; }
.timeline{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.timeline .t{ display:flex; gap:10px; align-items:center; font-size:14px; border:2px solid var(--deep); border-radius:var(--radius-sm); padding:8px 12px; background:var(--white); }
.timeline .t.cur{ background:var(--lemon); }
.steps{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 18px; }
.step{ display:flex; align-items:center; gap:6px; border:2px solid var(--deep); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; text-transform:uppercase; background:var(--white); opacity:.55; }
.step.done{ opacity:1; background:var(--mint); }
.step.now{ opacity:1; background:var(--lemon); }

/* ---------- login ---------- */
.auth-wrap{ min-height:calc(100vh - 70px); display:grid; place-items:center; padding:40px 16px; position:relative; overflow:hidden; }
.auth-card{ max-width:440px; width:100%; background:var(--white); border:var(--border); border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow); position:relative; z-index:2; }
.auth-card .mark{ width:60px; margin:0 auto 16px; }
.auth-card h1{ text-align:center; }
.auth-card .lede{ text-align:center; margin:10px auto 24px; font-size:14px; }
.float-shape{ position:absolute; width:180px; opacity:.5; z-index:1; pointer-events:none; }
.float-shape.a{ top:8%; left:6%; transform:rotate(-14deg); }
.float-shape.b{ bottom:6%; right:7%; width:220px; transform:rotate(10deg); }
@media (max-width:700px){ .float-shape{ display:none; } }

/* ---------- misc ---------- */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--deep); color:var(--paper); padding:13px 22px; border-radius:999px; font-weight:700; font-size:14px; box-shadow:var(--shadow-sm); opacity:0; pointer-events:none; transition:all .25s var(--ease); z-index:1400; max-width:calc(100vw - 32px); text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--violet); }
.code{ font-family:ui-monospace,Consolas,monospace; font-size:13px; background:var(--white); border:2px dashed var(--deep); border-radius:var(--radius-sm); padding:10px 12px; word-break:break-all; user-select:all; }
.list-plain{ margin:0; padding-left:18px; }
.list-plain li{ margin-bottom:4px; }
.inv-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; background:var(--white); border:var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px; }
.inv-row .meta{ font-size:12px; opacity:.75; }
@media (max-width:640px){ .inv-row{ grid-template-columns:1fr; } }
.report li{ margin-bottom:6px; }
.report .ok{ color:#1d6b2a; font-weight:700; }
.report .bad{ color:var(--violet); font-weight:700; }
.dropzone{ border:3px dashed var(--deep); border-radius:var(--radius-md); padding:30px; text-align:center; background:var(--white); transition:background .2s; }
.dropzone.over{ background:var(--lemon); }
.audit-table td{ font-size:13px; }
footer.app-footer{ border-top:3px solid var(--deep); padding:18px 0; font-size:12px; opacity:.8; }
footer.app-footer .container{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.spinner{ width:22px; height:22px; border:3px solid var(--deep); border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; display:inline-block; vertical-align:middle; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-block{ padding:40px; text-align:center; }
.section-sm{ margin-top:6px; }
.anketa{ max-width:860px; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.empty-img{ width:46px; margin:0 auto 10px; }
@media (max-width:760px){ .hide-sm{ display:none; } }

@media print{
  .site-header, .toolbar, .bulkbar, .row-actions, footer, .chips, .actions{ display:none !important; }
  .table-wrap{ box-shadow:none; border-width:1px; }
}