:root{
  --bg:#E4E1DC; --page:#FDFCF9; --surface:#fff; --border:#E8E6E2; --divider:#C5C0BA;
  --tp:#151515; --tb:#3D3D3D; --ts:#717171;
  --blue:#0B3D91; --blue2:#17307a; --gold:#D4A843;
  --ok-bg:#E8FBCF; --ok-fg:#3D4826; --warn-bg:#FFF0DC; --warn-fg:#E47700;
  --info-bg:#DEE5F7; --info-fg:#3E54CE; --err-bg:#FDECEA; --err-fg:#C4433A; --neu-bg:#FDF9F2; --neu-fg:#7C746F;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter Tight',system-ui,sans-serif;background:var(--bg);color:var(--tb);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
.hide{display:none!important}
#login{min-height:100vh;display:grid;place-items:center;padding:22px}
.login-card{background:var(--page);border-radius:24px;padding:38px 34px;width:100%;max-width:390px;box-shadow:0 18px 50px rgba(0,0,0,.1);border:.5px solid var(--border)}
.login-card .mark{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-weight:700;font-size:20px;color:var(--gold);background:linear-gradient(135deg,var(--blue),var(--blue2));border:1px solid rgba(212,168,67,.5);margin-bottom:18px}
.login-card h1{font-size:20px;color:var(--tp);margin-bottom:4px}
.login-card p{font-size:13px;color:var(--ts);margin-bottom:22px}
label.f{display:block;font-size:12px;font-weight:600;color:var(--tb);margin:14px 0 6px}
.inp{width:100%;border:.5px solid var(--border);background:#fff;border-radius:10px;padding:11px 13px;font-size:13.5px;color:var(--tp)}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,61,145,.1)}
textarea.inp{min-height:170px;line-height:1.55;resize:vertical}
.btn{all:unset;cursor:pointer;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.13s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{filter:brightness(1.13)}
.btn-gold{background:var(--gold);color:#2a2000}
.btn-ghost{background:#fff;border:.5px solid var(--border);color:var(--tb)}
.btn-ghost:hover{background:#F7F6F3}
.btn-danger{background:var(--err-bg);color:var(--err-fg)}
.btn-block{width:100%;justify-content:center;margin-top:20px}
.msg{font-size:12.5px;border-radius:10px;padding:10px 12px;margin-top:14px}
.msg.err{background:var(--err-bg);color:var(--err-fg)}
#app{max-width:1320px;margin:0 auto;height:100vh;display:grid;grid-template-columns:240px 1fr;background:var(--page);overflow:hidden}
@media(min-width:1340px){#app{border-radius:24px;height:calc(100vh - 32px);margin:16px auto;box-shadow:0 18px 50px rgba(0,0,0,.08);border:.5px solid var(--border)}}
.side{background:#0A0F1F;padding:18px 13px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 16px}
.brand .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:700;color:var(--gold);background:linear-gradient(135deg,var(--blue),var(--blue2));border:1px solid rgba(212,168,67,.5)}
.brand b{display:block;color:#fff;font-size:15px}
.brand span{font-size:11px;color:#8B94AB}
.nav{display:flex;flex-direction:column;gap:3px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;font-size:13.5px;color:#B9C1D4}
.nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.nav button.active{background:linear-gradient(135deg,rgba(11,61,145,.9),rgba(23,48,122,.85));color:#fff;box-shadow:inset 0 0 0 1px rgba(212,168,67,.35)}
.nav .sl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#5E6883;padding:15px 11px 5px}
.side .foot{margin-top:auto;padding:12px 8px 2px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#9AA3B8;display:flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.dot.off{background:#9AA3B8;box-shadow:none}
.main{display:flex;flex-direction:column;overflow:hidden}
.top{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:.5px solid var(--border);background:linear-gradient(180deg,#fff,#FBFAF7);flex-wrap:wrap}
.top h1{font-size:17px;color:var(--tp)}
.top p{font-size:12px;color:var(--ts)}
.top .sp{margin-left:auto}
.scroll{overflow:auto;padding:20px;flex:1}
.view{display:none}
.view.active{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.sh{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.sh h2{font-size:17px;color:var(--tp)}
.sh span{font-size:12px;color:var(--ts)}
.rule{height:.5px;background:var(--border);margin-bottom:15px}
.grid{display:grid;gap:12px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
.card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r);padding:15px}
.kpi .l{font-size:12px;color:var(--ts)}
.kpi .v{font-size:27px;font-weight:600;color:var(--tp);letter-spacing:-.02em;margin-top:5px}
.kpi .d{font-size:12px;margin-top:4px}
.up{color:#3F7A2A}.down{color:var(--err-fg)}
.two{grid-template-columns:1.55fr 1fr}
@media(max-width:960px){.two{grid-template-columns:1fr}}
.ch{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ch h3{font-size:15px;color:var(--tp)}
.ch .m{margin-left:auto;font-size:12px;color:var(--ts)}
.item{display:flex;gap:11px;padding:11px 0;border-top:.5px solid var(--border)}
.item:first-of-type{border-top:0}
.th{width:44px;height:44px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;font-size:17px;background:linear-gradient(135deg,#DEE5F7,#C7D2F0);color:#31417a}
.th.g2{background:linear-gradient(135deg,#F6E9CE,#EAD39C);color:#7a5f10}
.th.g3{background:linear-gradient(135deg,#DDF3E6,#BFE6CF);color:#2c6b45}
.th.g4{background:linear-gradient(135deg,#FBE3DF,#F1C9C0);color:#8a4437}
.item .b{flex:1;min-width:0}
.item .b strong{display:block;font-size:13.5px;color:var(--tp)}
.item .b p{font-size:12.5px;color:var(--ts);margin-top:2px}
.pill{font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;display:inline-block}
.p-ok{background:var(--ok-bg);color:var(--ok-fg)}.p-warn{background:var(--warn-bg);color:var(--warn-fg)}
.p-info{background:var(--info-bg);color:var(--info-fg)}.p-neu{background:var(--neu-bg);color:var(--neu-fg)}
.p-err{background:var(--err-bg);color:var(--err-fg)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal .dw{font-size:11px;text-transform:uppercase;color:var(--ts);text-align:center;padding:3px 0;letter-spacing:.08em}
.day{min-height:88px;border:.5px solid var(--border);border-radius:10px;padding:6px;background:#fff}
.day .n{font-size:12px;color:var(--ts);font-weight:600}
.day.today{border-color:var(--blue);background:#FAFBFF}
.day.mute{background:#FAF9F6;opacity:.55}
.ev{font-size:10.5px;border-radius:7px;padding:4px 6px;margin-top:4px;line-height:1.3;font-weight:500;background:linear-gradient(90deg,#DEE5F7,#FBE7F0);color:#533a6f;cursor:pointer}
.ev.ok{background:var(--ok-bg);color:var(--ok-fg)}
.ev.warn{background:var(--warn-bg);color:var(--warn-fg)}
@media(max-width:820px){.cal{grid-template-columns:repeat(2,1fr)}.cal .dw{display:none}}
.composer{display:grid;grid-template-columns:1.15fr .85fr;gap:15px}
@media(max-width:960px){.composer{grid-template-columns:1fr}}
.field{margin-bottom:14px}
.field>label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.hint{font-size:11px;color:var(--ts);margin-top:5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:7px;border:.5px solid var(--border);border-radius:10px;padding:8px 11px;font-size:12.5px;background:#fff;cursor:pointer;user-select:none}
.chip.on{border-color:var(--blue);background:#F5F8FF;box-shadow:inset 0 0 0 1px rgba(11,61,145,.25)}
.chip .tk{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--divider);display:grid;place-items:center;font-size:10px;color:#fff}
.chip.on .tk{background:var(--blue);border-color:var(--blue)}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.ph{aspect-ratio:1;border-radius:10px;border:.5px solid var(--border);background-size:cover;background-position:center;cursor:pointer;position:relative;background-color:#eef}
.ph.sel{outline:2.5px solid var(--gold);outline-offset:-2px}
.ph.sel:after{content:"\2713";position:absolute;top:4px;right:4px;background:var(--gold);color:#2a2000;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
.preview{border:.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.pvh{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:.5px solid var(--border)}
.pvh .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue2));display:grid;place-items:center;color:var(--gold);font-weight:700}
.pvh b{font-size:13px;color:var(--tp);display:block}
.pvh span{font-size:11px;color:var(--ts)}
.pvm{height:140px;background:linear-gradient(135deg,#CFE0F2,#9FC0E6 55%,#F1D9A6);background-size:cover;background-position:center;display:grid;place-items:center;color:#33507a;font-size:12px}
.pvb{padding:12px 13px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;color:var(--tb)}
.inbox{display:grid;grid-template-columns:290px 1fr;border:.5px solid var(--border);border-radius:var(--r);overflow:hidden;min-height:430px}
@media(max-width:820px){.inbox{grid-template-columns:1fr}}
.threads{border-right:.5px solid var(--border);overflow:auto;max-height:560px;background:#FCFBF8}
.thread{padding:11px 13px;border-bottom:.5px solid var(--border);cursor:pointer}
.thread.active{background:#F2F6FF;box-shadow:inset 3px 0 0 var(--blue)}
.thread b{font-size:13px;color:var(--tp)}
.thread p{font-size:11.5px;color:var(--ts);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net{font-size:9.5px;padding:1px 6px;border-radius:20px;background:var(--info-bg);color:var(--info-fg);font-weight:600;margin-left:6px}
.net.ig{background:#FBE7F0;color:#A63C74}
.conv{padding:15px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.bub{max-width:78%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.5}
.bub.them{background:#F1F0EC;border-bottom-left-radius:4px;color:var(--tp)}
.bub.us{background:var(--blue);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.reply{display:flex;gap:8px;padding:11px 15px;border-top:.5px solid var(--border);background:#fff}
.reply input{flex:1}
.tblw{overflow:auto;border:.5px solid var(--border);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:540px}
th{font-size:12px;font-weight:500;color:var(--ts);text-align:left;padding:10px 12px;border-bottom:1px solid var(--divider)}
td{font-size:13px;padding:10px 12px;border-bottom:.5px solid var(--border)}
tr:last-child td{border-bottom:none}
.note{background:var(--info-bg);color:var(--info-fg);border-radius:12px;padding:13px 15px;font-size:12.5px;line-height:1.55}
.steps{counter-reset:s;display:grid;gap:10px}
.step{display:flex;gap:11px}
.step .n{counter-increment:s;width:25px;height:25px;border-radius:8px;background:var(--info-bg);color:var(--info-fg);display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto}
.step .n:before{content:counter(s)}
.step p{font-size:13px;line-height:1.5}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);opacity:0;transition:.32s;background:#0A0F1F;color:#fff;padding:12px 19px;border-radius:12px;font-size:13px;z-index:60;pointer-events:none;border:1px solid rgba(212,168,67,.4);max-width:88vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;background:rgba(10,15,31,.55);display:grid;place-items:center;padding:18px;z-index:70}
.modal .box{background:var(--page);border-radius:18px;padding:22px;width:100%;max-width:520px;max-height:86vh;overflow:auto}
@media(max-width:760px){
  #app{grid-template-columns:1fr;height:auto;min-height:100vh;border-radius:0}
  .side{flex-direction:row;overflow-x:auto;align-items:center}
  .brand{padding:0 10px 0 4px}.brand span{display:none}
  .nav{flex-direction:row}.nav .sl{display:none}.nav button{padding:9px 12px}.nav .lbl{display:none}
  .side .foot{display:none}
  .scroll{padding:15px}
}