/* Minimal modern CSS reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video,canvas,audio,iframe,embed{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}

/* Base */
body{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
}

.page{display:grid;justify-items:center;align-content:start;gap:var(--sp-16);padding:var(--sp-32) var(--sp-24) var(--sp-24)}
.page--auth{min-height:100vh;min-height:100dvh;place-content:center}

.page__footer{margin-top:var(--sp-16);display:flex;gap:var(--sp-16);align-items:center;justify-content:center;color:var(--color-text-muted)}
.page__links{display:flex;gap:var(--sp-16)}

/* Brand header */
.brand{display:flex;align-items:center;gap:var(--sp-12);margin-bottom:var(--sp-24)}
.brand__mark{width:48px;height:48px;border-radius:var(--radius-md);display:block;box-shadow:var(--shadow-sm);}
.brand__mark-link{display:block;text-decoration:none;}
.brand__text{display:grid}
.brand__name{font-weight:600}
.brand__tag{font-size:var(--fs-300);color:var(--color-text-muted)}

/* App bar (post-login header) */
.appbar{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--color-surface);border:1px solid var(--color-stroke);border-radius:var(--radius-lg);padding:10px var(--sp-16);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-16)}
.appbar__left{display:flex;align-items:center;gap:var(--sp-12)}
.appbar__title{font-weight:600}
.appbar__right{display:flex;align-items:center;gap:var(--sp-12)}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--color-label-bg);font-weight:600;box-shadow:var(--shadow-sm)}

/* Headings — tuned to style board */
.h1{font-size:var(--fs-900);line-height:var(--lh-tight);font-weight:700}
.h2{font-size:var(--fs-800);line-height:var(--lh-tight);font-weight:600}
.h3{font-size:var(--fs-700);line-height:var(--lh-snug);font-weight:600}

/* Utilities */
.muted{color:var(--color-text-muted)}
.mt-4{margin-top:var(--sp-4)}
.mt-8{margin-top:var(--sp-8)}
.mt-12{margin-top:var(--sp-12)}
.mt-16{margin-top:var(--sp-16)}
.mt-20{margin-top:var(--sp-20)}
.mt-24{margin-top:var(--sp-24)}
.mt-32{margin-top:var(--sp-32)}
.is-hidden{display:none !important}
.flow > * + *{margin-top:var(--sp-16)}
.link{color:var(--color-text);text-decoration:underline;color:inherit}

/* Card */
.card{width:100%;max-width:560px;background:var(--color-surface);border:1px solid var(--color-stroke);border-radius:var(--radius-lg);padding:var(--sp-32);box-shadow:var(--shadow-md)}

/* Auth helpers */
.auth__footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-12)}