/* ═══════════════════════════════════════════════════════════════════════════
   STUDIO ASHD — THE DESIGN SYSTEM (§39, §40)

   ONE set of tokens for the welcome page, the dashboard, both libraries and
   the new-project screen, and they are the same tokens the editor's shell
   reads. Before this file there were three palettes in this application: the
   hub's blue `--accent`, the editor's own greys and whatever each screen had
   hard-coded, which is why the dashboard and the editor looked like two
   products.

   The rule for anything added later: a colour, a radius or a spacing step that
   is not in `:root` here does not go in a screen. If a screen needs one it goes
   here first, so «the dashboard is neon and the editor is an admin panel» stays
   impossible rather than merely discouraged.

   PERFORMANCE (§37). Everything here is CSS: gradients, one blurred radial
   wash, transforms and opacity. There is no full-screen WebGL, no video
   background and no library. The welcome page's motion is a single 2D canvas
   the browser can composite, and it stops itself when the tab is hidden.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── surface ── */
  --a-bg:#05070e;
  --a-bg-2:#080b14;
  --a-surface:rgba(255,255,255,.045);
  --a-surface-2:rgba(255,255,255,.07);
  --a-surface-hover:rgba(255,255,255,.085);
  --a-solid:#0e1220;
  --a-border:rgba(255,255,255,.09);
  --a-border-strong:rgba(255,255,255,.16);

  /* ── ink ── */
  --a-text:#eef1f8;
  --a-muted:#8e9ab5;
  --a-faint:#5c6885;

  /* ── brand ── */
  --a-cyan:#22d3ee;
  --a-magenta:#e879f9;
  --a-violet:#a78bfa;
  --a-glow-cyan:rgba(34,211,238,.32);
  --a-glow-magenta:rgba(232,121,249,.28);

  /* ── state ── */
  --a-success:#34d399;
  --a-warning:#fbbf24;
  --a-danger:#fb7185;

  /* ── geometry ── */
  --a-r-sm:10px;
  --a-r:14px;
  --a-r-lg:20px;
  --a-r-xl:28px;
  --a-shadow:0 18px 44px rgba(0,0,0,.5);
  --a-shadow-sm:0 8px 22px rgba(0,0,0,.38);

  /* ── spacing ── */
  --a-s1:6px; --a-s2:10px; --a-s3:16px; --a-s4:24px; --a-s5:34px; --a-s6:48px;

  --a-font:'Segoe UI',system-ui,-apple-system,'Noto Sans','Arial',sans-serif;
}

/* THE STUDIO SHELL TAKES THE WHOLE WIDTH.
   These screens carry their own header; the editor's 232px sidebar beside them
   would be a second navigation saying the same thing twice. */
.app.ashd{grid-template-columns:1fr}
.app.ashd .sidebar{display:none}
.app.ashd #navReopen{display:none}
.app.ashd .main{padding:0;overflow:auto;background:var(--a-bg)}

.ashd-page{
  min-height:100vh;
  color:var(--a-text);
  font-family:var(--a-font);
  /* Measured against the reference rather than guessed: the first pass used
     half these values and the page read as flat black in a screenshot — the
     glow was there in the CSS and not on the screen. Four washes, magenta
     weighted to the left and cyan to the right, exactly as IMAGE 1 and IMAGE 2
     are lit. */
  background:
    radial-gradient(1200px 700px at 8% -6%, rgba(232,121,249,.26), transparent 60%),
    radial-gradient(1100px 680px at 94% 2%, rgba(34,211,238,.22), transparent 58%),
    radial-gradient(1000px 800px at 46% 112%, rgba(167,139,250,.18), transparent 62%),
    radial-gradient(700px 500px at 72% 46%, rgba(99,102,241,.10), transparent 66%),
    linear-gradient(180deg,var(--a-bg) 0%, #070a13 46%, var(--a-bg-2) 100%);
  background-attachment:fixed;
}
.ashd-wrap{max-width:1400px;margin:0 auto;padding:0 var(--a-s4) var(--a-s6)}

/* ── the brand mark ─────────────────────────────────────────────────────── */
/* ONE mark, drawn as an inline SVG so it is crisp at 22px in the header and at
   96px on the welcome page, and so it needs no image request. */
.ashd-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.ashd-logo svg,.ashd-logo .ashd-markimg{display:block;
  filter:drop-shadow(0 0 14px var(--a-glow-cyan))}
/* The approved mark is a raster asset (§3). Height drives it and the width
   follows the artwork's own 767:512, so it is never squashed. */
.ashd-markimg{display:block;max-width:none}
/* NOTE: the width and height ATTRIBUTES on the <img> are what size it —
   they are computed from the artwork's own ratio in `ashd_home.js`. A
   `height:auto` here silently overrode them and drew the mark at its
   intrinsic 512px, i.e. across half the screen. */
.ashd-logo b{font-size:17px;letter-spacing:.34em;font-weight:700}
.ashd-logo small{display:block;font-size:9.5px;letter-spacing:.28em;color:var(--a-muted);
  text-transform:uppercase;margin-top:1px}

/* ── header (§41) ───────────────────────────────────────────────────────── */
.ashd-head{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--a-s3);
  padding:14px var(--a-s4);
  background:rgba(5,7,14,.74);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--a-border);
}
.ashd-head .grow{flex:1}
.ashd-crumb{display:flex;align-items:center;gap:9px;color:var(--a-muted);font-size:13px}
.ashd-crumb b{color:var(--a-text);font-weight:600}
.ashd-crumb span{color:var(--a-faint)}

/* Workspace chips — IMAGE 3's selector. These are workspaces this person may
   already read (see services/accounts.visible_workspaces): the control never
   offers a door it knows is locked, and pressing one is a filter, not a change
   of identity. */
.ashd-chips{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.ashd-chips::-webkit-scrollbar{display:none}
.ashd-chip{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:6px 13px 6px 6px;border-radius:999px;cursor:pointer;
  border:1px solid var(--a-border);background:var(--a-surface);
  color:var(--a-muted);font-size:13px;font-family:inherit;
  transition:border-color .15s, color .15s, background .15s;
}
.ashd-chip:hover{background:var(--a-surface-hover);color:var(--a-text)}
.ashd-chip.on{
  color:var(--a-text);border-color:rgba(34,211,238,.55);
  background:linear-gradient(180deg,rgba(34,211,238,.16),rgba(34,211,238,.05));
  box-shadow:0 0 0 1px rgba(34,211,238,.16), 0 0 22px rgba(34,211,238,.14);
}
.ashd-chip:focus-visible{outline:2px solid var(--a-cyan);outline-offset:2px}
.ashd-av{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#06121a;
  background:var(--a-cyan);
}
.ashd-av.team{background:linear-gradient(135deg,var(--a-violet),var(--a-magenta));color:#140820}
.ashd-av.lg{width:38px;height:38px;font-size:13px}

.ashd-profile{position:relative}
.ashd-profile-btn{
  display:inline-flex;align-items:center;gap:9px;padding:4px 6px;border-radius:999px;
  border:1px solid var(--a-border);background:var(--a-surface);cursor:pointer;
  color:var(--a-text);font-family:inherit;font-size:13px;
}
.ashd-profile-btn:hover{background:var(--a-surface-hover)}
.ashd-menu{
  position:absolute;right:0;top:calc(100% + 9px);min-width:216px;z-index:60;
  background:#0c101c;border:1px solid var(--a-border-strong);border-radius:var(--a-r);
  box-shadow:var(--a-shadow);padding:6px;
}
.ashd-menu button{
  display:block;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:9px;
  background:transparent;color:var(--a-text);font-family:inherit;font-size:13.5px;cursor:pointer;
}
.ashd-menu button:hover{background:var(--a-surface-2)}
.ashd-menu .sep{height:1px;background:var(--a-border);margin:5px 4px}
.ashd-menu .who{padding:9px 11px 10px}
.ashd-menu .who b{display:block;font-size:14px}
.ashd-menu .who small{color:var(--a-muted)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.ashd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--a-r-sm);cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;
  border:1px solid var(--a-border);background:var(--a-surface);color:var(--a-text);
  transition:background .15s, border-color .15s, transform .12s;
}
.ashd-btn:hover{background:var(--a-surface-hover);border-color:var(--a-border-strong)}
.ashd-btn:active{transform:translateY(1px)}
.ashd-btn:focus-visible{outline:2px solid var(--a-cyan);outline-offset:2px}
.ashd-btn[disabled]{opacity:.5;cursor:not-allowed}
.ashd-btn.primary{
  border-color:transparent;color:#05131a;
  background:linear-gradient(100deg,var(--a-cyan),var(--a-violet) 58%,var(--a-magenta));
  box-shadow:0 8px 26px rgba(34,211,238,.22);
}
.ashd-btn.primary:hover{filter:brightness(1.07)}
.ashd-btn.ghost{background:transparent}
.ashd-btn.danger{color:var(--a-danger);border-color:rgba(251,113,133,.4)}
.ashd-btn.sm{padding:7px 12px;font-size:13px}
.ashd-btn.lg{padding:14px 34px;font-size:15px;border-radius:999px}

/* ── welcome (IMAGE 1) ──────────────────────────────────────────────────── */
.ashd-welcome{
  min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
/* The animated field. One canvas, sized to its box, painting a particle
   network and an audio wave; it pauses itself when the tab is hidden and when
   the machine asks for reduced motion. */
#ashdField{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.ashd-welcome > *:not(#ashdField){position:relative;z-index:1}

.ashd-topbar{
  margin:18px auto 0;width:min(1180px,calc(100% - 36px));
  display:flex;align-items:center;gap:var(--a-s3);
  padding:11px 16px;border-radius:var(--a-r-lg);
  border:1px solid var(--a-border);background:rgba(10,14,24,.55);
  backdrop-filter:blur(12px);
}
.ashd-topnav{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.ashd-topnav button{
  border:0;background:transparent;color:var(--a-muted);cursor:pointer;
  font-family:inherit;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border-radius:9px;
}
.ashd-topnav button:hover{color:var(--a-text);background:var(--a-surface)}

.ashd-hero{
  flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,760px) minmax(0,1fr);
  align-items:center;gap:var(--a-s4);
  width:min(1320px,calc(100% - 36px));margin:0 auto;padding:var(--a-s5) 0;
}
.ashd-hero-mid{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--a-s3)}
.ashd-mark{filter:drop-shadow(0 0 26px var(--a-glow-cyan))
  drop-shadow(0 0 70px var(--a-glow-magenta)) drop-shadow(0 0 120px rgba(167,139,250,.35));
  position:relative}
/* The halo behind the mark. A blurred radial rather than a bigger shadow: a
   shadow that large costs a full-page composite on every scroll. */
.ashd-mark:before{
  content:"";position:absolute;inset:-46px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(34,211,238,.18), rgba(232,121,249,.12) 48%, transparent 70%);
}
.ashd-wordmark{
  font-size:clamp(20px,2.4vw,30px);letter-spacing:.62em;font-weight:600;
  margin:2px 0 6px 12px;color:#cfe6f2;
}
.ashd-hero h1{
  margin:0;font-size:clamp(30px,4.4vw,58px);line-height:1.08;font-weight:800;letter-spacing:-.01em;
  text-shadow:0 6px 40px rgba(0,0,0,.6);
}
.ashd-hero .tag{margin:0;color:var(--a-muted);font-size:clamp(14px,1.4vw,17px)}
.ashd-wave{width:min(560px,86%);height:82px;display:block;
  filter:drop-shadow(0 0 18px rgba(34,211,238,.30)) drop-shadow(0 0 30px rgba(232,121,249,.20))}

.ashd-side{display:flex;flex-direction:column;gap:var(--a-s3);
  justify-content:center;align-self:center}
.ashd-side.right{align-items:flex-end}
.ashd-feature{
  width:min(300px,100%);padding:16px;border-radius:var(--a-r-lg);
  border:1px solid var(--a-border);background:rgba(12,16,28,.6);
  backdrop-filter:blur(10px);box-shadow:var(--a-shadow-sm);
}
.ashd-feature .thumb{
  height:96px;border-radius:var(--a-r);margin-bottom:13px;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  background:linear-gradient(140deg,rgba(34,211,238,.18),rgba(232,121,249,.14));
  border:1px solid var(--a-border);
}
.ashd-feature h3{margin:0 0 5px;font-size:15px}
.ashd-feature p{margin:0;color:var(--a-muted);font-size:12.5px;line-height:1.5}
.ashd-feature .stats{display:flex;gap:var(--a-s3);margin-top:12px}
.ashd-feature .stats b{display:block;font-size:17px;
  background:linear-gradient(90deg,var(--a-cyan),var(--a-magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ashd-feature .stats small{color:var(--a-faint);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}

.ashd-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--a-s3);
  width:min(1320px,calc(100% - 36px));margin:0 auto;padding:16px 0 22px;
  color:var(--a-faint);font-size:12px;border-top:1px solid var(--a-border);
}
.ashd-foot b{letter-spacing:.3em;color:var(--a-muted);font-weight:600}

/* ── sign in ────────────────────────────────────────────────────────────── */
.ashd-signin{
  width:min(400px,100%);margin:0 auto;padding:var(--a-s4);
  border-radius:var(--a-r-lg);border:1px solid var(--a-border);
  background:rgba(10,14,24,.72);backdrop-filter:blur(14px);box-shadow:var(--a-shadow);
  text-align:left;
}
.ashd-signin h2{margin:0 0 4px;font-size:19px}
.ashd-signin p{margin:0 0 var(--a-s3);color:var(--a-muted);font-size:13px}
.ashd-field{margin-bottom:12px}
.ashd-field label{display:block;font-size:12px;color:var(--a-muted);margin-bottom:5px}
.ashd-field input{
  width:100%;padding:11px 13px;border-radius:var(--a-r-sm);
  border:1px solid var(--a-border);background:rgba(255,255,255,.04);
  color:var(--a-text);font-family:inherit;font-size:14px;
}
.ashd-field input:focus{outline:none;border-color:var(--a-cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.ashd-err{color:var(--a-danger);font-size:13px;margin:0 0 10px;min-height:1em}

/* ── dashboard (IMAGE 2) ────────────────────────────────────────────────── */
.ashd-hero-strip{
  display:flex;align-items:center;gap:var(--a-s4);
  padding:var(--a-s4) 0 var(--a-s3);
}
.ashd-hero-strip h1{margin:0;font-size:clamp(24px,3vw,36px);font-weight:800}
.ashd-hero-strip .sub{color:var(--a-muted);font-size:13.5px;margin-top:4px}
.ashd-eq{flex:1;height:44px;min-width:120px;opacity:.85}

.ashd-actions{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a-s3);
  margin-bottom:var(--a-s5);
}
.ashd-action{
  display:flex;align-items:center;gap:var(--a-s3);text-align:left;
  padding:24px 24px;border-radius:var(--a-r-lg);cursor:pointer;min-height:104px;
  border:1px solid var(--a-border);background:var(--a-surface);
  backdrop-filter:blur(10px);color:var(--a-text);font-family:inherit;
  transition:transform .16s, border-color .16s, background .16s, box-shadow .16s;
  position:relative;overflow:hidden;
}
.ashd-action:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:.9;
  background:linear-gradient(90deg,transparent,var(--a-cyan),var(--a-magenta),transparent);
}
/* A wash inside the card, brightest under the icon. Without it three glass
   rectangles on a dark page read as three empty rectangles. */
.ashd-action:after{
  content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(34,211,238,.16), transparent 68%);
}
.ashd-action:nth-child(2):after{background:radial-gradient(circle, rgba(167,139,250,.16), transparent 68%)}
.ashd-action:nth-child(3):after{background:radial-gradient(circle, rgba(232,121,249,.16), transparent 68%)}
.ashd-action:hover{transform:translateY(-2px);background:var(--a-surface-hover);
  border-color:var(--a-border-strong);box-shadow:var(--a-shadow-sm)}
.ashd-action:focus-visible{outline:2px solid var(--a-cyan);outline-offset:2px}
.ashd-action .txt{flex:1;min-width:0}
.ashd-action .txt b{display:block;font-size:15.5px;letter-spacing:.13em;text-transform:uppercase}
.ashd-action .txt small{display:block;color:var(--a-muted);font-size:12.5px;margin-top:4px}
.ashd-action .ic{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--a-border-strong);
  background:radial-gradient(circle at 32% 28%, rgba(34,211,238,.30), rgba(232,121,249,.16) 68%, transparent);
  box-shadow:0 0 20px rgba(34,211,238,.16);
}
.ashd-action .n{font-size:12px;color:var(--a-faint);margin-top:2px}

.ashd-sec{display:flex;align-items:baseline;gap:var(--a-s3);margin:0 0 var(--a-s3)}
.ashd-sec h2{margin:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-muted);font-weight:700}
.ashd-sec .grow{flex:1}
.ashd-sec a,.ashd-sec button.link{
  border:0;background:transparent;color:var(--a-cyan);cursor:pointer;
  font-family:inherit;font-size:12.5px;padding:0;
}
.ashd-sec button.link:hover{text-decoration:underline}

/* ── project cards (IMAGE 3) ────────────────────────────────────────────── */
.ashd-grid{
  display:grid;gap:var(--a-s3);
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.ashd-card{
  border-radius:var(--a-r-lg);overflow:hidden;cursor:pointer;position:relative;
  border:1px solid var(--a-border);background:var(--a-surface);
  transition:transform .16s, border-color .16s, box-shadow .16s;
  display:flex;flex-direction:column;
}
.ashd-card:hover{transform:translateY(-3px);border-color:var(--a-border-strong);
  box-shadow:0 20px 40px rgba(0,0,0,.46)}
.ashd-card:focus-visible{outline:2px solid var(--a-cyan);outline-offset:2px}
.ashd-shot{
  position:relative;aspect-ratio:16/9;background:#0a0e18;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ashd-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ashd-shot .ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:rgba(255,255,255,.22);
  background:linear-gradient(140deg,rgba(34,211,238,.12),rgba(232,121,249,.10));
}
.ashd-shot .dur{
  position:absolute;left:9px;bottom:9px;padding:3px 8px;border-radius:7px;
  background:rgba(2,4,10,.74);font-size:11.5px;color:#dbe3f2;letter-spacing:.02em;
}
.ashd-shot .type{
  position:absolute;right:9px;top:9px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(2,4,10,.7);border:1px solid var(--a-border-strong);color:#cfd9ef;
}
/* §16 — ONE secondary action, and it is small. A card is a door; a row of
   buttons on it is four doors and a decision. */
.ashd-shot .peek{
  position:absolute;right:9px;bottom:9px;opacity:0;transition:opacity .15s;
  padding:4px 10px;border-radius:8px;font-size:11.5px;
  background:rgba(2,4,10,.78);border:1px solid var(--a-border-strong);
  color:#dbe3f2;cursor:pointer;font-family:inherit;
}
.ashd-card:hover .peek,.ashd-card:focus-within .peek{opacity:1}
.ashd-cbody{padding:12px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.ashd-ctop{display:flex;align-items:flex-start;gap:8px}
.ashd-ctop b{flex:1;font-size:14.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.ashd-more{
  border:0;background:transparent;color:var(--a-muted);cursor:pointer;
  font-size:17px;line-height:1;padding:2px 5px;border-radius:7px;flex:0 0 auto;
}
.ashd-more:hover{background:var(--a-surface-2);color:var(--a-text)}
.ashd-badge{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  padding:3px 9px;border-radius:999px;font-size:11px;
  border:1px solid var(--a-border);color:var(--a-muted);background:rgba(255,255,255,.03);
}
.ashd-badge.new{color:#93c5fd;border-color:rgba(147,197,253,.34)}
.ashd-badge.source{color:var(--a-cyan);border-color:rgba(34,211,238,.34)}
.ashd-badge.mn{color:var(--a-success);border-color:rgba(52,211,153,.34)}
.ashd-badge.dub{color:var(--a-magenta);border-color:rgba(232,121,249,.34)}
.ashd-badge.error{color:var(--a-danger);border-color:rgba(251,113,133,.4)}
.ashd-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.ashd-bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--a-cyan),var(--a-magenta))}
/* The rule above «Сүүлд зассан», on every card. It is decoration and says so:
   a bar that is sometimes a progress meter and sometimes a divider is a bar
   nobody can read. */
.ashd-rule{height:2px;border-radius:1px;opacity:.55;
  background:linear-gradient(90deg,var(--a-cyan),var(--a-violet) 55%,var(--a-magenta))}
.ashd-cfoot{display:flex;align-items:center;gap:7px;color:var(--a-faint);font-size:11.5px;margin-top:auto}
.ashd-cfoot .ashd-av{width:19px;height:19px;font-size:8.5px}

/* ── library toolbar ────────────────────────────────────────────────────── */
.ashd-libhead{padding:var(--a-s4) 0 var(--a-s3)}
.ashd-libhead h1{margin:0;font-size:clamp(24px,3vw,34px);letter-spacing:.14em;
  text-transform:uppercase;font-weight:800}
.ashd-libhead .sub{color:var(--a-muted);font-size:13px;margin-top:6px}
.ashd-tools{display:flex;align-items:center;gap:var(--a-s2);margin:var(--a-s3) 0 var(--a-s4);flex-wrap:wrap}
.ashd-search{
  flex:1;min-width:200px;max-width:400px;position:relative;
}
.ashd-search input{
  width:100%;padding:10px 13px 10px 36px;border-radius:var(--a-r-sm);
  border:1px solid var(--a-border);background:var(--a-surface);
  color:var(--a-text);font-family:inherit;font-size:13.5px;
}
.ashd-search input:focus{outline:none;border-color:var(--a-cyan)}
.ashd-search .mag{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--a-faint);font-size:13px;pointer-events:none}
.ashd-seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--a-border);
  background:var(--a-surface)}
.ashd-seg button{
  border:0;background:transparent;color:var(--a-muted);cursor:pointer;
  padding:6px 15px;border-radius:999px;font-family:inherit;font-size:13px;
}
.ashd-seg button.on{background:var(--a-surface-2);color:var(--a-text)}

.ashd-empty{
  padding:var(--a-s6) var(--a-s4);text-align:center;border-radius:var(--a-r-lg);
  border:1px dashed var(--a-border-strong);background:var(--a-surface);
}
.ashd-empty .em{font-size:34px;margin-bottom:12px;opacity:.6}
.ashd-empty h3{margin:0 0 6px;font-size:17px}
.ashd-empty p{margin:0 0 var(--a-s3);color:var(--a-muted);font-size:13.5px}

/* ── tutorials (§34) ────────────────────────────────────────────────────── */
.ashd-tuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--a-s2)}
.ashd-tut{
  display:flex;align-items:center;gap:11px;padding:10px 12px;cursor:pointer;
  border-radius:var(--a-r);border:1px solid var(--a-border);background:var(--a-surface);
  color:var(--a-text);font-family:inherit;text-align:left;
}
.ashd-tut:hover{background:var(--a-surface-hover)}
.ashd-tut .play{
  width:36px;height:36px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  background:linear-gradient(140deg,rgba(34,211,238,.22),rgba(232,121,249,.16));
  border:1px solid var(--a-border);
}
.ashd-tut b{display:block;font-size:13px;font-weight:600}
.ashd-tut small{color:var(--a-faint);font-size:11px}

/* ── team feed (§10, §11) ───────────────────────────────────────────────── */
.ashd-feed{display:flex;flex-direction:column;gap:2px}
.ashd-feed-row{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--a-r);
  cursor:pointer;border:1px solid transparent;
}
.ashd-feed-row:hover{background:var(--a-surface);border-color:var(--a-border)}
.ashd-feed-row .who{font-size:13.5px;font-weight:600;flex:0 0 auto}
.ashd-feed-row .what{flex:1;min-width:0;font-size:13.5px;color:var(--a-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ashd-feed-row .what b{color:var(--a-text);font-weight:600}
.ashd-feed-row .when{color:var(--a-faint);font-size:12px;flex:0 0 auto}
.ashd-tagsm{padding:2px 8px;border-radius:999px;font-size:10.5px;
  border:1px solid var(--a-border);color:var(--a-muted);flex:0 0 auto}

/* ── new project (§18, §45) ─────────────────────────────────────────────── */
.ashd-np{display:flex;flex-direction:column;gap:var(--a-s3);padding-bottom:var(--a-s4)}
.ashd-drop{
  min-height:min(48vh,420px);border-radius:var(--a-r-xl);
  border:1.5px dashed var(--a-border-strong);
  background:
    radial-gradient(600px 300px at 50% 30%, rgba(34,211,238,.09), transparent 70%),
    var(--a-surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--a-s3);
  text-align:center;padding:var(--a-s5) var(--a-s4);cursor:pointer;position:relative;
  transition:border-color .16s, background .16s;
}
.ashd-drop:hover,.ashd-drop.over{border-color:var(--a-cyan);
  background:radial-gradient(600px 300px at 50% 30%, rgba(34,211,238,.16), transparent 70%), var(--a-surface-hover)}
.ashd-drop input[type=file]{display:none}
.ashd-drop .plus{
  width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--a-text);
  border:1px solid var(--a-border-strong);
  background:radial-gradient(circle at 34% 28%, rgba(34,211,238,.28), rgba(232,121,249,.16) 66%, transparent);
  box-shadow:0 0 34px rgba(34,211,238,.2);
}
.ashd-drop h2{margin:0;font-size:19px}
.ashd-drop p{margin:0;color:var(--a-muted);font-size:13.5px}
.ashd-shell-tl{
  border-radius:var(--a-r-lg);border:1px solid var(--a-border);background:var(--a-surface);
  padding:12px 14px;
}
.ashd-shell-tl .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--a-faint)}
.ashd-track{height:44px;border-radius:9px;margin-top:9px;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px),
             rgba(255,255,255,.03);
  border:1px solid var(--a-border);display:flex;align-items:center;padding:0 10px;
  color:var(--a-faint);font-size:12px}
.ashd-track.mn{height:26px}
.ashd-prog{margin-top:12px}
.ashd-prog .lab{display:flex;justify-content:space-between;font-size:12.5px;color:var(--a-muted);margin-bottom:6px}

/* ── modal ──────────────────────────────────────────────────────────────── */
.ashd-modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(2,4,10,.68);backdrop-filter:blur(4px);padding:var(--a-s4);
}
.ashd-modal-card{
  width:min(430px,100%);padding:var(--a-s4);border-radius:var(--a-r-lg);
  background:#0c101c;border:1px solid var(--a-border-strong);box-shadow:var(--a-shadow);
}
.ashd-modal-card h3{margin:0 0 6px;font-size:17px}
.ashd-modal-card p{margin:0 0 var(--a-s3);color:var(--a-muted);font-size:13.5px}
.ashd-modal-row{display:flex;gap:var(--a-s2);justify-content:flex-end;margin-top:var(--a-s3)}

/* ── responsive (§36) ───────────────────────────────────────────────────── */
@media (max-width:1080px){
  .ashd-hero{grid-template-columns:1fr;justify-items:center}
  .ashd-side{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .ashd-side.right{align-items:stretch}
  .ashd-actions{grid-template-columns:1fr 1fr}
  .ashd-actions .ashd-action:first-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .ashd-wrap{padding:0 14px var(--a-s5)}
  .ashd-head{padding:11px 14px;gap:10px;flex-wrap:wrap}
  .ashd-head .ashd-crumb{order:3;width:100%}
  .ashd-logo b{font-size:15px;letter-spacing:.26em}
  .ashd-logo small{display:none}
  .ashd-chips{order:4;width:100%;padding-bottom:2px}
  .ashd-actions{grid-template-columns:1fr}
  .ashd-grid{grid-template-columns:1fr}
  .ashd-hero-strip{flex-direction:column;align-items:flex-start;gap:10px}
  .ashd-eq{width:100%}
  .ashd-tuts{display:flex;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .ashd-tut{flex:0 0 200px;scroll-snap-align:start}
  .ashd-side{flex-direction:column;width:100%}
  .ashd-feature{width:100%}
  .ashd-tools .ashd-btn{flex:1}
}

/* ── motion, and the people who do not want it (§38) ────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ashd-action,.ashd-card,.ashd-btn{transition:none}
  .ashd-card:hover,.ashd-action:hover{transform:none}
}

/* Focus is never invisible: every interactive element above declares a
   :focus-visible ring, and this is the catch-all for anything added later. */
.ashd-page :focus-visible{outline:2px solid var(--a-cyan);outline-offset:2px}

/* ── §15/§20 — the team strip on the ASHD Team dashboard ─────────────────── */
.ashd-members{
  display:grid;gap:var(--a-s2);margin-bottom:var(--a-s5);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.ashd-member{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-radius:var(--a-r);background:var(--a-surface);
  border:1px solid var(--a-border);backdrop-filter:blur(14px);
}
.ashd-member .who{min-width:0;flex:1}
.ashd-member .who b{display:block;font-size:14px}
.ashd-member .who small{display:block;font-size:11.5px;color:var(--a-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ashd-member .role{font-size:9.5px;letter-spacing:.14em;color:var(--a-faint)}
.ashd-presencekey{display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:var(--a-faint)}
.ashd-presencekey .dot{margin-left:8px}
.ashd-muted{color:var(--a-muted);font-size:13px}