/* SahelTech official blue/orange brand palette — self-hosted, no CDN. */
:root{
  --brand:#004A87;
  --brand-dark:#074377;
  --ink:#0A192F;
  --muted:#627284;
  --paper:#f6f8fb;
  --surface:#fff;
  --line:#e0e7f0;
  --warm:#E67E22;
  --sand:#F4EBD0;
  --focus:#FFAD60;
  --shadow:0 24px 72px rgba(7,37,42,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.6 Inter,"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%}
svg{max-width:100%}
.icon{display:inline-block;width:19px;height:19px;flex:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;vertical-align:middle}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.skip-link{position:absolute;top:-100px;left:12px;z-index:9999;background:#fff;padding:10px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{top:10px}
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1320px;min-height:86px;margin:auto;padding:16px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;color:#0A192F;min-width:0}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:61px;height:54px;flex:none}
.brand-mark img{width:61px;height:48px;object-fit:contain}
.brand-title{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.brand-title strong{font-size:21px;font-weight:850;letter-spacing:-.045em}
.brand-title small{font-size:10px;font-weight:850;letter-spacing:.16em;color:#8e511b;background:#fff5e9;border:1px solid #ffe2c5;padding:5px 9px;border-radius:20px}
.topbar-actions{display:flex;align-items:center;gap:28px;font-size:12px}
.topbar-security{display:inline-flex;align-items:center;gap:6px;color:#526b84}
.topbar-security .icon{width:15px;height:15px}
.topbar-website{display:inline-flex;align-items:center;gap:5px;font-weight:750;color:#334c51}
.topbar-website .icon{width:13px;height:13px}
.entrance{max-width:540px;min-height:calc(100vh - 170px);margin:0 auto;padding:44px 24px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.intro{position:relative;isolation:isolate}
.intro:before{content:"";position:absolute;z-index:-1;inset:-20% 8% auto -30%;height:520px;background:radial-gradient(circle at 58% 45%,rgba(247,168,59,.12),transparent 58%);pointer-events:none}
.intro-tag{display:inline-flex;gap:10px;align-items:center;color:#945420;border:1px solid #f5ddba;background:var(--sand);border-radius:24px;padding:8px 14px;font-size:10px;letter-spacing:.17em;font-weight:850}
.tag-dot,.state-dot{width:7px;height:7px;border-radius:50%;background:#E67E22;box-shadow:0 0 0 3px #ffead2}
.intro h1{max-width:700px;font-size:clamp(43px,5.1vw,69px);line-height:1.1;letter-spacing:-.057em;font-weight:850;margin:27px 0}
.intro h1 span{color:var(--warm)}
.intro>p{max-width:485px;color:#65768a;font-size:17px;line-height:1.85;margin:0}
.intro-features{display:grid;gap:16px;margin-top:38px}
.intro-features>div{display:flex;align-items:center;gap:13px;font-weight:650;font-size:13px;color:#374d63}
.feature-icon{height:35px;width:35px;display:grid;place-items:center;border-radius:11px;background:#eaf3fb;color:var(--brand-dark)}
.feature-icon .icon{height:17px;width:17px}
.intro-bottom{margin-top:60px;display:flex;align-items:center;gap:10px;color:#7e899a;font-size:11px;max-width:420px}
.intro-bottom img{opacity:.8}
.card{background:var(--surface);border:1px solid #e6ece9;border-radius:24px;padding:clamp(24px,3.7vw,46px);box-shadow:var(--shadow);min-width:0;overflow-wrap:anywhere}
.is-guest .card{max-width:492px;width:100%;justify-self:center;border-radius:18px;padding:32px 36px;box-shadow:0 12px 40px rgba(10,25,47,.05)}
.is-guest .form-intro h2{font-size:28px;font-weight:750;letter-spacing:-.025em;margin:0 0 8px}
.eyebrow{color:var(--brand-dark);font-size:10px;font-weight:850;letter-spacing:.19em;text-transform:uppercase;margin:0 0 10px}
h2{font-size:clamp(27px,3vw,39px);font-weight:850;letter-spacing:-.055em;line-height:1.18;margin:10px 0 16px}
h3{font-size:17px;font-weight:760;letter-spacing:-.02em;line-height:1.3;margin:0}
p{margin:0 0 14px}
.muted{color:var(--muted);font-size:14px}
.card>p.muted{max-width:610px}
.icon-heading{display:flex;gap:13px;align-items:center}
.head-icon{width:46px;height:46px;border-radius:14px;background:#eaf3fb;color:var(--brand);display:grid;place-items:center}
.head-icon.orange{background:#fff5e9;color:#b86519}
.head-icon .icon{height:23px;width:23px}
.form-intro{margin:0 0 24px}
.form-intro h2{margin:10px 0}
form p{margin:0 0 16px}
form label{font-size:12px;font-weight:760;color:#365158;display:block;margin:0 0 7px}
form input:not([type=checkbox]):not([type=hidden]):not([type=radio]),form select,form textarea{display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid #ccd9e7;background:#fdfefe;color:var(--ink);border-radius:11px;font-size:14px;transition:border-color .15s,box-shadow .15s}
form input:not([type=checkbox]):not([type=hidden]):not([type=radio]):focus,form select:focus,form textarea:focus{border-color:#4e90bf;box-shadow:0 0 0 3px rgba(0,74,135,.11);outline:none}
input::placeholder{color:#9caaa8}
input[type=checkbox]{accent-color:var(--brand);height:16px;width:16px;vertical-align:middle}
.remember-field{display:flex;align-items:center;gap:9px}
.remember-field label{margin:0;font-weight:600}
form ul{margin:6px 0 12px;padding-left:20px}
form .helptext,.helptext,small{font-size:11px;color:var(--muted)}
.errorlist{color:#a32335;font-size:12px;background:#fff1f1;border:1px solid #ffd8dc;border-radius:9px;padding:10px 12px 10px 26px}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:47px;padding:12px 16px;border-radius:11px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-size:13px;font-weight:800;line-height:1.3;transition:transform .16s,box-shadow .16s,background-color .16s;text-align:center}
button:hover,.button:hover{background:#074377;color:white;text-decoration:none;box-shadow:0 5px 18px rgba(0,74,135,.13)}
button:active,.button:active{transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.55}
button.secondary,.button.secondary{width:auto;min-width:140px;background:#f3f6fb;border-color:#d5e0eb;color:#244760}
button.secondary:hover,.button.secondary:hover{background:#e8f0f9;color:#163b3e}
.button.small{min-height:40px;width:auto}
.button .icon,button .icon{width:16px;height:16px}
.divider{display:flex;align-items:center;gap:16px;margin:23px 0;color:#8b9a98;font-size:12px}
.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}
.google{background:#fff;color:#263238;border-color:#cedbd9;box-shadow:0 2px 8px rgba(12,47,53,.035);font-weight:760}
.google:hover{background:#f8fbfa;border-color:#b7ceca;color:#263238;box-shadow:0 5px 18px rgba(12,47,53,.08)}
.google-logo{height:20px;width:20px;flex:none}
.google-unavailable{display:flex;gap:9px;align-items:flex-start;padding:12px 14px;border:1px solid #f4ddad;border-radius:12px;background:#fffaef;color:#855e23;font-size:12px}
.google-unavailable .icon{width:16px;height:16px}
.links{text-align:right;font-size:12px;margin:8px 0 18px}
.links a{font-weight:680}
.auth-switch{border-top:1px solid var(--line);padding-top:20px;margin:25px 0 0;text-align:center;color:var(--muted);font-size:13px}
.auth-switch a{font-weight:850}
.auth-footer{display:flex;align-items:center;justify-content:center;gap:7px;color:#8c9bab;margin-top:18px;font-size:11px}
.auth-footer .icon{width:14px;height:14px}
.notice{display:flex;align-items:flex-start;gap:11px;background:#eef8fc;border:1px solid #c8e4f5;color:#1a5d78;padding:12px 14px;border-radius:12px;font-size:13px;margin:0 0 20px}
.notice .icon{height:18px;width:18px}
.page-subtitle{font-size:14px;color:var(--muted);margin:2px 0 24px;line-height:1.7}
.workspace{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:257px minmax(0,1fr);align-items:start;gap:32px;padding:42px 44px 76px;min-height:calc(100vh - 175px)}
.workspace .card{padding:40px 44px}
.workspace-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.workspace-kicker{font-size:11px;color:#899994;font-weight:750;letter-spacing:.045em}
.workspace-state{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#4d7261;white-space:nowrap}
.workspace-state .state-dot{height:6px;width:6px;background:#399d83;box-shadow:0 0 0 3px #d8f4e6}
.sidebar{position:sticky;top:22px;padding:21px 12px;border:1px solid #e2e9f2;background:#fff;border-radius:18px;box-shadow:0 8px 36px rgba(7,37,42,.025)}
.sidebar-label{margin:3px 15px 13px;color:#8b9999;letter-spacing:.18em;font-size:10px;font-weight:850}
.account-nav{display:grid;gap:3px}
.account-nav a,.signout-link{display:flex;align-items:center;gap:11px;min-height:43px;padding:10px 13px;border-radius:11px;color:#475d70;font-size:12px;font-weight:710}
.account-nav a .icon,.signout-link .icon{height:17px;width:17px}
.account-nav a:hover,.signout-link:hover{background:#f3f7fc;text-decoration:none;color:#004A87}
.account-nav a[aria-current=page]{background:#e8f1fa;color:#004A87;font-weight:820}
.sidebar-footer{display:flex;gap:10px;align-items:center;margin:20px 6px 8px;border-top:1px solid var(--line);padding:18px 9px 0;min-width:0}
.sidebar-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;background:#0A192F;color:#fff;font-weight:850}
.sidebar-person{min-width:0;display:flex;flex-direction:column}
.sidebar-person strong{font-size:12px;color:#203c57;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-person small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signout-link{margin:0 6px;color:#a04a48}
.signout-link:hover{background:#fff1ed;color:#a0443d}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:25px 0 34px}
.tiles>a{display:block;border:1px solid var(--line);border-radius:15px;padding:21px;color:var(--ink);transition:border-color .15s,background-color .15s,transform .15s}
.tiles>a:hover{background:#fbfcff;border-color:#9ebedb;text-decoration:none;transform:translateY(-2px)}
.tile-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#edf4fb;color:var(--brand);margin-bottom:17px}
.tile-icon.orange{background:#fff5e9;color:#b86519}
.tile-icon .icon{height:21px;width:21px}
.tiles h3{margin-bottom:5px}
.tiles p{font-size:12px;color:var(--muted);margin-bottom:0}
.tiles .tile-arrow{width:15px;height:15px;margin-left:auto;color:#8c9caf}
.section-title{font-size:13px;font-weight:850;color:#2f4e53;margin:28px 0 12px}
.activity-list{margin:0;padding:0;list-style:none}
.activity-item{display:flex;gap:11px;padding:13px 0;border-top:1px solid #edf1f6;align-items:flex-start;font-size:12px}
.activity-item .activity-dot{height:9px;width:9px;margin-top:7px;border-radius:50%;background:#9ebed9;flex:none}
.activity-item strong{color:#38536d}
.activity-item time{margin-left:auto;white-space:nowrap;font-size:11px;color:#9caaa8}
.empty-state{padding:24px;border-radius:12px;background:#f7faf8;color:var(--muted);font-size:13px;text-align:center}
.mini-badge,.pill{display:inline-flex;align-items:center;border:1px solid #d4e7f6;background:#edf5fc;border-radius:30px;padding:4px 10px;font-size:10px;font-weight:820;color:#215d92;white-space:nowrap}
.session{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 0;border-top:1px solid var(--line)}
.session-main{display:flex;gap:13px;align-items:flex-start;min-width:0}
.session h3{margin:0 0 7px;font-size:14px;overflow-wrap:anywhere}
.session p{font-size:11px;color:var(--muted);margin:0 0 6px}
.session form{margin:0;flex:none}
.session button{width:auto}
.session .tile-icon{width:38px;height:38px;flex:none;margin:0}
.session-actions{margin-top:23px;border-top:1px solid var(--line);padding-top:23px}
.warning-panel{border:1px solid #f2dfb9;background:#fff9ed;color:#795520;border-radius:12px;padding:14px;font-size:12px;display:flex;gap:12px}
.warning-panel .icon{flex:none;width:20px;height:20px;color:#b27c2b}
.danger-panel{border:1px solid #f2d9d7;background:#fff8f7;border-radius:13px;padding:20px;margin:20px 0}
.danger-panel h3{color:#a74543}
.danger-panel button.secondary{color:#a74543;border-color:#e9cecb;background:#fff}
hr{border:0;border-top:1px solid var(--line);margin:27px 0}
.site-footer{max-width:1320px;margin:auto;padding:21px 44px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e1e8e5;color:#7a8d8b;font-size:11px}
.site-footer>div,.site-footer nav{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.site-footer nav a{color:#6a7c90}
.site-footer .footer-dot{color:var(--warm)}
.authorization-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:20px}
.authorization-actions .secondary{width:100%;min-width:0}
.account-nav::-webkit-scrollbar{height:4px}
.account-nav::-webkit-scrollbar-thumb{background:#dee8f3;border-radius:8px}
@media(max-width:1080px){
  .entrance{padding:40px 24px}
  .intro h1{font-size:clamp(40px,4.7vw,56px)}
  .workspace{padding:32px 28px 60px;gap:18px;grid-template-columns:225px minmax(0,1fr)}
  .workspace .card{padding:30px}
  .topbar-inner{padding:15px 29px}
  .site-footer{padding-left:29px;padding-right:29px}
}
@media(max-width:760px){
  .topbar-inner{min-height:70px;padding:12px 20px}
  .brand-mark,.brand-mark img{width:46px;height:38px}
  .brand-title strong{font-size:19px}
  .brand-title small{font-size:9px;padding:4px 7px}
  .topbar-security{display:none}
  .topbar-website{font-size:0}
  .topbar-website .icon{height:17px;width:17px}
  .entrance{display:flex;flex-direction:column;gap:25px;min-height:0;padding:32px 18px 42px}
  .intro{width:100%;max-width:520px}
  .intro:before{display:none}
  .intro h1{font-size:clamp(33px,7vw,42px);letter-spacing:-.045em;margin:15px 0}
  .intro h1 br{display:none}
  .intro>p{font-size:13px;line-height:1.7}
  .intro-features,.intro-bottom{display:none}
  .intro-tag{font-size:9px;padding:6px 10px}
  .is-guest .card{max-width:520px;align-self:center;padding:27px 23px;border-radius:18px}
  .workspace{display:flex;flex-direction:column;padding:20px 15px 42px;gap:17px;min-height:0}
  .sidebar{position:static;width:100%;padding:10px;border-radius:14px}
  .sidebar-label,.sidebar-footer,.signout-link{display:none}
  .account-nav{display:flex;overflow-x:auto;gap:5px;scrollbar-width:thin}
  .account-nav a{white-space:nowrap;font-size:11px;padding:9px 10px;min-height:38px}
  .account-nav .icon{width:15px;height:15px}
  .workspace .card{width:100%;padding:26px 20px}
  .workspace-heading{margin-bottom:20px}
  .workspace-state{display:none}
  .tiles{grid-template-columns:1fr;margin:20px 0}
  .tiles>a{padding:17px}
  .session{align-items:stretch;flex-direction:column}
  .session button{width:100%}
  h2{font-size:29px}
  .site-footer{padding:19px 18px 30px;flex-direction:column;align-items:flex-start;gap:8px}
  .site-footer nav{gap:13px}
}
@media(max-width:760px){.sidebar .signout-link{display:inline-flex;margin:8px 0 1px;padding:9px 12px;font-size:11px}.authorization-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
