:root {
  --side: #0F1F33;
  --teal: #0B8F7A;
  --bg: #F4F7FB;
  --card: #ffffff;
  --ink: #172033;
  --muted: #6B7785;
  --line: #E7EDF4;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.app { display: flex; min-height: 100vh; }
.side {
  width: 236px; background: var(--side); color: #D7E2EE; padding: 20px 14px;
  flex: 0 0 236px; min-height: 100vh; display: flex; flex-direction: column;
}
.logo { color: #fff; font-weight: 800; font-size: 22px; padding: 4px 12px 22px; letter-spacing: -.3px; }
.side nav { display: grid; gap: 2px; }
.side a { color: #C9D6E4; padding: 11px 12px; border-radius: 10px; font-size: 14px; }
.side a.on, .side a:hover { background: var(--teal); color: #fff; }
.sidefoot { margin-top: auto; padding: 16px 12px 4px; border-top: 1px solid rgba(255,255,255,.1); }
.sidefoot .brand { color: #fff; font-weight: 700; }
.sidefoot div { color: #8EA0B3; font-size: 11px; margin-top: 3px; }
main { flex: 1; min-width: 0; }
.topbar {
  height: 68px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.title { font-size: 22px; font-weight: 750; letter-spacing: -.3px; }
.userbox { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--side); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.logout { background: #F3F6FA; border-radius: 999px; padding: 7px 12px; }
.menu, .mob { display: none; }
.desk { display: block; }
.content { padding: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.card, .guest-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  box-shadow: 0 6px 18px rgba(15, 31, 51, .04);
}
.linkcard { display: block; transition: transform .15s ease, border-color .15s ease; }
.linkcard:hover { transform: translateY(-2px); border-color: #B7E4DC; }
.stat .label { color: var(--muted); font-size: 13px; }
.stat b { display: block; font-size: 32px; margin-top: 6px; letter-spacing: -.5px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.col { background: #EEF3F8; border-radius: 16px; padding: 12px; min-height: 220px; }
.col h3 { margin: 0 0 10px; font-size: 14px; }
.task, .kcard, .item { background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 10px; border: 1px solid #E8EEF5; }
.item { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0; }
.item b, .kcard strong { display: block; margin-bottom: 4px; }
.kcard { cursor: grab; }
.kcard.dragging { opacity: .5; }
.kmeta { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gray { background: #94A3B8; } .blue { background: #2563EB; } .green { background: #16A34A; }
.pill { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 650; }
.high { background: #FDE8E8; color: #C24141; }
.med { background: #E8F1FF; color: #2563EB; }
.low { background: #E7F8EF; color: #15803D; }
label { display: block; font-size: 12px; font-weight: 650; color: var(--muted); margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; background: #fff;
}
textarea { min-height: 90px; }
.primary {
  background: var(--teal); color: #fff; border: 0; border-radius: 12px; padding: 12px 14px;
  font: inherit; font-weight: 700; cursor: pointer; margin-top: 12px;
}
.danger { background: #C24141; width: auto; }
.rowform { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.rowform .primary { width: auto; margin-top: 0; display: inline-block; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 12px; font-weight: 650; }
.badge { display: inline-block; border-radius: 999px; padding: 4px 8px; font-size: 12px; }
.ok { background: #E7F8EF; color: #15803D; }
.wait { background: #FFF4D8; color: #9A6700; }
.err { background: #FDE8E8; color: #C24141; padding: 10px 12px; border-radius: 12px; }
.thumb { width: 84px; height: 64px; object-fit: cover; border-radius: 10px; }
.hello { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; }
.hello h2 { margin: 4px 0 0; font-size: 20px; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.action { display: block; border-radius: 18px; padding: 18px; color: #fff; min-height: 140px; }
.action span { font-size: 14px; opacity: .9; }
.action b { display: block; font-size: 34px; margin: 8px 0; }
.action small { display: block; opacity: .85; }
.a1 { background: linear-gradient(135deg, #0B8F7A, #147A8A); }
.a2 { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.a3 { background: linear-gradient(135deg, #C24141, #9F1239); }
.a4 { background: linear-gradient(135deg, #D97706, #B45309); }
@media (max-width: 900px) { .actions { grid-template-columns: 1fr 1fr; } }
.guest-card { width: min(460px, 100%); }
.guest h1, .guest h2 { margin-top: 0; }
@media (max-width: 900px) {
  .app { display: block; }
  .side, .desk { display: none; }
  .mob { display: block; }
  .menu { display: flex; gap: 8px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .menu a { flex: 0 0 auto; background: #F3F6FA; border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
  .menu a.on { background: var(--teal); color: #fff; }
  .content { padding: 14px; }
  .grid, .board { grid-template-columns: 1fr 1fr; }
  .topbar { height: auto; padding: 12px 14px; }
}