:root{
  --bg:#f4f7f4; --panel:#ffffff; --ink:#10252d; --muted:#6c7b81;
  --deep:#0f2d34; --deep2:#214c55; --line:#dbe4df; --accent:#a9d94d;
  --accent-soft:#eef7dd; --warn:#f08a63; --warn-soft:#fff0e9;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);font-size:16px}
body{display:flex}
button,input,select,textarea{font:inherit}
.sidebar{position:fixed;inset:0 auto 0 0;width:332px;background:#0d2931;color:#eef7f7;padding:34px 24px 24px;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.brand-logo{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:#173c45;border:2px solid #48646c}
.brand-top,.brand-bottom{font-size:29px;font-weight:800;line-height:.95}.brand-bottom{color:#a9d94d}
nav{display:flex;flex-direction:column;gap:10px}
.nav-btn{border:0;background:transparent;color:#eff7f7;text-align:left;padding:16px 17px;border-radius:10px;font-weight:700;font-size:18px;cursor:pointer}
.nav-btn:hover,.nav-btn.active{background:#274b54}
.user-badge{margin-top:auto;border-top:1px solid #38535a;padding-top:18px;display:flex;align-items:center;gap:10px}
.avatar{width:46px;height:46px;border-radius:50%;background:#dff3a6;color:#33580f;display:grid;place-items:center;font-weight:800}
.user-name{font-size:12px;font-weight:700;line-height:1.2}.user-role{font-size:15px;color:#b8d4d7;margin-top:3px}
.main{margin-left:332px;width:calc(100% - 332px);padding:38px;min-height:100vh}
.hero{position:relative;background:linear-gradient(100deg,#12343c,#2f626b);color:white;border-radius:18px;padding:25px 40px 36px;min-height:315px;overflow:hidden;box-shadow:0 12px 30px rgba(14,45,52,.10);display:flex;align-items:center;justify-content:center;text-align:center;margin-bottom:20px}
.hero-title-small{position:absolute;top:24px;left:0;right:0;font-size:24px;letter-spacing:4px;font-weight:800;color:#c7d9d9}
.hero-title{font-size:38px;font-weight:800;line-height:1.35;margin-top:35px}
.hero-emblem{position:absolute;right:55px;top:70px;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;font-size:68px;background:radial-gradient(circle,#224e58,#102e36);border:6px solid #91b33e;box-shadow:0 0 0 5px #152e35}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:18px 0}
.kicker{font-size:13px;letter-spacing:2px;color:#7d9446;text-transform:uppercase}
h1.page-title{font-size:34px;margin:6px 0 0}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:white;color:var(--ink);padding:11px 16px;border-radius:9px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(.98)}.btn.primary{background:var(--deep);border-color:var(--deep);color:white}.btn.accent{background:var(--accent);border-color:var(--accent);color:#17310d}.btn.danger{border-color:#f0b5a0;color:#b94f2d;background:#fff}
.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px}
.notice{background:var(--accent-soft);border:1px solid #dbe7bf;border-radius:14px;padding:18px;margin:18px 0;color:#5b702d}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.metric{padding:22px}.metric .num{font-size:34px;font-weight:800;margin:7px 0}.metric small{color:var(--muted)}
.critical{background:linear-gradient(100deg,#163943,#214c55);color:white;border-radius:16px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;margin:18px 0}
.critical .big{font-size:25px;font-weight:800}.critical .big b{color:#b6ef57}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cat{background:linear-gradient(#fbfff8,#f5f9ed);min-height:180px;border:1px solid #dbe8c9;border-radius:14px;padding:26px;display:flex;flex-direction:column}.cat h3{font-size:23px;margin:0 0 15px}.cat p{color:var(--muted);line-height:1.5}.cat button{margin-top:auto;align-self:flex-start;border:0;background:transparent;color:#61872c;font-weight:800;cursor:pointer}
.toolbar{display:grid;grid-template-columns:1fr 160px 160px auto;gap:12px;margin:18px 0}
.toolbar input,.toolbar select,.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 13px;background:white;color:var(--ink)}
.table-wrap{overflow:auto;background:white;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:980px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid #e8eeea;vertical-align:middle}th{font-size:13px;color:#7b8a8e;text-transform:uppercase;letter-spacing:1px}td{font-size:14px}
.qty-ok,.qty-low{display:inline-block;border-radius:7px;padding:5px 8px;font-weight:800}.qty-ok{background:#eaf5df;color:#64803f}.qty-low{background:var(--warn-soft);color:#d66c45}
.photo-thumb{width:58px;height:58px;object-fit:cover;border-radius:9px;border:1px solid var(--line);background:#edf4ea}.photo-placeholder{width:58px;height:58px;border-radius:9px;background:#eaf2e4;display:grid;place-items:center;color:#64823c;font-weight:800}
.row-actions{display:flex;flex-direction:column;gap:6px}
.row-actions .btn{padding:7px 10px;font-size:13px}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.person{background:white;border:1px solid var(--line);border-radius:14px;padding:20px}.person-avatar{width:48px;height:48px;border-radius:11px;background:#e7f1df;color:#55792c;display:grid;place-items:center;font-weight:900;margin-bottom:15px}.person h3{font-size:20px;margin:0 0 8px}.person p{color:var(--muted);margin:0;line-height:1.45}
.offers{display:grid;grid-template-columns:minmax(420px,1fr) minmax(520px,1fr);gap:20px;align-items:start}.offers .card{min-width:0}.offers h3{font-size:22px;margin:0 0 20px}.offer-table{font-size:16px}.offer-table th{font-size:14px}.offer-table td{font-size:16px;line-height:1.45}.offer-table .employee{font-weight:700}
.form{display:grid;gap:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:#617074}.field small{color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(9,25,30,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:white;border-radius:16px;max-width:900px;width:100%;max-height:90vh;overflow:auto;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.modal h2{font-size:28px;margin:2px 0 20px}.x{border:0;background:transparent;font-size:24px;cursor:pointer}
.photo-list{display:flex;gap:12px;flex-wrap:wrap}.photo-item{position:relative}.photo-item img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.photo-item button{position:absolute;right:4px;bottom:4px}
.lock{position:fixed;z-index:500;inset:0;background:#0d2931;display:grid;place-items:center}.lock.hidden{display:none}.lock-card{background:white;width:min(520px,90vw);padding:34px;border-radius:18px;text-align:center}.lock-card input{width:100%;padding:13px;border:1px solid var(--line);border-radius:8px;margin:12px 0}.logo-round{font-size:50px}.error{color:#b94f2d;margin-top:10px;font-weight:700}
.empty{padding:35px;text-align:center;color:var(--muted)}
@media(max-width:1200px){.sidebar{width:270px}.main{margin-left:270px;width:calc(100% - 270px)}.hero-emblem{opacity:.25}.hero-title{font-size:32px}.offers{grid-template-columns:1fr}.people,.grid-3,.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){body{display:block}.sidebar{position:static;width:100%;height:auto}.main{margin:0;width:100%;padding:18px}.hero{min-height:250px}.hero-title{font-size:25px}.grid-2,.grid-3,.cat-grid,.people,.form-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.user-badge{margin-top:20px}}