/* Teamline CRM — design system (ported from the Timeline prototype) */
@import url('https://fonts.googleapis.com/css2?family=Suwannaphum:wght@400;700;900&display=swap');

:root{
  --ink:#16181b; --ink2:#5c656e; --muted:#8a929b; --bg:#eef1f4; --line:#dde2e7;
  --red:#c0392b; --green:#3f9c6b; --amber:#8a6d00; --blue:#3f6ec9;
  --kim:#c96a3f; --lee:#3f6ec9; --pat:#3f9c6b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#c9d2da;font-family:'Suwannaphum',serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
input,textarea,button{font-family:'Suwannaphum',serif}
button{cursor:pointer;border:none;background:none}

@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* the phone stage */
.stage{min-height:100vh;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px}
.phone{width:390px;max-width:100%;background:var(--bg);border-radius:44px;box-shadow:0 24px 60px rgba(30,40,50,.35);overflow:hidden;position:relative;display:flex;flex-direction:column;height:844px;max-height:calc(100dvh - 40px)}
@media(max-width:430px){
  .stage{padding:0}
  .phone{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
}

/* scrollbars inside the phone */
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0;height:0}

/* generic helpers reused by JS */
.chip{padding:5px 13px;border-radius:99px;font-size:13.5px;cursor:pointer;white-space:nowrap;border:1.5px solid var(--ink)}
.pill-btn{border-radius:14px;padding:13px;text-align:center;font-weight:700;cursor:pointer}
.spinner{width:26px;height:26px;border:3px solid #d3d9de;border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
.center-col{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* login */
.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 30px}
.login-input{width:100%;box-sizing:border-box;border:1.8px solid var(--ink);border-radius:14px;padding:14px 15px;font-size:16px;outline:none;background:#fff;margin-bottom:12px}
.login-btn{background:var(--ink);color:#fff;border-radius:16px;padding:15px;text-align:center;font-size:18px;font-weight:700;cursor:pointer;width:100%}
.role-quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.role-quick div{border:1.5px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink2)}

/* desktop command view */
.desk{display:none}
@media(min-width:1024px){
  body.desk-mode .stage{display:none}
  body.desk-mode .desk{display:flex}
}
.desk{min-height:100vh;padding:24px;gap:16px}