:root{
  --bg:#F6F5F1;
  --ink:#1B2A41;
  --muted:#5B6472;
  --accent:#E8622C;
  --accent-ink:#FFFFFF;
  --line:#D8D3C7;
  --surface:#FFFFFF;
  --tint:#FAF9F6;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  background:var(--ink);
  color:#fff;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Sans Condensed', sans-serif;
  font-weight:600; font-size:16px; letter-spacing:.2px;
}
.mark{
  width:20px;height:20px;flex:none;
  border:2px solid var(--accent);
  border-radius:3px;
  position:relative;
}
.mark::after{content:""; position:absolute; inset:3px; background:var(--accent); border-radius:1px;}
.user{display:flex; align-items:center; gap:14px; font-size:13px; color:#D5DAE2; min-width:0;}
.user span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.logout{
  background:none; border:1px solid #3A4A63; color:#fff; border-radius:3px;
  font-family:inherit; font-size:12.5px; padding:6px 10px; cursor:pointer; flex:none;
}
.logout:hover{border-color:var(--accent);}

main{flex:1; width:100%; max-width:1040px; margin:0 auto; padding:40px 24px;}

/* Login */
.login{display:flex; justify-content:center; padding-top:40px;}
.login-card{
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:4px;
  padding:40px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.icon-big{
  width:56px;height:56px; border:2px solid var(--ink); border-radius:50%;
  display:flex;align-items:center;justify-content:center; margin-bottom:18px;
}
.login h1{font-family:'IBM Plex Sans Condensed', sans-serif; font-size:26px; font-weight:700; margin:0 0 6px;}
.login p{color:var(--muted); font-size:14px; margin:0 0 28px; max-width:260px; line-height:1.5;}
.btn{
  font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; font-weight:500;
  border:none; border-radius:3px; padding:13px 20px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary{background:var(--accent); color:var(--accent-ink); width:100%;}
.btn-primary:hover{background:#D3551F;}
.microsoft-tiles{display:grid; grid-template-columns:1fr 1fr; gap:2px; width:16px; height:16px;}
.microsoft-tiles span{background:#fff;}
.dev-users{width:100%; margin-top:14px; text-align:left;}
.dev-users .hint{font-size:12px; color:var(--muted); margin-bottom:8px;}
.dev-user{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; padding:11px 12px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:3px; background:#fff;
  font-family:inherit; font-size:13.5px; color:var(--ink); cursor:pointer;
}
.dev-user:hover{border-color:var(--accent);}
.dev-user .role{font-size:11.5px; color:var(--muted);}

/* Dashboard */
.dashboard h1{font-family:'IBM Plex Sans Condensed', sans-serif; font-size:28px; font-weight:700; margin:0 0 4px;}
.dashboard .sub{color:var(--muted); font-size:14px; margin:0 0 28px;}
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap:16px;}
.tile{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:20px; min-height:170px;
  color:inherit; text-decoration:none;
  transition:border-color .15s, box-shadow .15s;
}
.tile:hover, .tile:focus-visible{border-color:var(--accent); box-shadow:0 2px 0 var(--accent); outline:none;}
.tile-head{display:flex; align-items:center; justify-content:space-between;}
.tile-icon{
  width:40px;height:40px; border-radius:3px; background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.tile-icon svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.6;}
.tile-ext{color:var(--muted); font-size:15px;}
.tile-title{font-family:'IBM Plex Sans Condensed', sans-serif; font-size:19px; font-weight:700;}
.tile-desc{font-size:13.5px; color:var(--muted); line-height:1.5;}
.tile-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tile-badge{
  font-size:11.5px; font-weight:600; color:var(--accent);
  background:#FBEDE6; border-radius:2px; padding:2px 7px;
}
.tile-go{margin-left:auto; color:var(--accent); font-size:13px; font-weight:500;}
.empty-note{color:var(--muted); font-size:14px;}

.footer{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:11.5px; color:var(--muted);
  padding:14px 24px; border-top:1px solid var(--line);
}

#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  max-width:380px; width:calc(100% - 32px);
  background:var(--ink); color:#fff; font-size:13px; line-height:1.4;
  padding:11px 14px; border-radius:3px; display:none; z-index:10;
}
#toast.error{background:#B3261E;}

@media (max-width:560px){
  .topbar{padding:12px 16px;}
  main{padding:28px 16px;}
  .login{padding-top:12px;}
  .user span{display:none;}
}