/* Premium containers for the student app (founder 2026-10-10: "I want premium design like this for the containers", the
   Connect 3D profile cards, then "Fix all the other pages"). One file for every app page: nginx adds it after each
   page's own styles on app.tanimawoai.com, and every rule starts with html.taa-app, so the website never gets it.
   It changes how containers LOOK, not how they move: the pages' own effects (app-fx.js, app-home-fx.js, *-fx.js) keep
   their tilt, glare and rise-in. Rounded corners need !important (square.css squares everything).
   - FLAT containers (a plain dark fill) get the profile card's deep blue gradient, glowing edge and depth.
   - DESIGNED containers (heroes, Top builders, achievement cards... with their own picture or gradient) keep their
     background and get the rounded corners, edge and depth only.
   - Inputs and buttons inside them: rounded, glassy fields; gradient main buttons.
   Not the Code Lab (an editor needs its space) or Connect (its own Teams look and profile cards). */

/* ---------- Flat containers: the full premium card ---------- */
html.taa-app :is(.ahx-stat, .ahx-qa-c, .ah-site, .mw-card, .mx-tile, .mx-trend, .qx-fact, div.sa-card, details.sa-hl, .st-card,
  .register-panel, .partner-card, .nx-tile, .fp-head, .bd-card, .bd-side-card, .hw-prompt, .ah-mine-empty, .mw-empty) {
  background: linear-gradient(180deg, #0d1730 0%, #0a1226 48%, #080f20 100%) !important;
  border: 1px solid rgba(120, 170, 255, 0.22) !important;
  box-shadow: 0 26px 50px -32px rgba(0, 0, 0, 0.95), 0 18px 44px -36px rgba(31, 123, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Small cards and tiles */
html.taa-app :is(.ahx-stat, .ahx-qa-c, .ah-site, .mw-card, .mx-tile, .qx-fact, div.sa-card, .partner-card, .nx-tile, .bd-card, .bd-side-card, .ah-tile, .ach-card, .sx-done, .qx-item) { border-radius: 18px !important; }
/* Panels and heroes */
html.taa-app :is(.mx-trend, details.sa-hl, .st-card, .register-panel, .fp-head, .hw-prompt, .ah-mine-empty, .mw-empty,
  .ahx-hero, .ahx-tip, .atb, .ahb-live, .ahb-cert, .ahb-ring-wrap, .ahx-stats, .mx-hero, .qx-hero, section.sa-card, .sa-map,
  .ach-summary, .sx-hero, .nx-hero, .hw-step, .hw-done) { border-radius: 22px !important; }
/* Rows in a list (Notifications) */
html.taa-app .fp-n { border-radius: 16px !important; }

/* ---------- Designed containers: keep their background, add the edge and depth ---------- */
html.taa-app :is(.ah-tile, .ahx-hero, .ahx-tip, .atb, .ahb-live, .ahb-cert, .ahb-ring-wrap, .ahx-stats, .mx-hero, .qx-hero,
  section.sa-card, .sa-map, .ach-card, .ach-summary, .sx-hero, .sx-done, .fp-n, .nx-hero, .hw-step, .hw-done) {
  border-color: rgba(120, 170, 255, 0.24) !important;
  box-shadow: 0 28px 54px -34px rgba(0, 0, 0, 0.95), 0 18px 44px -38px rgba(31, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* Top builders keeps its gold edge */
html.taa-app .atb { border-color: rgba(251, 191, 36, 0.32) !important; }

/* Rounded corners need the inside clipped: pictures at the top of a card follow its corners */
html.taa-app :is(.ah-site, .ahx-qa-c, div.sa-card, .nx-tile, .ah-tile, .ahx-hero, .atb, .ahb-live, .ahb-ring-wrap, .mx-hero, .qx-hero, section.sa-card, .sx-hero, .sx-done, .nx-hero, .st-card) { overflow: hidden; }
html.taa-app .mw-card :is(.mx-cover, .mx-ph, .mc-pic) { border-radius: 16px !important; overflow: hidden; }
html.taa-app .mw-card > :first-child:is(.mx-cover, .mc-pic, a.mx-cover) { border-radius: 17px 17px 12px 12px !important; }
html.taa-app .ah-site > :first-child, html.taa-app .ah-site-pic { border-radius: 17px 17px 0 0 !important; }
html.taa-app .partner-card img, html.taa-app .bd-card img { border-radius: 12px !important; }

/* ---------- Hover: the glowing edge, like the profile card (the pages' own effects still do the 3D) ---------- */
html.taa-app :is(.ahx-qa-c, .ah-site, .mw-card, .mx-tile, div.sa-card, .partner-card, .nx-tile, .bd-card, .bd-side-card, .ah-tile, .ach-card, .fp-n, .qx-fact) {
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease-out;
}
html.taa-app :is(.ahx-qa-c, .ah-site, .mw-card, .mx-tile, div.sa-card, .partner-card, .nx-tile, .bd-card, .bd-side-card, .ah-tile, .ach-card, .fp-n, .qx-fact):hover {
  border-color: rgba(56, 182, 255, 0.6) !important;
  box-shadow: 0 34px 60px -32px rgba(0, 0, 0, 0.95), 0 0 34px -10px rgba(56, 182, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Fields and buttons inside the app's pages ---------- */
html.taa-app body:not(.lab-bare):not(.cn-page) main :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="number"], input[type="tel"], input[type="password"], input:not([type]), select, textarea):not(.cs-in):not([class*="cn-"]) {
  border-radius: 12px !important;
}
html.taa-app main :is(.register-panel, .st-card, .partner-card, .bd-side-card, .bd-main) :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="number"], input[type="tel"], input:not([type]), select, textarea) {
  background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #fff;
}
html.taa-app main :is(.register-panel, .st-card, .partner-card, .bd-side-card, .bd-main) :is(input, select, textarea):focus {
  outline: none; border-color: #38b6ff !important; box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.18) !important;
}
html.taa-app body:not(.lab-bare):not(.cn-page) main :is(.btn, .st-btn, .bd-ask, .fp-head button, .sa-card button, .partner-card button, .register-panel button):not(.cn-act):not(.cs-tab) {
  border-radius: 12px !important;
}
html.taa-app main :is(.btn-primary, .st-btn.is-primary, .register-panel button[type="submit"], .partner-card .btn-primary) {
  background: linear-gradient(135deg, #1f7bff, #38b6ff) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 12px 26px -12px rgba(31, 123, 255, 0.9) !important; transition: transform 0.15s ease, box-shadow 0.2s ease;
}
html.taa-app main :is(.btn-primary, .st-btn.is-primary, .register-panel button[type="submit"]):hover:not(:disabled) {
  transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(31, 123, 255, 1) !important;
}
/* Small pills and chips inside cards stay round */
html.taa-app main :is(.mw-pill, .mx-pill, .ach-pill, .sa-pill, .nx-pill, .bd-tag, .partner-tag) { border-radius: 999px !important; }

/* Chips and filters: pills; small buttons and selects: rounded; icon squares in cards: rounded */
html.taa-app body:not(.lab-bare):not(.cn-page) main :is(.bd-chip, .nx-chip, .mx-chip, .ach-filters button, .sa-tabs a, .sa-tabs button, .sa-tag, .sa-rank-n, .ah-site-st, .qx-new, .sx-chip, .hw-pill, .hw-hero-tag) { border-radius: 999px !important; }
html.taa-app body:not(.lab-bare):not(.cn-page) main :is(.bd-sort, .nx-mark, .mx-sort, .sa-btn, .sa-ibtn, .sa-sel, .hw-copy, .ahb-btn, .bd-ask, .fp-head button) { border-radius: 10px !important; }
html.taa-app body:not(.lab-bare):not(.cn-page) main :is(.ach-ic, .ach-level-ic, .nx-ic, .ahx-ic, .ahb-ic, .ahx-stat-ic, .ahx-qa-ic, .sa-kpi-ic, .mx-stats, .mx-bar, .ahb-rpic) { border-radius: 12px !important; }
html.taa-app body:not(.lab-bare):not(.cn-page) main .hw-wrap a:not([class]) { border-radius: 12px !important; }

/* The pages' own hover glare and sheen layers follow the rounded corners */
html.taa-app :is(.afx-glare, .a3d-sheen) { border-radius: inherit !important; }
/* Top builders (app home): rounded rows, place and buttons */
html.taa-app :is(.atb-row a, .atb-you, .atb-all, .atb-live, .atb-ic) { border-radius: 14px !important; }
html.taa-app .atb-live, html.taa-app .atb-ev, html.taa-app .bd-badge { border-radius: 999px !important; }
/* Settings: the side menu is a premium panel too */
html.taa-app .st-side { border-radius: 18px !important; background: linear-gradient(180deg, #0d1730, #0a1226) !important; border: 1px solid rgba(120, 170, 255, 0.2) !important; box-shadow: 0 22px 44px -32px rgba(0, 0, 0, 0.95) !important; overflow: hidden; }
html.taa-app .st-side :is(a, button) { border-radius: 10px !important; }

@media (prefers-reduced-motion: reduce) {
  html.taa-app main :is(.btn-primary, .st-btn.is-primary):hover { transform: none; }
}