/* EasyClippers 13.9: card-free. The owner, Nov 3 2026: "Cards are outdated and look like AI slop. Let's eliminate them.
   Let's figure out how to implement high end card free design" and "I don't like pills or tags either".

   Pages sit on one surface. A section is set apart by space, a clear heading and one hairline; lists are rows with
   thin dividers; numbers are a strip split by thin lines; a choice is marked by an accent line, not a box; every
   label (a status, a count, a score, a key) is plain text with at most a small dot. Glass stays only where something
   floats: the top bar, menus, dialogs, sheets, toasts and the phone tab bar, over the soft light behind the page.
   Videos and pictures keep their rounded frames: the video is the object. Loaded last; !important is used only to
   take the old boxes away (each box came in several variants and themes), never for spacing or colour choices. */

/* ---------- 1. no colour islands: content takes the page's own colours in both themes (app.css painted it navy on
   white and white on navy). Each token is inherited, so it follows any change to the palette ---------- */
:where(.card.glass, .glass.card, .glass.post-list, .post-list, .feat, .lp-plan, .lp-pain, .lp-final, .lp-tablewrap, .lp-specs-cta,
  .tiles, .ob-line, .monitor, .auth-card, .kpis) {
  color-scheme: inherit !important;
  --bg: inherit !important; --surface: inherit !important; --surface-2: inherit !important;
  --surface-3: inherit !important; --raised: inherit !important; --well: inherit !important;
  --topbar-bg: inherit !important; --side-bg: inherit !important; --media-bg: inherit !important;
  --scrim: inherit !important; --tip-bg: inherit !important; --tip-text: inherit !important;
  --hover: inherit !important; --active: inherit !important; --nav-on: inherit !important;
  --text: inherit !important; --text-2: inherit !important; --text-3: inherit !important;
  --text-hi: inherit !important; --text-soft: inherit !important; --border: inherit !important;
  --border-2: inherit !important; --border-3: inherit !important; --accent: inherit !important;
  --accent-hover: inherit !important; --accent-2: inherit !important; --on-accent: inherit !important;
  --accent-text: inherit !important; --accent-text-hover: inherit !important; --focus-ring: inherit !important;
  --focus: inherit !important; --brand-ink: inherit !important; --on-brand: inherit !important;
  --bar: inherit !important; --switch-on: inherit !important; --tab-on: inherit !important;
  --knob: inherit !important; --brand: inherit !important; --aqua: inherit !important; --aqua-2: inherit !important;
  --cyan: inherit !important; --blue: inherit !important; --violet: inherit !important; --mint: inherit !important;
  --amber: inherit !important; --rose: inherit !important; --tally: inherit !important;
  --tally-ink: inherit !important; --ov: inherit !important; --aq: inherit !important; --aq2: inherit !important;
  --cy: inherit !important; --bl: inherit !important; --vi: inherit !important; --mi: inherit !important;
  --ro: inherit !important; --am: inherit !important; --ta: inherit !important; --sh: inherit !important;
  --shk: inherit !important; --t-chip: inherit !important; --t-blue: inherit !important;
  --t-violet: inherit !important; --t-amber: inherit !important; --t-green: inherit !important;
  --t-red: inherit !important; --t-cyan: inherit !important; --t-aqua: inherit !important;
  --t-live: inherit !important; --t-gold: inherit !important; --code-bg: inherit !important;
  --code-text: inherit !important; --shadow-xs: inherit !important; --shadow: inherit !important;
  --shadow-lift: inherit !important; --shadow-pop: inherit !important; --g-tint: inherit !important;
  --g-tint-2: inherit !important; --g-edge: inherit !important; --g-rim: inherit !important;
  --g-sheen: inherit !important; --g-base: inherit !important; --g-shadow: inherit !important;
  --g-shadow-sm: inherit !important; --g-field: inherit !important; --g-field-sh: inherit !important;
  --chart-a: inherit !important; --chart-a2: inherit !important; --chart-b: inherit !important;
  --chart-c: inherit !important; --chart-d: inherit !important; --chart-e: inherit !important;
  --chart-grid: inherit !important; }

/* ---------- 2. the boxes go ---------- */
/* (a zero-weight list, so each rule after it may draw its own line: all of them are !important) */
:where(.card.glass, .glass.card, .glass.post-list, .post-list, .tiles, .ob-line, .monitor, .auth-card, .kpis:has(.kpi.glass),
  .bp-intro, .lp-plan, .feat, .kpi, .tile, .stat-strip > div, .tier-grid > .tier, .preset, .prov, .critic, .room-empty, .rv-empty,
  .rc-empty, .keep-tog, .post-week button, .cal-day, .cal-item, .banner-err, .st-alert) {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:where(.card.glass, .glass.card) .glass { background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.card.glass::before, .glass.card::before, .card.glass::after, .glass.card::after { content: none !important; }

/* a section: one hairline above, room around, its heading in plain type */
:is(.card.glass, .glass.card) { padding: 26px 0 8px; border-top: 1px solid var(--rule) !important; }
.modal :is(.card.glass, .glass.card):first-child, .drawer :is(.card.glass, .glass.card):first-child { border-top: 0 !important; padding-top: 6px; }
.card-head { margin-bottom: 16px; min-height: 0; }
.card-head > .icon { display: none; }
.card-head h3 { font-size: 16px; font-weight: 650; letter-spacing: -.012em; color: var(--text-hi); }
.card-head .sub { font-size: 13px; }
.two-col, .three-col, .dash-grid { column-gap: 44px; }
.section-title { color: var(--text-3); letter-spacing: .08em; margin-top: 28px; }

/* lists: rows on the page, each split from the next by a hairline */
:is(.glass.post-list, .post-list) { border-top: 1px solid var(--rule) !important; padding-left: 0; padding-right: 0; }
.tile { padding: 10px 0; }
.tile + .tile { border-top: 1px solid var(--rule) !important; }
.tile small { color: var(--text-3); }
.prov { padding: 12px 0; }
.prov + .prov { border-top: 1px solid var(--rule) !important; }
.prov .rank { background: none; width: auto; color: var(--text-3); }
.critic { padding: 12px 0 4px; border-top: 1px solid var(--rule) !important; }

/* numbers: one strip with thin lines, no tiles */
.tiles { border-top: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule) !important; overflow: visible; }
.tile-stat { padding: 18px 22px 16px; }
.tiles > .tile-stat:nth-child(6n+1) { padding-left: 0; }        /* the first column on the page's edge, at each width */
@media (max-width: 1500px) { .tiles > .tile-stat:nth-child(6n+1) { padding-left: 22px; } .tiles > .tile-stat:nth-child(3n+1) { padding-left: 0; } }
@media (max-width: 980px) { .tiles > .tile-stat:nth-child(3n+1) { padding-left: 22px; } .tiles > .tile-stat:nth-child(2n+1) { padding-left: 0; } }
.tile-stat:hover { background: none; }
.tile-stat:hover .ts-v, .tile-stat:hover .ts-l { color: var(--accent-text); }
.kpis:has(.kpi.glass) { border-top: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule) !important; }
.stat-strip { gap: 0 36px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat-strip > div { padding: 16px 0 14px; }
.stat-strip > div[data-act]:hover .v { color: var(--accent-text); }
.kpi { padding: 14px 0; }
/* 13.14.5: the numbers start on the page's edge, as the admin strip's do (app.css gave each 16px 18px !important, so a
   row of numbers and the Getting started line sat 18 px in from everything above and below them) */
.kpi.glass { padding: 16px 18px 16px 0 !important; }
.ob-line { padding-left: 0; padding-right: 0; }

/* 13.14.5: one hairline, never two a few pixels apart. A tab row, a week strip or a strip of numbers already draws its
   line, so the section right after it draws none of its own above it, and stacked rows of numbers share one line
   (posts, analytics, shorts, the settings and admin pages showed pairs 7 to 20 px apart) */
:is(.tabs, .ptabs) + * > :is(.card.glass, .glass.card, .stat-strip, .tiles, .kpis:has(.kpi.glass)):first-child,
:is(.tabs, .ptabs) + * > :is(.two-col, .three-col, .dash-grid):first-child > :is(.card.glass, .glass.card):first-child,
:is(.tabs, .ptabs) + :is(.card.glass, .glass.card, .stat-strip, .tiles, .kpis:has(.kpi.glass)),
.kpis:has(.kpi.glass) + .kpis:has(.kpi.glass),
:is(.stat-strip, .tiles, .kpis:has(.kpi.glass), .post-week) + :is(.card.glass, .glass.card),
:is(.stat-strip, .tiles, .kpis:has(.kpi.glass)) + :is(.two-col, .three-col, .dash-grid) > :is(.card.glass, .glass.card):first-child,
.toolbar + #askBar:empty + .clip-grid > :is(.card.glass, .glass.card):first-child { border-top: 0 !important; }
@media (min-width: 1081px) {     /* the rest of a grid's first row, where it has columns */
  :is(.tabs, .ptabs) + * > :is(.two-col, .dash-grid):first-child > :is(.card.glass, .glass.card):nth-child(2),
  :is(.tabs, .ptabs) + * > .three-col:first-child > :is(.card.glass, .glass.card):nth-child(-n+3),
  :is(.stat-strip, .tiles, .kpis:has(.kpi.glass)) + :is(.two-col, .dash-grid) > :is(.card.glass, .glass.card):nth-child(2),
  :is(.stat-strip, .tiles, .kpis:has(.kpi.glass)) + .three-col > :is(.card.glass, .glass.card):nth-child(-n+3) { border-top: 0 !important; }
}

/* stream monitors: the picture is the object, the words sit under it */
.monitor { padding: 0 !important; }
.monitor.sel .screen { outline: 2px solid var(--brand-ink); outline-offset: 3px; }
.add-monitor { border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; }   /* an open slot, no dashed frame */
.add-monitor:hover .plus { filter: brightness(1.08); }

/* a choice: an accent line over the option picked, not a box around it */
.preset-grid, .tier-grid { gap: 0 24px; }
.preset { padding: 14px 0 6px; border-top: 2px solid var(--rule) !important; transform: none !important;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.preset:hover { border-top-color: var(--rule-3) !important; }
.preset.on { border-top-color: var(--brand-ink) !important; }
.preset.on b { color: var(--accent-text); }
.preset-ic { background: none !important; width: auto; height: auto; justify-content: start; color: var(--text-3); }
.preset.on .preset-ic { background: none !important; color: var(--accent-text); }
.tier-grid > .tier { padding: 18px 0 8px; border-top: 2px solid var(--rule) !important; }
.tier-grid > .tier.current { border-top-color: var(--brand-ink) !important; }

/* empty rows: no frames (the review buttons float over the video, so they keep their frosted bar) */
.room-empty, .rv-empty, .rc-empty { padding: 14px 0; }
.keep-tog { padding: 0; height: auto; }
.keep-tog:hover { background: none; }

/* the calendar's week: day columns, an accent line under days with posts */
.post-week { gap: 0; border-bottom: 1px solid var(--rule); }
.post-week button { padding: 10px 4px 12px; border-bottom: 2px solid transparent !important; margin-bottom: -1px; }
.post-week button.has { border-bottom-color: rgb(var(--bl) / .6) !important; }
.post-week button.has:hover { background: none; }
.post-week button.has b { color: var(--accent-text); }

/* ---------- 3. warnings: a line in the warning's colour beside the words, not a filled box ---------- */
.banner { background: none !important; border: 0 !important; border-left: 2px solid rgb(var(--bl) / .7) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 4px 14px; margin-bottom: 16px; color: var(--text); }
.banner.closable { padding-right: 44px; }
.banner.warning { border-left-color: var(--amber) !important; }
.banner.success { border-left-color: var(--mint) !important; }
.banner.danger { border-left-color: var(--rose) !important; }
.banner-x { top: 50%; transform: translateY(-50%); }
.banner-err, .st-alert { padding: 4px 14px; border-left: 2px solid var(--rose) !important; }
.form-error, .form-ok { background: none !important; border: 0 !important; padding: 2px 0; }

/* ---------- 4. no pills, no tags: labels are words ---------- */
/* counts beside names */
.nav .badge, .ptabs .badge, .sec-head .count { background: none !important; border: 0 !important; padding: 0 !important; min-width: 0 !important;
  height: auto !important; border-radius: 0 !important; color: var(--text-3); font-weight: 650; }
.nav button.on .badge, .ptabs button.on .badge { color: var(--accent-text); background: none !important; }
.ptabs .badge { color: var(--accent-text); }
/* key hints: the key in bold, no keycap */
.kbd { border: 0 !important; background: none !important; padding: 0 !important; color: var(--text-hi); font-weight: 750; }
/* status words: a dot and the word, also over video (with a shadow so they read on any picture) */
.chip.live { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; color: var(--t-live); }
.chip.live::before { background: currentColor; }
:is(.rv-top, .ccard .top, .poster .top, .monitor .tally, .rc-media) .chip, .ccard .top .chip, .ccard .top .chip.live {
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 2px !important;
  border: 0 !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 10px rgba(0, 0, 0, .5); }
:is(.rv-top, .ccard .top, .poster .top, .monitor .tally, .rc-media) .chip::before { box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); opacity: 1; }
.ccard .top .chip.green::before { background: #34d399; } .ccard .top .chip.amber::before { background: #fbbf24; }
.ccard .top .chip.red::before { background: #fb7185; } .ccard .top .chip.blue::before { background: #60a5fa; }
.ccard .top .chip.violet::before { background: #a78bfa; } .ccard .top .chip.cyan::before { background: #22d3ee; }
/* scores and lengths: bold numbers */
.score { background: none !important; border: 0 !important; padding: 0 !important; min-width: 0 !important; height: auto !important; border-radius: 0 !important;
  box-shadow: none !important; font-size: 13px; }
:is(.ccard, .rv-card, .poster, .rc-media, .monitor) .score, .ccard .media .dur {
  background: none !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .5); padding: 0 2px !important; }
.score.viral { background: none !important; color: #fde68a !important; }
/* the rest */
.live-pill, .pill-rec, .role-pill, .kicker, .mail-badge { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important; }
.live-pill:hover { background: none !important; color: var(--t-live); }
.tag { border: 0 !important; background: none !important; padding: 0 !important; min-height: 24px; gap: 2px; border-radius: 0 !important; }
.tag + .tag::before { content: '·'; color: var(--text-3); margin-right: 8px; }
.phrase { border: 0 !important; background: none !important; padding: 0 2px !important; height: 26px; color: var(--accent-text); border-radius: 0 !important; }
.phrase:hover { text-decoration: underline; text-underline-offset: 3px; background: none !important; }
.phrase.muted { color: var(--text-3); }

/* ---------- 5. tabs: words with an accent line under the one that is open (no pill strips) ---------- */
.ptabs, .stab-groups { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
  gap: 26px !important; border-bottom: 1px solid var(--rule) !important; width: 100% !important; }
:is(.ptabs, .stab-groups) button { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 0 12px !important;
  height: auto !important; flex: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; color: var(--text-3); font-size: 14.5px; }
:is(.ptabs, .stab-groups) button:hover { color: var(--text); }
:is(.ptabs, .stab-groups) button.on { color: var(--text-hi) !important; border-bottom-color: var(--brand-ink) !important; }
.page-tabs { padding-top: 18px; }
@media (max-width: 767px) { .ptabs, .stab-groups { gap: 22px !important; overflow-x: auto; } }
@media (min-width: 768px) { .ptabs, .stab-groups { flex-wrap: wrap; overflow-x: visible; row-gap: 12px !important; } }   /* never cut off (13.14.5) */

/* ---------- 6. the menu's plan: the word, its gold, and a line above (no box). On the white Light menu the golds
   go deeper so they read; on navy they stay bright ---------- */
.side-card.plan-card { background: none !important; border: 0 !important; border-top: 1px solid var(--rule) !important; border-radius: 0 !important;
  box-shadow: none !important; animation: none !important; padding: 14px 6px 2px; margin-top: 12px; }
.side-card.plan-card:hover { transform: none; }
.side-card.plan-card:hover .tier-name { filter: brightness(1.08); }
.side-card .btn { height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--accent-text); font-weight: 650; justify-content: flex-start; width: auto; margin-top: 10px; }
.side-card .btn:hover { text-decoration: underline; text-underline-offset: 3px; }
:root:not([data-theme="dark"]) .plan-word.starter { background-image: linear-gradient(135deg, #8a5a00 0%, #c58a1c 32%, #a66a0a 58%, #d4a12a 80%, #8a5a00 100%); }
:root:not([data-theme="dark"]) .plan-word.pro { --pw: linear-gradient(90deg, #a66a0a 0%, #c58a1c 16%, #7c3aed 34%, #5b21b6 46%, #8b5cf6 60%, #c58a1c 78%, #a66a0a 100%);
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, .25)); }
:root:not([data-theme="dark"]) .plan-word.studio { --pw: linear-gradient(90deg, #b7791f 0%, #e8590c 13%, #db2777 27%, #7c3aed 41%, #0284c7 55%, #059669 69%, #ca8a04 84%, #b7791f 100%);
  filter: drop-shadow(0 0 6px rgba(219, 39, 119, .2)); }
.shell.rail .side-card.plan-card { border-top: 0 !important; padding: 6px 0; }

/* ---------- 7. sign in: the form on the page ---------- */
.auth-card { padding: 8px 0 !important; }

/* ---------- 8. the website: sections of type, numbers and pictures, split by hairlines (home.css) ---------- */
.hm-step, .hm-why > div, .hm-plan, .hm-incl, .hm-extra > div, .hm-final, .hm-card, .hm-use, .hm-stage {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hm-step, .hm-why > div, .hm-extra > div { padding: 22px 0 0 !important; border-top: 1px solid var(--h-line-2, rgba(255, 255, 255, .18)) !important; }
.hm-steps, .hm-why, .hm-extra { gap: 28px 40px !important; }
.hm-plans { gap: 34px 40px !important; }
.hm-plan { padding: 26px 0 0 !important; border-top: 1px solid var(--h-line-2, rgba(255, 255, 255, .18)) !important; }
.hm-plan.rec { border-top: 2px solid var(--h-accent) !important; }
.hm-incl { padding: 26px 0 0 !important; margin-top: 44px !important; border-top: 1px solid var(--h-line-2, rgba(255, 255, 255, .18)) !important; }
.hm-final { padding: 64px 0 0 !important; border-top: 1px solid var(--h-line-2, rgba(255, 255, 255, .18)) !important; }
.hm-card { overflow: visible !important; }
.hm-stage { padding: 0 !important; }
/* who it's for: the picture, then its words beneath (no words laid on a box) */
.hm-use { overflow: visible !important; }
.hm-use .ph { border-radius: var(--h-r, 20px); overflow: hidden; }
.hm-use .ph::after { content: none !important; }
.hm-use .tx { position: static !important; padding: 16px 2px 0; }
.hm-use p { color: var(--h-muted, #d6e0ee); }
@media (min-width: 900px) {
  .hm-use { min-height: 0 !important; }
  .hm-use .ph, .hm-use:first-child .ph, .hm-use:last-child .ph { position: relative !important; inset: auto !important; aspect-ratio: auto !important;
    height: 300px !important; min-height: 0 !important; }
}
/* the drawn examples of the app follow the app: rows split by hairlines, words instead of badges */
.hm-card .mk-post { border: 0 !important; background: none !important; border-radius: 0 !important; padding: 0 !important; }
.mk-post .r { background: none !important; border: 0 !important; border-bottom: 1px solid var(--h-line) !important; border-radius: 0 !important; padding: 12px 0 !important; }
.mk-switch { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 12px 0 0 !important; }
.mk-ask .reply { background: none !important; border: 0 !important; padding: 4px 0 !important; }

/* ---------- 10. phones ---------- */
@media (max-width: 767px) {
  /* a choice stacks into a list; the option picked gets an accent line at its side */
  .preset-grid:not(.fonts) { grid-template-columns: 1fr !important; gap: 0 !important; }
  .preset-grid:not(.fonts) .preset { border-top-width: 1px !important; border-left: 2px solid transparent !important; padding: 14px 0 14px 14px; }
  .preset-grid:not(.fonts) .preset.on { border-top-color: var(--rule) !important; border-left-color: var(--brand-ink) !important; }
  /* the tab bar's count: the number itself, in the accent colour, no bubble */
  .tabbar button .badge { background: none !important; color: var(--accent-text) !important; border: 0 !important; box-shadow: none !important;
    min-width: 0 !important; padding: 0 !important; font-size: 11px !important; font-weight: 800 !important; }
}
.detect { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 2px 0 !important; box-shadow: none !important; }   /* the record dialog's platform line: words, no box */
/* where a recording comes from: the network's mark in its own colour, no coloured square */
.plat { background: none !important; width: 16px; height: 16px; border-radius: 0; color: var(--text-3); }
.plat .mark, .plat .icon { width: 16px; height: 16px; }
.plat.twitch { color: #9146ff; } .plat.youtube { color: #ff0033; } .plat.kick { color: #1fa80b; }

/* ---------- Plan & usage's plans: columns under a hairline, the recommended one under an accent line, words for its
   flag, and the hours table as rows (no boxes, no pill) ---------- */
.bp-plans { gap: 32px 36px !important; }
.bp-plans .lp-plan, .lp-plan { padding: 22px 0 6px !important; min-height: 0 !important; border-top: 1px solid var(--rule) !important; }
.lp-plan.rec { border-top: 2px solid var(--brand-ink) !important; }
.lp-plan.cur { border-top-color: var(--mint) !important; }
.lp-plan.want { border-top: 2px solid var(--aqua) !important; box-shadow: none !important; }
.lp-flag { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
  color: var(--accent-text) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; }
.lp-phours { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 10px 0 0 !important;
  border-top: 1px solid var(--rule) !important; }
.side-card .plan-free-ic { background: none !important; border: 0 !important; width: auto; height: auto; }
.bp-intro { padding-left: 0 !important; padding-right: 0 !important; }      /* the plan intro on the page edge, like every section