/* LiluCRM — styles ported from the liluCRM prototype panel (index.html) */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --sb:#1b2434; --sb-hover:#27334a; --accent:#2fb2f5; --accent-d:#1f8fe0;
  --bg:#eef2f7; --card:#ffffff; --line:#e1e7ef; --txt:#1f2733; --mut:#7d8899;
}
body{font-family:"Segoe UI",Inter,Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);
     display:flex;height:100vh;overflow:hidden;}
a{color:var(--accent-d)}
/* --- Sidebar --- */
.sb{width:236px;background:var(--sb);color:#93a0b5;display:flex;flex-direction:column;flex-shrink:0;}
.lg{display:flex;align-items:center;gap:11px;padding:20px 20px 22px;}
.lg .ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-d));
        display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;flex-shrink:0;overflow:hidden}
.lg .ic img{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block;background:#fff}
.lg b{color:#fff;font-size:15px;letter-spacing:.2px;}
.lg span{display:block;font-size:10.5px;color:#68758c;text-transform:uppercase;letter-spacing:.8px;}
.mn{padding:6px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.mn a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#93a0b5;
      text-decoration:none;font-size:13.5px;cursor:pointer;transition:.15s;}
.mn a:hover{background:var(--sb-hover);color:#dfe6f0;}
.mn a.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(47,178,245,.35);}
.mn a .i{width:18px;text-align:center;font-size:15px;}
.mn a .c{margin-left:auto;background:#324057;color:#a9b5c8;font-size:11px;padding:1px 7px;border-radius:20px;}
.mn a .c:empty{display:none}
.mn a.on .c{background:rgba(255,255,255,.25);color:#fff;}
.mn a .c.hot{background:#c0392b;color:#fff}
.sep{height:1px;background:#2a3547;margin:8px 22px;}
.bot{margin-top:auto;padding:14px 22px;font-size:11px;color:#5b6779;}
.bot form{display:inline}
.bot button{background:none;border:none;color:#93a0b5;cursor:pointer;font-size:11.5px;text-decoration:underline;padding:0}
/* --- Main --- */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.top{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
     gap:12px;padding:0 22px;flex-shrink:0;}
.srch{flex:1;max-width:420px;background:var(--bg);border-radius:9px;padding:9px 14px;font-size:13px;color:var(--mut);
      display:flex;align-items:center;gap:9px;}
.srch input{border:none;background:transparent;outline:none;font:13px "Segoe UI",Arial,sans-serif;color:#1f2733;width:100%}
.btn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:9px 16px;
     font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(47,178,245,.35);text-decoration:none;display:inline-block}
.btn:hover{background:var(--accent-d);}
.btn.ghost{background:#eef6ff;color:var(--accent-d);box-shadow:none;border:1px solid #cfe3f7}
.btn.ghost:hover{background:#e0f0ff}
.btn.danger{background:#e05d5d;box-shadow:none}
.top .sp{margin-left:auto}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7b61ff,#4a90ff);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;text-decoration:none;flex-shrink:0}
.live{font-size:11.5px;color:#00a06e;font-weight:600;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
/* --- Content --- */
.cnt{padding:20px 22px;overflow-y:auto;flex:1;}
.h1{font-size:19px;font-weight:700;margin-bottom:2px;}
.sub{font-size:12.5px;color:var(--mut);margin-bottom:18px;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
.st{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px;}
.st .k{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.st .v{font-size:22px;font-weight:700;}
.st .v.sm{font-size:19px;}
.st .s{font-size:11.5px;color:#7d8899;margin-top:5px}
.st .s button{border:none;background:#eef2f7;border-radius:6px;cursor:pointer;padding:0 7px;margin:0 3px;color:#5c6a7d}
.g{border-left:3px solid #00c48c;}
.b{border-left:3px solid #2fb2f5;}
.o{border-left:3px solid #ffab2e;}
/* --- Kanban --- */
.kb{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start;}
.col{background:#e6ebf2;border-radius:13px;padding:12px;min-height:130px;transition:.15s}
.col.over{outline:2px dashed #2fb2f5;outline-offset:-4px;background:#dbe6f3}
.ch{display:flex;align-items:center;gap:8px;padding:2px 4px 12px;font-size:12.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.4px;color:#5c6a7d;}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ch .n{margin-left:auto;background:#fff;border-radius:20px;padding:1px 9px;font-size:11px;color:#5c6a7d;}
.card{background:var(--card);border-radius:11px;padding:13px 14px;margin-bottom:10px;cursor:pointer;
      box-shadow:0 1px 3px rgba(31,39,51,.09);transition:.15s;border:1px solid transparent;}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(31,39,51,.14);border-color:#cfe3f7;}
.card.dragging{opacity:.45}
.card .id{font-size:11px;color:var(--mut);margin-bottom:5px;}
.card .tt{font-size:13.5px;font-weight:600;margin-bottom:9px;line-height:1.35;}
.card .cl{font-size:12px;color:#5c6a7d;margin-bottom:11px;}
.card .ft{display:flex;align-items:center;justify-content:space-between;
          border-top:1px solid var(--line);padding-top:9px;margin-top:9px}
.card .sum{font-size:14px;font-weight:700;}
.card .dt{font-size:11px;color:var(--mut);}
.card .acts{display:flex;gap:6px;margin-top:10px}
.card .acts button{flex:1;font-size:11.5px;padding:6px 4px;border-radius:7px;cursor:pointer;border:1px solid #cfe3f7;background:#eef6ff;color:#1f8fe0;font-weight:600}
.card .acts button:hover{background:#e0f0ff}
.card .acts button[data-act="paid"]{background:#e0f7ee;border-color:#bfeedc;color:#00a06e}
.card .acts button[data-act="paid"]:hover{background:#cdf1e2}
.card .acts button[data-act="unpaid"]{background:#fff2dd;border-color:#f6dcae;color:#c07d00}
.card .lnk{display:block;margin-top:8px;font-size:11.5px;color:#1f8fe0;text-decoration:none}
.tag{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;}
.t1{background:#e4f4ff;color:#1f8fe0;}
.t2{background:#fff2dd;color:#c07d00;}
.t3{background:#e0f7ee;color:#00a06e;}
.t4{background:#fde8e8;color:#c0392b}
.rd{font-size:11.5px;color:#c0392b;font-weight:600;padding:0 0 9px}
.thumb{width:100%;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
       margin:0 0 9px;cursor:zoom-in;transition:.15s;display:block;}
.thumb:hover{border-color:var(--accent);filter:brightness(1.03);}
.empty{font-size:12px;color:#97a3b4;text-align:center;padding:14px 0}
/* --- Modal --- */
.mk{position:fixed;inset:0;background:rgba(15,22,33,.55);display:none;align-items:center;justify-content:center;z-index:9000}
.mk.on{display:flex}
.mk .bx{background:#fff;border-radius:14px;max-width:600px;width:92%;max-height:86vh;overflow:auto;padding:22px 24px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.mk h3{margin:0 0 10px;font-size:17px;padding-right:36px}
.mk h4{margin:14px 0 6px;font-size:13px;color:#5c6a7d;text-transform:uppercase;letter-spacing:.4px}
.mk .x{float:right;border:none;background:#eef2f7;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:15px}
.mk .rw{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid #eef2f7;font-size:13px}
.mk .rw b{text-align:right;font-weight:600;word-break:break-word}
.mk .rm{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #eef2f7;cursor:pointer}
.mk .rm .n{font-weight:700;font-size:13px}
.mk .rm .c{font-size:12px;color:#7d8899}
.mk .rm .t{margin-left:auto;font-weight:700;white-space:nowrap}
.mk .it{padding:8px 0;border-bottom:1px solid #eef2f7;font-size:13px}
.mk .it .d{font-size:12px;color:#7d8899}
.mk .bar2{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.mk select,.mk input,.mk textarea{font:13px "Segoe UI",Arial,sans-serif;border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.mk label{display:block;font-size:12px;color:#5c6a7d;margin:8px 0 3px}
.mk .f{width:100%}
.warn{background:#fff4e5;border-left:3px solid #ffab2e;border-radius:8px;padding:11px 14px;font-size:12.5px;margin-bottom:10px}
.ok{background:#e0f7ee;border-left:3px solid #00c48c;border-radius:8px;padding:11px 14px;font-size:12.5px;margin-bottom:12px}
.err{background:#fde8e8;border-left:3px solid #e05d5d;border-radius:8px;padding:11px 14px;font-size:12.5px;margin-bottom:12px}
/* --- Viewer (lightbox) --- */
#vw{position:fixed;inset:0;background:rgba(12,17,26,.9);display:none;z-index:9999;
    flex-direction:column;align-items:center;justify-content:center;}
#vw.on{display:flex;}
#vw .bar{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;gap:8px;z-index:2;
        padding:0 16px;color:#e7eef7;font-size:13px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));}
#vw .bar .nm{margin-right:auto;font-weight:600;opacity:.92;}
#vw button{background:rgba(255,255,255,.12);color:#eaf2fb;border:1px solid rgba(255,255,255,.18);
           border-radius:8px;min-width:36px;height:36px;font-size:15px;cursor:pointer;}
#vw button:hover{background:rgba(255,255,255,.26);}
#vw .stage{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;}
#vw .stage.drag{cursor:grabbing;}
#vw img{max-width:none;max-height:none;transform-origin:center center;user-select:none;
        box-shadow:0 20px 60px rgba(0,0,0,.55);border-radius:6px;background:#fff;}
#vw .hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#93a2b6;font-size:11.5px;}
/* --- Forms (settings / users / auth) --- */
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px;max-width:980px}
.panel h2{font-size:15px;margin-bottom:12px}
.panel p.h{font-size:12px;color:var(--mut);margin:-6px 0 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 18px}
.fld label{display:block;font-size:12px;color:#5c6a7d;margin-bottom:4px}
.fld input[type=text],.fld input[type=password],.fld input[type=email],.fld input[type=number],.fld input[type=url],.fld select,.fld textarea{
  width:100%;font:13px "Segoe UI",Arial,sans-serif;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fbfcfe}
.fld textarea{min-height:90px}
.fld .hint{font-size:11.5px;color:var(--mut);margin-top:3px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0}
code.sel{user-select:all;background:#eef2f7;padding:3px 6px;border-radius:6px;font-size:12px;word-break:break-all}
table.tbl{border-collapse:collapse;width:100%;font-size:13px}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:middle}
table.tbl input,table.tbl select{font:13px "Segoe UI",Arial,sans-serif;border:1px solid var(--line);border-radius:7px;padding:5px 7px}
body.auth{align-items:center;justify-content:center;overflow:auto}
.authbox{background:#fff;border-radius:16px;padding:28px 30px;width:380px;max-width:94vw;box-shadow:0 20px 60px rgba(31,39,51,.15)}
.authbox .lg{padding:0 0 18px}
.authbox .lg b{color:var(--txt)}
.authbox .fld{margin-bottom:12px}
.authbox .btn{width:100%;margin-top:6px;padding:11px}
@media (max-width:1100px){ .kb{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  body{flex-direction:column;overflow:auto;height:auto}
  .sb{width:100%;flex-direction:row;flex-wrap:wrap}
  .mn{flex-direction:row;flex-wrap:wrap}
  .bot{display:none}
  .kb,.stats,.grid2,.grid3{grid-template-columns:1fr}
  .main{overflow:visible}
}
/* live updates (1.0.2) */
.btn.snd{padding:6px 10px;font-size:15px;line-height:1}
.card.fresh{animation:liluFresh 2.6s ease-out}
@keyframes liluFresh{0%{box-shadow:0 0 0 3px #2fb2f5,0 6px 18px rgba(47,178,245,.45)}100%{box-shadow:none}}
#toasts{position:fixed;right:18px;bottom:18px;z-index:9500;display:flex;flex-direction:column;gap:8px;max-width:340px}
#toasts .toast{background:#1f2a3a;color:#fff;border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.3);cursor:pointer;transition:opacity .4s,transform .4s}
#toasts .toast.out{opacity:0;transform:translateY(8px)}
#sessBanner{position:fixed;top:0;left:0;right:0;z-index:9800;background:#d9534f;color:#fff;text-align:center;padding:10px 14px;font-size:14px;font-weight:600}
#sessBanner a{color:#fff;text-decoration:underline;margin-left:8px}
.mk .upd{background:#fff6d5;border:1px solid #f0d77a;border-radius:8px;padding:8px 10px;margin:0 0 10px;font-size:12.5px}
.mk .upd button{margin-left:6px;border:none;background:#1f3a5f;color:#fff;border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px}
body.sess-expired .main{padding-top:40px}