/* ППА — Система контроля дел. Тёмная люкс-эстетика (гибрид A+C). */
:root{
  color-scheme:dark;
  --bg:#0A111C; --bg-2:#0D1626;
  --surface:#121D2E; --surface-2:#0F1A2B; --surface-3:#1A2A44;
  --panel:#121D2E;
  --border:rgba(255,255,255,.07); --border-2:#37455F;
  --line-gold:rgba(198,163,92,.26); --line-gold-soft:rgba(198,163,92,.12);
  --gold:#C6A35C; --gold-hi:#E6C887; --gold-dim:#8C7040; --gold-soft:rgba(198,163,92,.14);
  --accent:#C6A35C; --accent-soft:rgba(198,163,92,.14);
  --ink:#ECE4D2; --ink-2:#C4CDD6; --muted:#8C99AC; --faint:#63708A;
  --good:#6FA588; --good-bg:rgba(111,165,136,.14);
  --info:#63B3A0; --info-bg:rgba(99,179,160,.14);
  --crit:#CE7E7E; --crit-bg:rgba(206,126,126,.14);
  --warn:#C6A35C; --warn-bg:rgba(198,163,92,.15);
  --paper:#ECE3CD; --paper-2:#F4ECDA; --paper-edge:#CDBF9E; --paper-ink:#2B2519; --paper-ink2:#6B5F45; --paper-line:rgba(43,37,25,.14);
  --shadow:0 18px 44px -22px rgba(0,0,0,.7); --shadow-lg:0 36px 80px -30px rgba(0,0,0,.82);
  --radius:12px; --radius-sm:8px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sidebar-w:250px;
}
*{box-sizing:border-box}
html,body{margin:0; overflow-x:clip}
body{
  font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--ink-2); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60rem 34rem at 20% -12%, rgba(198,163,92,.08), transparent 60%),
    radial-gradient(52rem 40rem at 100% 110%, rgba(30,52,92,.20), transparent 62%),
    var(--bg);
  min-height:100vh;
}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.012em; color:var(--ink)}
button{font-family:inherit; cursor:pointer}
a{color:var(--gold-hi); text-decoration:none}
svg{stroke-width:1.6}
::selection{background:var(--gold); color:#0A111C}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ================= ВХОД ================= */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{width:100%; max-width:400px; background:linear-gradient(168deg,var(--paper-2),var(--paper) 60%); color:var(--paper-ink);
  border:1px solid var(--gold-dim); border-radius:8px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.login-card::after{content:""; position:absolute; inset:7px; border:1px solid rgba(140,112,64,.4); border-radius:4px; pointer-events:none}
.login-brand{display:flex; align-items:center; gap:13px; padding:28px 30px 0}
.login-brand .mark{width:42px;height:42px;flex:none;border:1px solid var(--gold-dim);border-radius:9px;display:grid;place-items:center;color:var(--gold-dim)}
.login-brand .mark svg{width:25px;height:25px;fill:none;stroke:currentColor}
.login-brand b{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--paper-ink); line-height:1.15}
.login-brand span{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-ink2); margin-top:3px}
.login-body{padding:22px 30px 8px; position:relative; z-index:1}
.login-body h1{font-family:var(--serif); font-size:22px; color:var(--paper-ink); margin-bottom:4px}
.login-body p{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--paper-ink2); margin:0 0 18px}
.login-field{margin-bottom:14px}
.login-field label{display:block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-ink2); margin-bottom:7px}
.login-field input{width:100%; font-family:var(--sans); font-size:16px; color:var(--paper-ink); background:rgba(255,255,255,.55);
  border:1px solid var(--paper-edge); border-radius:6px; padding:11px 13px; outline:none}
.login-field input:focus{border-color:var(--gold-dim); box-shadow:0 0 0 2px rgba(140,112,64,.2)}
.login-err{color:#9a2f2f; font-size:13px; min-height:18px; margin:2px 0 8px}
.login-foot{padding:6px 30px 26px; position:relative; z-index:1}
.login-foot .btn.primary{width:100%; justify-content:center; padding:13px}
.login-hint{margin-top:16px; font-size:11px; color:var(--paper-ink2); line-height:1.6; border-top:1px solid var(--paper-line); padding-top:12px}
.login-hint code{font-family:var(--mono); background:rgba(43,37,25,.08); padding:1px 5px; border-radius:3px}

/* ================= КАРКАС: сайдбар + основная ================= */
.shell{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}
.scrim{position:fixed; inset:0; background:rgba(5,9,16,.5); z-index:55; opacity:0; pointer-events:none; transition:.25s}
.scrim.show{opacity:1; pointer-events:auto}
.sidebar{background:rgba(8,13,22,.7); border-right:1px solid var(--line-gold); display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
.sb-brand{display:flex; align-items:center; gap:12px; padding:20px 20px; border-bottom:1px solid var(--line-gold)}
.sb-brand .mark{width:40px;height:40px;flex:none;border:1px solid var(--gold-line);border-radius:9px;display:grid;place-items:center;color:var(--gold);background:radial-gradient(circle at 50% 30%,#16233A,#0A111C)}
.sb-brand .mark svg{width:24px;height:24px;fill:none;stroke:currentColor}
.sb-brand b{font-family:var(--serif); font-weight:500; font-size:15.5px; color:var(--ink); line-height:1.15}
.sb-brand span{display:block; font-family:var(--mono); font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-top:3px; opacity:.85}
.sb-nav{flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.sb-nav .sb-label{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); padding:14px 12px 6px}
.sb-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; border:0; background:transparent; color:var(--muted);
  font-family:var(--sans); font-size:13.5px; font-weight:500; text-align:left; width:100%; transition:.18s; position:relative}
.sb-item svg{width:18px;height:18px;color:currentColor;flex:none}
.sb-item:hover{background:rgba(198,163,92,.06); color:var(--ink)}
.sb-item.on{background:linear-gradient(90deg,rgba(198,163,92,.16),rgba(198,163,92,.04)); color:var(--gold-hi)}
.sb-item.on::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--gold); border-radius:2px}
.sb-item .badge-n{margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600; background:var(--gold-soft); color:var(--gold-hi); border-radius:20px; padding:1px 7px; min-width:18px; text-align:center}
.sb-user{padding:14px 16px; border-top:1px solid var(--line-gold); display:flex; align-items:center; gap:11px}
.sb-user .ava{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold-line);color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-size:13px;flex:none}
.sb-user .u-name{font-size:13px; color:var(--ink); font-weight:500; line-height:1.2}
.sb-user .u-role{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.sb-user .logout{margin-left:auto; width:34px;height:34px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--muted);display:grid;place-items:center}
.sb-user .logout:hover{color:var(--crit); border-color:var(--border-2)}
.sb-user .logout svg{width:17px;height:17px}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center; gap:16px; padding:0 28px;
  background:rgba(10,17,28,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-gold)}
.topbar .burger{display:none; width:40px;height:40px;border-radius:8px;border:1px solid var(--border-2);background:transparent;color:var(--gold);place-items:center}
.topbar .burger svg{width:20px;height:20px}
.topbar h2{font-family:var(--serif); font-size:21px; font-weight:500; color:var(--ink)}
.topbar .spacer{flex:1}
.view-scroll{padding:30px 28px 80px; max-width:1240px; width:100%}

/* ================= ОБЩИЕ КОМПОНЕНТЫ ================= */
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.pagehead .who{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--muted)}
.pagehead .who b{color:var(--gold-hi); font-weight:600; font-style:normal; font-family:var(--mono); font-size:12px; letter-spacing:.06em}

.banner{display:flex; gap:13px; align-items:flex-start; border-left:1px solid var(--gold); padding:4px 0 4px 17px; margin-bottom:26px; line-height:1.55}
.banner svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:4px}
.banner div{font-family:var(--serif); font-style:italic; font-size:15.5px; color:var(--muted)}
.banner b{color:var(--gold-hi); font-weight:600; font-style:normal; font-family:var(--sans); font-size:13px}

.kpirow{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; margin-bottom:30px; background:var(--line-gold-soft); border:1px solid var(--line-gold-soft)}
.kpi{background:var(--panel); padding:19px 20px 17px; position:relative}
.kpi::before{content:""; position:absolute; left:0; top:15px; bottom:15px; width:2px; background:var(--_c,var(--gold))}
.kpi .klabel{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:12px}
.kpi .kval{font-family:var(--serif); font-size:37px; font-weight:400; line-height:1; color:var(--gold-hi)}
.kpi .kval small{font-size:16px; color:var(--muted); font-family:var(--serif)}
.kpi .ksub{font-size:11.5px; color:var(--muted); margin-top:8px}

.panel{background:var(--panel); border:1px solid var(--line-gold-soft); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:22px; overflow:hidden}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line-gold)}
.panel-h h3{font-family:var(--serif); font-size:18px; font-weight:500; display:flex; align-items:center; gap:11px; color:var(--ink)}
.panel-h h3::before{content:""; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex:none}
.panel-h h3 svg{color:var(--gold)}
.panel-h .hint{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.panel-b{padding:2px 0}
.panel-pad{padding:20px}

.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:14px 20px; background:var(--surface-2); border-bottom:1px solid var(--border)}
.search{position:relative; flex:1; min-width:190px}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted)}
.search input{width:100%; padding-left:35px}
select.sel, input.inp, textarea.inp{font-family:var(--sans); font-size:13.5px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border-2); border-radius:7px; padding:8px 11px; outline:none; transition:.2s}
select.sel option{background:var(--surface); color:var(--ink)}
input.inp::placeholder, textarea.inp::placeholder{color:var(--faint)}
select.sel:focus, input.inp:focus, textarea.inp:focus{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft)}

.tablewrap{overflow-x:auto}
table.tasks{width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px}
table.tasks th{text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line-gold); background:var(--surface-2); white-space:nowrap}
table.tasks td{padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:top}
table.tasks tr:last-child td{border-bottom:0}
tr.taskrow:hover{background:var(--surface-3)}
.proj{font-family:var(--serif); font-size:15px; font-weight:500; color:var(--ink); line-height:1.3}
.proj .case{display:block; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px; letter-spacing:.02em}
.tasktext{color:var(--ink-2); max-width:360px; line-height:1.55}
.assignee{white-space:nowrap; font-size:12.5px}
.avatar{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2)}
.ava-x{width:24px;height:24px;border-radius:50%;color:var(--gold);font-family:var(--serif);font-size:10px;display:grid;place-items:center;flex:none;border:1px solid var(--gold-line)}
.cell-dead{white-space:nowrap; font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink-2)}
.cell-dead.late{color:var(--crit)}
.cell-dead .qtr{font-family:var(--sans); color:var(--muted); font-size:12.5px}

.pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:5px; white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%}
.pill.done{background:var(--good-bg); color:var(--good)} .pill.done .dot{background:var(--good)}
.pill.inwork{background:var(--info-bg); color:var(--info)} .pill.inwork .dot{background:var(--info)}
.pill.overdue{background:var(--crit-bg); color:var(--crit)} .pill.overdue .dot{background:var(--crit)}
.pill.notstarted{background:var(--surface-3); color:var(--muted)} .pill.notstarted .dot{background:var(--muted)}
.pill.pending{background:var(--gold-soft); color:var(--gold-hi)} .pill.pending .dot{background:var(--gold)}
.badge{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--gold-soft); color:var(--gold-hi)}

.statussel{font-size:12px; padding:6px 9px; border-radius:6px}

.btn{border:1px solid var(--gold-line); background:transparent; color:var(--gold-hi); font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:11px 20px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; transition:.22s}
.btn:hover{background:var(--gold-soft); border-color:var(--gold)}
.btn svg{width:15px;height:15px}
.btn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border-color:var(--gold); color:#0A111C; box-shadow:0 6px 20px -8px rgba(198,163,92,.5)}
.btn.primary:hover{background:linear-gradient(180deg,#F0D8A2,var(--gold-hi)); color:#0A111C}
.btn.small{padding:7px 12px; font-size:10px; letter-spacing:.1em}
.btn.good{color:var(--good); border-color:var(--good)} .btn.good:hover{background:var(--good-bg)}
.rowacts{display:flex; gap:6px; align-items:center}
.iconbtn{width:32px;height:32px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--muted);display:grid;place-items:center;transition:.2s}
.iconbtn:hover{border-color:var(--gold-line); color:var(--gold-hi); background:var(--surface-3)}
.iconbtn svg{width:16px;height:16px}

.approve-card{display:flex; gap:18px; padding:18px 20px; border-bottom:1px solid var(--border); align-items:flex-start}
.approve-card:last-child{border-bottom:0}
.approve-card .ac-main{flex:1; min-width:0}
.approve-card .ac-proj{font-family:var(--serif); font-size:16px; font-weight:500; color:var(--ink); margin-bottom:5px}
.approve-card .ac-task{color:var(--ink-2); margin-bottom:11px; line-height:1.55}
.approve-card .ac-meta{display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted)}
.approve-card .ac-acts{display:flex; gap:8px; flex:none; align-self:center}

.cmt{margin-top:9px; font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--muted); line-height:1.5; display:none; max-width:520px}
.cmt.show{display:block}
.cmttoggle{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:none; border:0; padding:5px 0 0; display:inline-flex; align-items:center; gap:5px}
.cmttoggle:hover{color:var(--gold-hi)}
.cmttoggle svg{width:12px;height:12px}

.hgroup-h{display:flex; align-items:baseline; gap:14px; padding:13px 20px; background:var(--surface-2); border-bottom:1px solid var(--border); border-top:1px solid var(--border)}
.hgroup:first-child .hgroup-h{border-top:0}
.hgroup-h .hdate{font-family:var(--serif); font-weight:500; font-size:16px; color:var(--ink)}
.hgroup-h .hday{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.hgroup-h .hn{margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hgroup-h.thisweek .hdate{color:var(--gold-hi)}
.hitem{display:flex; gap:18px; padding:14px 20px; border-bottom:1px solid var(--border); align-items:flex-start}
.hitem:last-child{border-bottom:0}
.htime{font-family:var(--serif); font-weight:500; font-size:15px; min-width:52px; color:var(--gold); font-variant-numeric:tabular-nums}
.hbody{flex:1; min-width:0}
.hbody .hproj{font-family:var(--serif); font-size:15px; font-weight:500; color:var(--ink)}
.hbody .hdesc{color:var(--ink-2); font-size:12.5px; margin-top:3px; line-height:1.5}
.hbody .hcourt{font-size:11px; color:var(--muted); margin-top:6px; display:inline-flex; align-items:center; gap:6px}
.hbody .hcourt svg{color:var(--gold); width:13px; height:13px}

.apprv{padding:17px 20px; border-bottom:1px solid var(--border)}
.apprv:last-child{border-bottom:0}
.apprv .aph{font-family:var(--serif); font-size:16px; font-weight:500; color:var(--ink); margin-bottom:8px; display:flex; gap:11px; align-items:flex-start}
.apprv .aph svg{color:var(--gold); margin-top:3px; flex:none; width:16px; height:16px}
.apprv .apmeta{font-size:12px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; align-items:center}
.apprv .apmeta b{color:var(--ink); font-weight:500}

.audit-row{display:grid; grid-template-columns:150px 120px 1fr; gap:14px; padding:11px 20px; border-bottom:1px solid var(--border); font-size:12.5px; align-items:baseline}
.audit-row:last-child{border-bottom:0}
.audit-row .at{font-family:var(--mono); color:var(--muted); font-size:11px}
.audit-row .au{color:var(--ink); font-weight:500}
.audit-row .ad{color:var(--ink-2)}
.audit-act{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:4px; background:var(--gold-soft); color:var(--gold-hi)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.chart-bars{display:flex; flex-direction:column; gap:13px; padding:8px 2px}
.bar-row{display:grid; grid-template-columns:150px 1fr 40px; align-items:center; gap:13px; font-size:12.5px}
.bar-label{color:var(--ink-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{height:20px; background:var(--surface-3); border-radius:2px; overflow:hidden; display:flex}
.bar-seg{height:100%; transition:width .6s cubic-bezier(.4,0,.2,1)}
.bar-seg.done{background:var(--good)} .bar-seg.inwork{background:var(--info)} .bar-seg.overdue{background:var(--crit)} .bar-seg.notstarted{background:var(--border-2)}
.bar-val{text-align:right; font-family:var(--serif); font-weight:500; font-size:15px; color:var(--gold-hi); font-variant-numeric:tabular-nums}
.legend{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:16px 20px 2px}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:9px;height:9px;border-radius:2px}
.donutwrap{display:flex; align-items:center; gap:28px; padding:12px 6px; flex-wrap:wrap}
.donut{position:relative; width:158px; height:158px; flex:none}
.donut svg{transform:rotate(-90deg)}
.donut .center{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.donut .center b{font-family:var(--serif); font-size:33px; font-weight:400; display:block; line-height:1; color:var(--gold-hi)}
.donut .center span{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.donut-legend{display:flex; flex-direction:column; gap:10px; font-size:13px; min-width:170px}
.donut-legend .dl{display:flex; align-items:center; gap:10px}
.donut-legend i{width:10px;height:10px;border-radius:2px}
.donut-legend .dv{font-family:var(--serif); font-weight:500; font-size:16px; margin-left:auto; padding-left:14px; color:var(--gold-hi); font-variant-numeric:tabular-nums}
.donut-legend .dlab{color:var(--ink-2)}

.empty{padding:52px 20px; text-align:center; color:var(--muted); font-family:var(--serif); font-style:italic; font-size:16px}
.empty svg{width:30px;height:30px;opacity:.6;margin-bottom:12px;color:var(--gold)}

/* модалка = «бланк на бумаге» */
.modal-bg{position:fixed; inset:0; background:rgba(5,9,16,.66); backdrop-filter:blur(3px); z-index:100; display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:.25s}
.modal-bg.show{opacity:1; pointer-events:auto}
.modal{background:linear-gradient(168deg,var(--paper-2),var(--paper) 60%); color:var(--paper-ink); border:1px solid var(--gold-dim); border-radius:6px; box-shadow:var(--shadow-lg); width:100%; max-width:560px; max-height:90vh; overflow:auto; transform:translateY(12px); transition:.25s; position:relative}
.modal::after{content:""; position:absolute; inset:6px; border:1px solid rgba(140,112,64,.45); border-radius:3px; pointer-events:none}
.modal-bg.show .modal{transform:none}
.modal-h{padding:24px 28px 0; display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1}
.modal-h h3{font-family:var(--serif); font-size:22px; font-weight:500; color:var(--paper-ink)}
.modal-h p{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--paper-ink2); margin:6px 0 0}
.modal-b{padding:20px 28px; position:relative; z-index:1}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-ink2); margin-bottom:7px}
.field .inp, .field .sel{width:100%}
.modal .inp, .modal .sel, .modal textarea{background:rgba(255,255,255,.55); color:var(--paper-ink); border:1px solid var(--paper-edge); font-size:15px}
.modal .inp::placeholder, .modal textarea::placeholder{color:#9a8f77}
.modal .inp:focus, .modal .sel:focus, .modal textarea:focus{border-color:var(--gold-dim); box-shadow:0 0 0 2px rgba(140,112,64,.2)}
.modal .sel option{background:var(--paper-2); color:var(--paper-ink)}
.field textarea{resize:vertical; min-height:72px; line-height:1.55}
.modal-f{padding:16px 28px 22px; display:flex; gap:12px; justify-content:flex-end; border-top:1px solid var(--paper-line); position:relative; z-index:1}
.modal .btn{color:var(--paper-ink); border-color:var(--paper-edge)}
.modal .btn:hover{background:rgba(43,37,25,.06); border-color:var(--gold-dim)}
.modal .btn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border-color:var(--gold-dim); color:#241a06}
.modal .iconbtn{color:var(--paper-ink2)}
.modal .iconbtn:hover{background:rgba(43,37,25,.08); color:var(--paper-ink)}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-3); border:1px solid var(--gold-line); color:var(--ink); font-size:13px; padding:11px 20px; border-radius:8px; box-shadow:var(--shadow-lg); z-index:200; opacity:0; pointer-events:none; transition:.28s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ================= АДАПТИВ / ТЕЛЕФОН ================= */
@media(max-width:1040px){ .grid2{grid-template-columns:1fr} }
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed; z-index:60; width:270px; transform:translateX(-100%); transition:transform .28s; box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .topbar .burger{display:grid}
}
@media(max-width:760px){
  .topbar{padding:0 16px; gap:12px}
  .view-scroll{padding:22px 16px 70px}
  .subnav, .toolbar{padding:12px 16px}
  .toolbar .search, .toolbar .sel{flex:1 1 100%; min-width:0}
  /* таблицы задач → карточки */
  table.tasks{min-width:0}
  table.tasks thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  table.tasks, table.tasks tbody, table.tasks tr, table.tasks td{display:block; width:auto}
  table.tasks tr.taskrow{border:1px solid var(--line-gold-soft); border-radius:10px; margin:12px 16px; background:var(--surface-2)}
  table.tasks td{border-bottom:1px solid var(--border); padding:11px 15px}
  table.tasks tr.taskrow td:last-child{border-bottom:0}
  .tasktext{max-width:none}
  .statussel{width:100%}
  .rowacts{flex-wrap:wrap} .rowacts .btn{flex:1; justify-content:center; min-width:140px}
  .approve-card{flex-direction:column; gap:12px}
  .approve-card .ac-acts{align-self:stretch} .approve-card .ac-acts .btn{flex:1; justify-content:center}
  .iconbtn{width:40px;height:40px}
  select.sel, input.inp, textarea.inp, .statussel{font-size:16px}
  .audit-row{grid-template-columns:1fr; gap:3px}
}
@media(max-width:560px){
  .kpirow{grid-template-columns:1fr 1fr}
  .kpi .kval{font-size:30px}
  .topbar h2{font-size:18px}
  .bar-row{grid-template-columns:92px 1fr 34px}
}
@media(max-width:400px){ .kpirow{grid-template-columns:1fr} }