:root{color-scheme:dark;--bg:#030303;--card:#0b0b0e;--text:#fff;--soft:#c9c9cf;--muted:#85858e;--gold:#ffc400;--line:rgba(255,255,255,.1)}



.top{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(5,5,6,.88);backdrop-filter:blur(18px)}
.topin{width:min(calc(100% - 32px),1180px);height:66px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-weight:850}
.brand img{width:35px;height:35px;object-fit:contain}.brand small{display:block;color:var(--muted);font-size:.58rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.userline{display:flex;align-items:center;gap:11px}.who{text-align:right}.who strong{display:block;font-size:.76rem}.who span{display:block;color:var(--muted);font-size:.62rem;margin-top:2px}
.avatar{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,205,45,.28);border-radius:11px;background:rgba(255,196,0,.07);color:#ffd744;font-size:.72rem;font-weight:900}
.shell{width:min(calc(100% - 32px),1180px);margin:0 auto;padding:34px 0 70px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:30px}
.side{position:sticky;top:96px;height:max-content}.nav{display:grid;gap:7px}.nav a,.nav button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 13px;border:0;border-radius:10px;background:transparent;color:var(--soft);text-decoration:none;font:inherit;font-size:.78rem;font-weight:720;cursor:pointer;text-align:left}.nav a:hover,.nav a.active,.nav button:hover{background:rgba(255,196,0,.07);color:#ffd744}.nav i{font-style:normal;width:18px;text-align:center}.logout{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.welcome{margin-bottom:24px}
  /* Picture beside the welcome, text beside that.

     A flex row rather than a float or an absolute position: the picture and
     the heading are one header, and they have to stay side by side at every
     width without the text wrapping underneath. */
  .welcome{display:flex;align-items:center;gap:20px}
  .welcome-text{min-width:0}
  /* Square with rounded corners, not a circle.

     Deliberate. A circle crops a square photograph to its inscribed circle,
     which throws the corners away -- and on a group photograph the corners are
     usually other people. It also reads as a status badge rather than as a
     person. A rounded square keeps the whole frame and still softens the edges,
     so it sits with the .app cards instead of fighting them. */
  .profile-shot{
    flex:none;width:78px;height:78px;padding:0;cursor:pointer;position:relative;
    display:grid;place-items:center;overflow:hidden;
    border:1px solid rgba(255,205,45,.30);border-radius:16px;
    background:linear-gradient(145deg,rgba(255,195,0,.10),rgba(255,255,255,.02));
    color:#ffd744;font-size:1.45rem;font-weight:800;letter-spacing:.02em;
    transition:border-color .15s ease,transform .15s ease;
  }
  .profile-shot:hover{border-color:rgba(255,205,45,.7);transform:translateY(-1px)}
  .profile-shot:focus-visible{outline:2px solid #ffd744;outline-offset:3px}
  .profile-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .avatar-edit{display:flex;gap:18px;align-items:flex-start;margin:6px 0 4px}
  .avatar-frame{
    flex:none;position:relative;width:256px;height:256px;overflow:hidden;
    border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.45);
  }
  .avatar-frame canvas{display:block;width:256px;height:256px;touch-action:none;cursor:grab}
  .avatar-frame canvas:active{cursor:grabbing}
  .avatar-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:22px;text-align:center;color:#6b7080;font-size:.78rem}
  /* [hidden] loses to a class that sets display, so the note would sit on
     top of the picture forever. Stated here rather than left to the UA
     default. */
  .avatar-empty[hidden]{display:none}
  .avatar-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-top:4px}
  .avatar-zoom{display:flex;flex-direction:column;gap:7px;width:190px;font-size:.72rem;font-weight:700;color:#8b8f9e}
  .avatar-zoom input{width:100%;accent-color:#ffd744}
  .avatar-hint{margin:0;max-width:190px;font-size:.72rem;color:#8b8f9e;line-height:1.55}
  .avatar-status{font-size:.74rem;color:#fca5a5}
  @media(max-width:560px){.avatar-edit{flex-direction:column}.avatar-side,.avatar-hint{max-width:none;width:100%}}.eyebrow{color:#ffd744;font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.welcome h1{margin:6px 0 7px;font-size:clamp(2rem,5vw,3.35rem);letter-spacing:-.055em}.welcome p{margin:0;color:var(--soft);font-size:.88rem}
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.app{min-height:190px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(255,195,0,.035),rgba(255,255,255,.018)),var(--card);text-decoration:none;color:#fff;transition:.15s ease}.app:hover{transform:translateY(-2px);border-color:rgba(255,196,0,.3)}.icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(255,196,0,.08);color:#ffd744;font-size:1.2rem}.app h2{margin:22px 0 7px;font-size:1.05rem}.app p{margin:0;color:var(--muted);font-size:.74rem;line-height:1.55}.coming{display:inline-block;margin-top:16px;color:#ffd744;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.notice{display:none;margin-bottom:18px;padding:12px;border:1px solid rgba(255,124,124,.25);border-radius:10px;background:rgba(255,124,124,.06);color:#ffb0b0;font-size:.76rem}
@media(max-width:800px){.shell{grid-template-columns:1fr}.side{position:static}.nav{grid-template-columns:repeat(3,1fr)}.logout{margin:0;padding:0;border:0}.apps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.who{display:none}.shell{width:min(calc(100% - 22px),1180px);padding-top:24px}.nav{grid-template-columns:1fr}.apps{grid-template-columns:1fr}}


/* Top-right square showing the stored picture rather than initials. Its
   background and border go, because with a picture filling the box they would
   otherwise show as a gold sliver around the edge of it. */
.avatar.has-picture{background:transparent;border-color:transparent;padding:0}
.avatar.has-picture img{width:100%;height:100%;object-fit:cover;border-radius:11px}

/* ============================================================================
   PROFILE PICTURE EDITOR

   Its own overlay rather than a borrowed one. The canary pages have no dialog
   of their own -- canary-base.css deliberately carries only what every page
   needs, and a modal is not that -- so this is written here, next to the
   picture it is for, instead of being pushed into the shared sheet where it
   would become a weight for every other page.

   Named .sheet rather than .modal to stay clear of the MAIL app's .modal,
   which is a different stylesheet on a different page and would be a
   coincidence of vocabulary rather than a shared thing.

   [hidden] is what actually hides it. Not display:none, because display is
   already needed for the flex centring, and a rule that fights the attribute
   is how a dialog ends up invisible behind its own backdrop.
   ========================================================================== */
.sheet[hidden]{display:none}
.sheet{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.74);backdrop-filter:blur(4px);
}
.sheet-box{
  width:min(560px,100%);max-height:90vh;overflow-y:auto;
  padding:22px;border:1px solid var(--line);border-radius:14px;
  background:#0d0d12;box-shadow:0 24px 60px rgba(0,0,0,.85);
}
.sheet-box h2{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;font-size:1.05rem;font-weight:800;
}
.sheet-x{
  padding:2px 8px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;
}
.sheet-x:hover{color:#fff;background:rgba(255,255,255,.07)}
.sheet-x:focus-visible{outline:2px solid #ffd744;outline-offset:2px}
.sheet-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line);
}
.sheet-actions .spacer{flex:1 1 auto}

/* Let the selected workspace palette control the dashboard's accents. */
html[data-workspace-theme] .nav a:hover,html[data-workspace-theme] .nav a.active,html[data-workspace-theme] .nav button:hover{background:var(--gold-tint,rgba(255,196,0,.07));color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .profile-shot{border-color:var(--line);background:linear-gradient(145deg,var(--gold-tint,rgba(255,196,0,.1)),rgba(255,255,255,.02));color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .profile-shot:hover{border-color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .profile-shot:focus-visible{outline-color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .avatar-zoom input{accent-color:var(--gold,#ffc400)}
html[data-workspace-theme] .eyebrow{color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .app{border-color:var(--line);background:linear-gradient(145deg,var(--gold-tint,rgba(255,196,0,.035)),rgba(255,255,255,.018)),var(--card)}
html[data-workspace-theme] .app:hover{border-color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .icon{background:var(--gold-tint,rgba(255,196,0,.08));color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .coming{color:var(--gold-text,var(--gold,#ffd744))}
html[data-workspace-theme] .sheet-x:focus-visible{outline-color:var(--gold-text,var(--gold,#ffd744))}

.canary-footer{position:fixed;z-index:30;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,1180px);box-sizing:border-box;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:.68rem;line-height:1.5;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.canary-footer span{display:block}.canary-footer span+span{margin-top:5px;font-size:.62rem}main{padding-bottom:94px}