/* assets/css/hub.css — the Projects hub (code/projects.php) and the Apps hub (app/index.php).
   Projects = blue/cyan · Apps = purple/pink (set by --c1 --c2 --soft --deep on .hub). */
.hub { --ink: #1E1B4B; --muted: #64748B; --line: #E2E8F0; --hbg: #F7F7FD; color: var(--ink); background: var(--hbg); padding-bottom: 8px; }
.hub-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.hub h1, .hub h2, .hub h3 { font-family: var(--tp-head, 'Baloo 2'), 'Nunito', sans-serif; font-weight: 800; margin: 0; letter-spacing: -.01em; line-height: 1.1; }
.hub .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- hero: short "what is this" + "What you can build" ---------- */
.hub-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 92% 10%, rgba(255,255,255,.18) 0 120px, transparent 121px), linear-gradient(135deg, var(--c1), var(--c2)); }
.hub-hero .hub-wrap { padding-top: 24px; padding-bottom: 18px; }
.hub-crumb { display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,.2); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hub-crumb .tp-ic { width: 15px; height: 15px; }
.hub-hero h1 { font-size: 44px; margin-top: 8px; color: #fff; }
.hub-lead { font-size: 17px; font-weight: 700; max-width: 640px; margin: 4px 0 12px; opacity: .97; }
.hub-build-h { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin: 4px 0 6px; }
.hub-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, max-content); gap: 6px 26px; }
.hub-kinds li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.hub-kinds li::before { content: '✓'; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--deep); display: grid; place-items: center; font-size: 12px; font-weight: 900; flex-shrink: 0; }
@media (max-width: 620px) { .hub-hero h1 { font-size: 34px; } .hub-lead { font-size: 15.5px; } .hub-kinds { grid-template-columns: 1fr 1fr; gap: 5px 12px; } .hub-kinds li { font-size: 13.5px; } }

/* ---------- tabs: "Glass folder". One rounded card (tint + border + soft glow of the open tab's colour)
   holds the tabs and the panels; the open tab joins the card with no line between. ---------- */
.hub-sect { --t: #DB2777; --tsoft: #FDF2F8; padding: 64px 0 30px; }
.hub-sect[data-on="examples"] { --t: #7C3AED; --tsoft: #F5F3FF; }
.hub-sect[data-on="shared"]   { --t: #0891B2; --tsoft: #ECFEFF; }
.hub-sect[data-on="team"]     { --t: #CA8A04; --tsoft: #FEFCE8; }
.hub-sect[data-on="notify"]   { --t: #E11D48; --tsoft: #FFF1F2; }
.hub-pane { position: relative; border-radius: 28px; background: linear-gradient(180deg, var(--tsoft), #fff 85%);
  border: 2px solid color-mix(in srgb, var(--t) 40%, #fff);
  box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--t) 70%, transparent), 0 6px 16px -8px rgba(15, 23, 42, .2);
  transition: border-color .3s, box-shadow .3s, background .3s; }
.hub-pane > .hub-wrap { max-width: none; padding: 0 18px 22px; overflow-x: clip; }
.hub-tabs-bar { position: relative; z-index: 20; margin-top: -50px; padding: 0 14px; }   /* scrolls away with its card (not sticky) */
.hub-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; }
.hub-tabs button { --c: #DB2777; position: relative; min-width: 0; height: 40px; margin-bottom: 4px; border-radius: 18px 18px 0 0; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--c) 25%, #fff); border-bottom: 0; padding: 0 10px;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 85%, #000);
  font: inherit; font-weight: 900; font-size: 15px; white-space: nowrap; display: flex; gap: 7px; align-items: center; justify-content: center;
  box-shadow: 0 -6px 14px -10px rgba(15, 23, 42, .4); transition: background .2s, color .2s, height .2s; }
.hub-tabs button[data-hub-tab="examples"] { --c: #7C3AED; }
.hub-tabs button[data-hub-tab="shared"]   { --c: #0891B2; }
.hub-tabs button[data-hub-tab="team"]     { --c: #CA8A04; }
.hub-tabs button[data-hub-tab="notify"]   { --c: #E11D48; }
.hub-tabs button:hover { background: color-mix(in srgb, var(--c) 20%, #fff); }
.hub-tabs button.on, .hub-tabs button.on:hover { height: 50px; margin-bottom: -2px; z-index: 2; background: var(--tsoft); color: var(--c);
  border-color: color-mix(in srgb, var(--t) 40%, #fff); box-shadow: 0 -10px 22px -12px color-mix(in srgb, var(--t) 70%, transparent); }
.hub-tabs button .ti { font-size: 17px; line-height: 1; flex-shrink: 0; }
.hub-tabs button.on .ti { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: var(--c); font-size: 15px; box-shadow: 0 6px 12px -6px var(--c); }
.hub-tabs button .l, .hub-tabs button .s { overflow: hidden; text-overflow: ellipsis; }
.hub-tabs button .n { background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); border-radius: 999px; font-size: 11.5px; padding: 1px 7px; flex-shrink: 0; }
.hub-tabs button.on .n { background: var(--c); color: #fff; }
.hub-tabs .s { display: none; }
.hub-dot { position: absolute; top: -6px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: #EF4444; color: #fff; font-style: normal; font-size: 10.5px; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 760px) {
  .hub-sect { padding-top: 58px; }
  .hub-pane { border-radius: 22px; }
  .hub-pane > .hub-wrap { padding: 0 10px 16px; }
  .hub-tabs-bar { margin-top: -44px; padding: 0 8px; }
  .hub-tabs { gap: 5px; } .hub-tabs .l { display: none; } .hub-tabs .s { display: inline; }
  .hub-tabs button { height: 36px; border-radius: 14px 14px 0 0; font-size: 13px; gap: 4px; padding: 0 4px; }
  .hub-tabs button.on, .hub-tabs button.on:hover { height: 44px; }
}
@media (max-width: 420px) {
  .hub-tabs button:not(.on) .ti { display: none; }   /* room for the full name ("Examples") */
  .hub-tabs button { font-size: 11.5px; gap: 3px; letter-spacing: -.02em; } .hub-tabs button .ti { font-size: 14px; }
  .hub-tabs button.on .ti { width: 22px; height: 22px; font-size: 12px; border-radius: 8px; }
  .hub-tabs button .n { position: absolute; top: -8px; right: 4px; font-size: 10px; padding: 0 5px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .hub-tabs button:not(.on) .n { display: none; }
  /* the open tab takes the width it needs (its name + icon), the others share the rest — "Examples" / "Alerts" used to be cut to "Exampl…" / "Al…" */
  .hub-tabs-bar { padding: 0 4px; }
  .hub-tabs { display: flex; gap: 3px; }
  .hub-tabs button { flex: 1 1 0; padding: 0 2px; }
  .hub-tabs button.on { flex: 0 0 auto; padding: 0 6px; }
}
/* the content slides in from the side of the tab you tapped */
.hub-panel-tab.in-r { animation: hubInR .38s cubic-bezier(.2, .8, .2, 1); }
.hub-panel-tab.in-l { animation: hubInL .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes hubInR { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hubInL { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hub-panel-tab.in-r, .hub-panel-tab.in-l { animation: none; } }

/* ---------- search + sort ---------- */
.hub-panel-tab[hidden] { display: none; }
.hub-tools { display: flex; gap: 8px; align-items: center; margin: 16px 0 6px; }
.hub-search { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; height: 44px; color: #94A3B8; }
.hub-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.hub-search input { border: 0; outline: 0; flex: 1; font: 700 15px 'Nunito', sans-serif; color: var(--ink); background: none; min-width: 0; padding: 0; }
.hub-search:focus-within { border-color: var(--c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 18%, transparent); }
.hub-sort select { height: 44px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 0 10px; font: 800 14px 'Nunito', sans-serif; color: var(--ink); max-width: 150px; }
@media (max-width: 480px) { .hub-sort select { width: 118px; font-size: 13px; padding: 0 6px; } }
.hub-count { color: var(--muted); font-weight: 800; font-size: 13.5px; margin: 6px 0 10px; min-height: 1em; }
.hub-admin { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---------- grid: 2 a row on a phone, 4 on tablet / desktop ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.hub-card { position: relative; background: #fff; border: 1px solid rgba(15,23,42,.06); box-shadow: 0 16px 30px -18px rgba(15,23,42,.5), 0 2px 6px -2px rgba(15,23,42,.12); border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 7px; text-align: left; transition: transform .18s, box-shadow .18s; min-width: 0; }
.hub-card[hidden] { display: none; }
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -18px rgba(15,23,42,.55), 0 2px 6px -2px rgba(15,23,42,.12); }
.hub-card.is-recent { border-color: color-mix(in srgb, var(--c1) 55%, white); }
.hub-card.pl-flash { animation: hubFlash .7s; }
@keyframes hubFlash { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 35%, transparent); } }
.hub-thumb { display: block; border-radius: 14px; overflow: hidden; text-decoration: none; padding: 0; border: 0; background: none; cursor: pointer; }
.hub-thumb .pi { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 14px; box-shadow: none; }
.hub-thumb .pi svg { width: auto; height: 46%; }
.hub-card h3 { font-size: 17px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.hub-card h3 a, .hub-card h3 button { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.hub-card .pl-desc { display: none; }
.hub-card .pl-lock .tp-ic { width: 14px; height: 14px; vertical-align: -1px; color: #7C3AED; }
.hub-meta { font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.3; }
.hub-desc { font-size: 13px; color: #475569; font-weight: 600; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hub-chips:empty { display: none; }
.hub-chips .pl-chip { font-size: 11px; padding: 2px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 900; background: var(--soft); color: var(--deep); }
.hub-ribbon { position: absolute; top: -9px; left: 12px; z-index: 2; background: var(--c1); color: #fff; font-size: 11.5px; font-weight: 900; border-radius: 999px; padding: 2px 9px; box-shadow: 0 4px 10px -4px var(--c1); }
.hub-pinmark { position: absolute; top: 18px; left: 18px; z-index: 2; font-size: 15px; display: none; }
.hub-card.is-pinned .hub-pinmark { display: block; }
.hub-more { position: absolute; top: 18px; right: 18px; z-index: 3; width: 32px; height: 32px; border-radius: 10px; border: 0; background: rgba(255,255,255,.88); color: #475569; display: grid; place-items: center; font-size: 18px; font-weight: 900; cursor: pointer; line-height: 1; }
.hub-row { display: flex; gap: 6px; margin-top: auto; padding-top: 2px; }
.hub-row > * { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; border-radius: 10px; padding: 8px 6px; font: inherit; font-weight: 900; font-size: 13px; background: var(--soft); color: var(--deep); text-align: center; text-decoration: none; cursor: pointer; }
.hub-row > .pri { background: var(--c1); color: #fff; }
.hub-row > [disabled] { opacity: .55; cursor: default; }
@media (max-width: 420px) { .hub-card { padding: 10px; border-radius: 18px; } .hub-card h3 { font-size: 15.5px; } .hub-row { gap: 4px; } .hub-row > * { font-size: 12px; padding: 7px 3px; } .hub-more { top: 15px; right: 15px; } }

/* ⋯ menu (Projects, Shared apps) */
.hub-card .pl-acts { display: none; position: absolute; top: 54px; right: 10px; z-index: 10; width: 196px; flex-direction: column; gap: 2px; align-self: auto; justify-content: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 22px 44px -18px rgba(30,27,75,.45); }
.hub-card.menu-open { z-index: 12; }
.hub-card.menu-open .pl-acts:not([hidden]) { display: flex; }
.hub-card .pl-act, .hub-card .pl-act.pin-btn { width: 100%; height: auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; border: 0; background: none; border-radius: 11px; padding: 9px 10px; font: 800 14px 'Nunito', sans-serif; color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer; transform: none; }
.hub-card .pl-act:hover, .hub-card .pl-act.pin-btn:hover { background: var(--soft); color: var(--deep); transform: none; }
.hub-card .pl-act .tp-ic, .hub-card .pl-act svg { width: 18px; height: 18px; color: var(--c1); flex-shrink: 0; }
.hub-card .pl-act.del, .hub-card .pl-act.del .tp-ic { color: #DC2626; background: none; }
.hub-card .pl-act.del:hover { background: #FEF2F2; }
.hub-card .pl-act[disabled] { opacity: .45; cursor: default; background: none; }

/* the "Create New" card — always first */
.hub-newcard { border: 2.5px dashed color-mix(in srgb, var(--c1) 55%, white); background: linear-gradient(160deg, var(--soft), #fff); align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 210px; font: inherit; color: inherit; cursor: pointer; }
.hub-newcard .plus { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 12px 20px -10px var(--c1); }
.hub-newcard b { font-family: var(--tp-head, 'Baloo 2'), sans-serif; font-size: 19px; color: var(--deep); line-height: 1.1; }
.hub-newcard small { font-weight: 700; color: var(--muted); font-size: 12.5px; }
.hub-newcard[disabled] { opacity: .6; cursor: default; }
@media (max-width: 480px) { .hub-newcard { min-height: 180px; } .hub-newcard b { font-size: 16.5px; } .hub-newcard .plus { width: 52px; height: 52px; font-size: 28px; } }

/* buttons, empty states, nothing found */
.hub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 14px; padding: 11px 16px; font: inherit; font-weight: 900; font-size: 15px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; box-shadow: 0 10px 18px -10px var(--c1); text-decoration: none; cursor: pointer; }
.hub-btn.sec { background: var(--soft); color: var(--deep); box-shadow: none; }
.hub-btn.sm { padding: 7px 12px; font-size: 13.5px; border-radius: 11px; }
.hub-btn.done { opacity: .7; cursor: default; }
.hub-empty, .hub-none { grid-column: 1 / -1; background: #fff; border: 1px dashed #CBD5E1; border-radius: 20px; padding: 26px 18px; text-align: center; color: var(--muted); font-weight: 700; }
.hub-none[hidden] { display: none; }
.hub-empty .e, .hub-none .e { font-size: 40px; line-height: 1.2; }
.hub-empty b, .hub-none b { display: block; font-family: var(--tp-head, 'Baloo 2'), sans-serif; font-size: 21px; color: var(--ink); margin: 4px 0; }
.hub-empty p, .hub-none p { max-width: 480px; margin: 6px auto 0; font-size: 14.5px; color: #475569; }
.hub-empty .pts { list-style: none; padding: 0; margin: 12px auto 0; max-width: 420px; text-align: left; display: grid; gap: 6px; font-size: 14px; color: #334155; }
.hub-empty .pts li { display: flex; gap: 8px; }
.hub-empty .pts li::before { content: '•'; color: var(--c1); font-weight: 900; }
.hub-empty .btns, .hub-none .hub-btn { margin-top: 14px; }
.hub-empty .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* My Team */
.hub-team { margin-top: 16px; }
.hub-teambar { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.hub-teambar .tl { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 20px; flex-shrink: 0; }
.hub-teambar .tt { flex: 1; min-width: 160px; }
.hub-teambar b { font-family: var(--tp-head, 'Baloo 2'), sans-serif; font-size: 19px; display: block; }
.hub-teambar small { display: block; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.hub-teambar.is-hidden { opacity: .7; }
.hub-teambar.is-banned { border-color: #FCA5A5; background: #FEF2F2; }
.hub-teamtools { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; margin-bottom: -6px; }
.hub-invites { display: grid; gap: 8px; margin-top: 16px; }
.hub-inv { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 16px; padding: 10px 12px; font-weight: 700; color: #78350F; }
.hub-inv .b { display: flex; gap: 6px; }
.hub-teamnote { grid-column: span 3; align-self: center; display: flex; align-items: center; gap: 10px; border-radius: 20px; background: #fff; border: 1px dashed #CBD5E1; padding: 14px 16px; color: #475569; font-weight: 700; font-size: 14px; }
@media (max-width: 699px) { .hub-teamnote { grid-column: span 1; flex-direction: column; text-align: center; justify-content: center; } }

/* Examples groups */
.hub-group { margin-top: 18px; }
.hub-group[hidden] { display: none; }
.hub-group h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 21px; margin-bottom: 10px; }
.hub-group h2 small { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted); }
.hub-gi { width: 34px; height: 34px; border-radius: 12px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--gc) 16%, #fff); }

/* ---------- everything else, after the list ---------- */
.hub-learn { margin: 38px 0 28px; }
.hub-learn > h2 { font-size: 30px; }
.hub-learn > p.sub { color: var(--muted); font-weight: 700; margin: 4px 0 16px; }
.hub-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .hub-steps { grid-template-columns: 1fr; } }
.hub-step { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; gap: 12px; }
.hub-step .num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--tp-head, 'Baloo 2'), sans-serif; font-size: 22px; font-weight: 800; background: linear-gradient(135deg, var(--c1), var(--c2)); flex-shrink: 0; }
.hub-step b { font-family: var(--tp-head, 'Baloo 2'), sans-serif; font-size: 19px; display: block; }
.hub-step p { margin: 2px 0 0; color: #475569; font-weight: 600; font-size: 14.5px; }
.hub-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .hub-two { grid-template-columns: 1fr; } }
.hub-panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.hub-panel h3 { font-size: 21px; margin-bottom: 10px; }
.hub-levels { display: grid; gap: 10px; }
.hub-lv { border-radius: 16px; padding: 12px 14px; }
.hub-lv b { font-family: var(--tp-head, 'Baloo 2'), sans-serif; font-size: 17px; }
.hub-lv p { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.hub-lv.l1 { background: #F0FDF4; color: #14532D; } .hub-lv.l2 { background: #FFFBEB; color: #78350F; } .hub-lv.l3 { background: #FDF2F8; color: #831843; }
.hub-need { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub-need li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 14.5px; color: #334155; }
.hub-need .i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); font-size: 17px; flex-shrink: 0; }
.hub-faq details { border-bottom: 1px solid var(--line); padding: 10px 2px; }
.hub-faq details:last-child { border-bottom: 0; }
.hub-faq summary { cursor: pointer; font-weight: 900; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.hub-faq summary::-webkit-details-marker { display: none; }
.hub-faq summary::after { content: '+'; font-size: 20px; color: var(--c1); line-height: 1; }
.hub-faq details[open] summary::after { content: '–'; }
.hub-faq p { margin: 6px 0 0; color: #475569; font-weight: 600; font-size: 14.5px; }
.hub-cross { margin-top: 14px; border-radius: 22px; padding: 18px; color: #fff; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hub-cross b { font-family: var(--tp-head, 'Baloo 2'), sans-serif; font-size: 22px; display: block; }
.hub-cross p { margin: 2px 0 0; font-weight: 700; opacity: .95; }
.hub-cross a { margin-left: auto; background: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 900; text-decoration: none; }
.hub-cross.to-app { background: linear-gradient(135deg, #8B5CF6, #EC4899); } .hub-cross.to-app a { color: #7C3AED; }
.hub-cross.to-code { background: linear-gradient(135deg, #3B82F6, #06B6D4); } .hub-cross.to-code a { color: #1D4ED8; }

/* Code (Python) examples: an emoji tile instead of a project icon */
.py-emoji-tile { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 14px; font-size: 44px; background: linear-gradient(145deg, color-mix(in srgb, var(--gc) 70%, white), var(--gc)); position: relative; overflow: hidden; }
.py-emoji-tile::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.18); right: -24px; top: -30px; }
.hub-cross.to-py { background: linear-gradient(135deg, #10B981, #0EA5E9); } .hub-cross.to-py a { color: #047857; }
/* 2.26: "Shared" mark on my own cards (team / mentor / friends / link) — top-left of the picture */
.hub-sharemark { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(79,70,229,.92); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .02em; box-shadow: 0 4px 10px -4px rgba(79,70,229,.8); pointer-events: auto; }
.hub-sharemark .tp-ic { width: 12px; height: 12px; }
.hub-card.is-pinned .hub-sharemark { left: 42px; }

/* 2.26 Notifications — Projects › Notifications tab and the 🔔 dropdown */
.nt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.nt-item { --nc: #6366F1; display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: 16px; background: #fff; border: 1px solid rgba(15,23,42,.07); text-decoration: none; color: #1E1B4B; position: relative; }
.nt-item:hover { border-color: color-mix(in srgb, var(--nc) 45%, #fff); }
.nt-item.unread { background: color-mix(in srgb, var(--nc) 6%, #fff); border-color: color-mix(in srgb, var(--nc) 30%, #fff); }
.nt-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--nc) 14%, #fff); }
.nt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-t b { font-size: 14px; font-weight: 800; line-height: 1.3; }
.nt-t small { font-size: 12.5px; color: #64748B; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nt-t i { font-style: normal; font-size: 11.5px; color: #94A3B8; font-weight: 700; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; background: #E11D48; flex-shrink: 0; margin-top: 6px; }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.nt-head b { font-size: 15px; }
.nt-empty { text-align: center; padding: 38px 14px; color: #64748B; }
.nt-empty div { font-size: 38px; } .nt-empty b { display: block; color: #1E1B4B; font-size: 16px; margin: 6px 0 4px; }
/* 2.26 My Team: one card per team — name, members, Open team (the work and chat are on the team page) */
.tmc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.tmc { --tc: #6366F1; background: #fff; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 12px; border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 16px 30px -18px rgba(15,23,42,.5), 0 2px 6px -2px rgba(15,23,42,.12); }
.tmc.is-hidden { opacity: .6; } .tmc.is-banned { border-color: #FCA5A5; }
.tmc-h { display: flex; align-items: center; gap: 12px; }
.tmc-l { width: 48px; height: 48px; border-radius: 15px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 22px; background: var(--tc); box-shadow: 0 8px 18px -8px var(--tc); }
.tmc-t { min-width: 0; } .tmc-t b { display: block; font-size: 17px; font-weight: 900; color: #1E1B4B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmc-t small { display: block; font-size: 12.5px; font-weight: 700; color: #64748B; }
.tmc-m { display: flex; flex-wrap: wrap; gap: 6px; }
.tmc-p { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #F1F5F9; font-size: 12.5px; font-weight: 800; color: #334155; }
.tmc-p i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; background: color-mix(in srgb, var(--tc) 80%, #000); }
.tmc-p.mentor { background: #FCE7F3; color: #9D174D; } .tmc-p.mentor i { background: #DB2777; }
.tmc-p.more, .tmc-p.wait { padding: 3px 10px; } .tmc-p.wait { background: #FEF3C7; color: #92400E; }
.tmc-open { align-self: stretch; text-align: center; justify-content: center; margin-top: auto; background: var(--tc); color: #fff; }
.tmc-s { margin: 0; font-size: 13px; font-weight: 700; color: #64748B; }

/* Create → Projects: TinkerPy Tutorials & Reference guides (hub_guides) */
.hub-guides { margin: 22px 0 6px; }
.hub-guides h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); }
.hub-guides .sub { margin: 4px 0 12px; color: #64748B; font-weight: 700; }
.hub-guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.hub-guide { background: #fff; border-radius: 22px; padding: 16px; border: 1.5px solid #E0E7FF; box-shadow: 0 16px 34px -26px rgba(67, 56, 202, .55); display: flex; flex-direction: column; gap: 10px; }
.hub-guide-top { display: flex; gap: 12px; align-items: center; }
.hub-guide-em { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, var(--g1), var(--g2)); flex: none; }
.hub-guide-top b { display: block; font-size: 19px; } .hub-guide-top small { color: #64748B; font-weight: 800; }
.hub-guide p { margin: 0; color: #475569; font-weight: 700; font-size: 14px; }
.hub-guide-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-guide-ch a { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: #F1F5F9; color: #334155; text-decoration: none; }
.hub-guide-ch a:hover { background: #E0E7FF; }
.hub-guide .hub-btn { align-self: flex-start; margin-top: auto; }
.hub-guide-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hub-guide-part { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hub-guide-part > b { font-size: 15.5px; } .hub-guide-part > b small { color: #64748B; font-weight: 800; font-size: 12px; margin-left: 4px; }