/* ===== LiteMeet MaMITs — redesign (same-to-same as reference) ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
button{font-family:inherit}
input{font-family:inherit}
a{color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:9px}

:root{
  --bg:#0b1120; --bg2:#0f172a; --surface:#141d31; --surface2:#1e293b; --surface3:#27344b;
  --border:#243150; --text:#e8eef9; --muted:#94a6c4; --faint:#5f7395;
  --primary:#6366f1; --primary2:#3b82f6; --green:#22c55e; --red:#ef4444; --amber:#f59e0b;
  --glass:rgba(16,23,40,.72); --scroll:#2b3a59;
  --grad:linear-gradient(135deg,var(--primary),var(--primary2));
  --mono:'Space Grotesk',ui-monospace,monospace;
  transition:background .45s ease, color .45s ease;
}
[data-theme="light"]{
  --bg:#eaeefb; --bg2:#f4f7fe; --surface:#ffffff; --surface2:#f1f5fc; --surface3:#e6ecf8;
  --border:#e2e8f4; --text:#101935; --muted:#5a6b8c; --faint:#94a3bd;
  --green:#16a34a; --red:#e23b3b; --amber:#d97706;
  --glass:rgba(255,255,255,.78); --scroll:#cbd6ec;
}

/* ===== keyframes (exact from reference) ===== */
@keyframes lmScreenIn{from{transform:translateY(16px) scale(.995);opacity:.4}to{transform:none;opacity:1}}
@keyframes lmSheetUp{from{transform:translateY(40px)}to{transform:translateY(0)}}
@keyframes lmSheetPop{from{transform:translateY(36px) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes lmFade{from{opacity:0}to{opacity:1}}
@keyframes lmTileIn{from{transform:scale(.93) translateY(8px)}to{transform:none}}
@keyframes lmItemUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes lmFloat{0%{opacity:0;transform:translateY(10px) scale(.5)}12%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-240px) scale(1.15)}}
@keyframes lmRing{0%,100%{box-shadow:0 0 0 0 var(--green)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 32%,transparent)}}
@keyframes lmRecPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 70%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes lmSheen{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes lmBlob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.12)}66%{transform:translate(-30px,25px) scale(.92)}}
@keyframes lmSpin{to{transform:rotate(360deg)}}
@keyframes lmPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes lmToastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes lmDot{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes lmChatPop{from{transform:translateY(20px) scale(.97);opacity:0}to{transform:none;opacity:1}}

/* ===== hover / press micro-interactions ===== */
.lm-prim{transition:transform .18s,filter .2s,box-shadow .25s}
.lm-prim:hover{filter:brightness(1.06);transform:translateY(-2px)}
.lm-prim:active{transform:translateY(0) scale(.97)}
.lm-icbtn{transition:transform .18s,background .25s,color .2s}
.lm-icbtn:hover{transform:translateY(-2px)}
.lm-link{transition:transform .18s,background .2s}
.lm-link:hover{transform:translateY(-2px)}
.lm-reccard{transition:transform .25s cubic-bezier(.34,1.3,.5,1),box-shadow .25s,border-color .25s}
.lm-reccard:hover{transform:translateY(-5px);box-shadow:0 18px 40px -20px rgba(0,0,0,.6);border-color:var(--primary)}

/* ===== top app bar ===== */
.topbar{display:flex;align-items:center;gap:12px;padding:16px 22px;background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.2px;font-size:17px;text-decoration:none;color:var(--text)}
.brand .mark{display:inline-flex;width:30px;height:30px;border-radius:9px;background:var(--grad);align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px -6px var(--primary)}
.brand .mark svg{width:17px;height:17px}
.nav-links{display:flex;gap:3px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.nav-links a{padding:7px 14px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;transition:all .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px -8px var(--primary)}
.sp{flex:1}
.topbar .who{font-size:13px;color:var(--muted)}
.topbar .who b{color:var(--text)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none}
.iconbtn svg{width:18px;height:18px}

/* ===== layout ===== */
.wrap{max-width:600px;margin:34px auto;padding:0 18px;display:flex;flex-direction:column;gap:20px}
.wrap.wide{max-width:680px}

/* ===== cards ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:26px;box-shadow:0 18px 50px -34px rgba(0,0,0,.7);animation:lmItemUp .5s .05s both}
.card.delay{animation-delay:.12s}
.card h2{margin:0;font-size:18px;font-weight:700}
.chead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ico{display:inline-flex;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;flex:0 0 auto}
.ico svg{width:18px;height:18px}
.ico.g{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.ico.p{background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary)}
.muted{color:var(--muted)}
.card p.muted{margin:0 0 16px;font-size:13.5px}
.faint{color:var(--faint)}
.mono{font-family:var(--mono)}

/* ===== inputs ===== */
input:not([type=color]):not([type=range]):not([type=file]),textarea{
  width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-size:14px;outline:none;transition:border-color .2s}
input:focus{border-color:var(--primary)}
input::placeholder{color:var(--faint)}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border:0;border-radius:13px;
  background:var(--grad);color:#fff;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;
  box-shadow:0 12px 26px -12px var(--primary);transition:transform .18s,filter .2s}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn svg{width:16px;height:16px}
.btn.green{background:var(--green);box-shadow:0 12px 26px -12px var(--green)}
.btn.primary{background:var(--primary);box-shadow:none}
.btn.red{background:var(--red);box-shadow:0 12px 26px -12px var(--red)}
.btn.ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border);box-shadow:none;font-size:13px;padding:0 16px}
.btn.block{width:100%}
.row{display:flex;gap:8px;align-items:center}

/* ===== pill chips ===== */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface2);padding:8px 13px;border-radius:20px;text-decoration:none;cursor:pointer;border:1px solid var(--border)}
.pill.grad{background:var(--grad);color:#fff;border-color:transparent}

/* ===== meetings list rows ===== */
.list{display:flex;flex-direction:column;gap:12px}
.item{display:flex;gap:13px;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:14px;animation:lmItemUp .45s both;flex-wrap:wrap}
.item .ico{width:38px;height:38px;border-radius:11px}
.item .meta{flex:1;min-width:160px}
.item .meta b{display:block;font-family:var(--mono);font-size:15px;letter-spacing:.5px}
.item .meta span{color:var(--muted);font-size:12.5px}

/* ===== chat history bubbles ===== */
.chist{display:flex;flex-direction:column;gap:12px}
.cmsg{display:flex;align-items:flex-end;gap:8px;animation:lmChatPop .34s both}
.cmsg .av{display:inline-flex;flex:0 0 auto;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;background:var(--grad)}
.cmsg .bub{max-width:80%;background:var(--surface2);color:var(--text);padding:9px 13px;border-radius:15px;border-bottom-left-radius:5px;box-shadow:0 2px 8px -4px rgba(0,0,0,.4)}
.cmsg .who{display:block;font-size:11px;font-weight:700;color:var(--primary);margin-bottom:2px;opacity:.9}
.cmsg .tx{font-size:13.5px;line-height:1.45;word-break:break-word}
.cmsg .tm{font-size:10.5px;color:var(--faint);margin-top:3px}
.empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:14px}
.plain{color:var(--primary);text-decoration:none;font-weight:700}

/* ===== recordings cards ===== */
.reccard{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;animation:lmItemUp .45s both;flex-wrap:wrap}
.reccard .thumb{position:relative;flex:0 0 auto;width:104px;height:64px;border-radius:12px;overflow:hidden;background:var(--grad);display:flex;align-items:center;justify-content:center}
.reccard .thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reccard .thumb .play{display:inline-flex;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);align-items:center;justify-content:center;color:#111;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:1;position:relative}
.reccard .thumb .play svg{width:16px;height:16px}
.reccard .info{flex:1;min-width:150px}
.reccard .info b{display:block;font-weight:700;font-size:15px;word-break:break-all}
.reccard .info span{font-size:12.5px;color:var(--muted)}
.reccard .acts{display:flex;gap:7px}
.reccard .acts button,.reccard .acts a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;text-decoration:none}
.reccard .acts .del{color:var(--red)}
.reccard .acts svg{width:16px;height:16px}
.reccard form{margin:0}

/* ===== login ===== */
.auth{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px;background:var(--bg)}
.blob{position:absolute;border-radius:50%;filter:blur(42px);z-index:0}
.blob.a{width:380px;height:380px;background:radial-gradient(circle,var(--primary),transparent 68%);opacity:.55;top:-90px;left:-60px;animation:lmBlob 14s ease-in-out infinite}
.blob.b{width:340px;height:340px;background:radial-gradient(circle,var(--primary2),transparent 68%);opacity:.5;bottom:-100px;right:-50px;animation:lmBlob 17s ease-in-out infinite reverse}
.authbox{position:relative;z-index:1;width:340px;max-width:90%;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:32px 28px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);animation:lmSheetPop .6s .1s both}
.authbox .head{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.authbox .mark{display:inline-flex;width:42px;height:42px;border-radius:13px;background:var(--grad);align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 24px -8px var(--primary);flex:0 0 auto}
.authbox .mark svg{width:22px;height:22px}
.authbox .ttl{font-size:20px;font-weight:800;letter-spacing:-.3px}
.authbox .sub{font-size:12px;color:var(--muted)}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 6px}
.authbox label:first-of-type{margin-top:0}
.foot{text-align:center;font-size:12px;color:var(--faint);margin-top:16px}
.foot a{color:var(--primary2);text-decoration:none}
.err{background:color-mix(in srgb,var(--red) 14%,transparent);border:1px solid color-mix(in srgb,var(--red) 34%,transparent);color:var(--red);padding:11px;border-radius:11px;font-size:13px;margin-bottom:8px}

/* ===== thank you ===== */
.ty{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px;background:var(--bg)}
.tybox{position:relative;z-index:1;max-width:460px;width:100%;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:44px 34px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);animation:lmSheetPop .55s .05s both}
.tybox .badge{width:96px;height:96px;border-radius:50%;margin:0 auto 24px;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px -10px color-mix(in srgb,var(--green) 70%,transparent);animation:lmPop .6s cubic-bezier(.2,1.4,.4,1) both}
.tybox .badge svg{width:48px;height:48px;color:#fff}
.tybox h1{font-size:28px;margin:0 0 8px;font-weight:800;letter-spacing:-.4px}
.tybox p{color:var(--muted);font-size:15px;margin:0 0 26px}

/* ===== toast ===== */
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);color:var(--text);padding:12px 18px;border-radius:14px;font-size:13.5px;font-weight:600;z-index:120;box-shadow:0 18px 44px -16px rgba(0,0,0,.7);animation:lmToastIn .3s}

@media(max-width:560px){
  .nav-links{order:3;width:100%;justify-content:center}
  .topbar .who{display:none}
}