/* =========================================================================
   v7 — reference-accurate Mailer split view + Flows canvas
   ========================================================================= */

:root { --r: 4px; }

/* ------------------------------- MAILER --------------------------------- */
.mailer-shell {
  display: grid; grid-template-columns: 560px minmax(0, 1fr);
  border: 1px solid var(--t-line, #202024); border-radius: var(--r);
  overflow: hidden; min-height: calc(100vh - 150px);
  background: var(--t-panel, #101012);
}
.mailer-pane { border-right: 1px solid var(--t-line, #202024); overflow: auto; max-height: calc(100vh - 150px); }
.mail-tabs { display: flex; border-bottom: 1px solid var(--t-line, #202024); position: sticky; top: 0; background: var(--t-panel, #101012); z-index: 3; }
.mail-tab {
  flex: 1; padding: 13px 10px; background: transparent; border: 0; cursor: pointer;
  color: var(--t-muted, #76767d); font-size: 11.5px; letter-spacing: .04em;
  border-bottom: 2px solid transparent;
}
.mail-tab.active { color: var(--t-txt, #d6d6d9); border-bottom-color: var(--t-accent, #e8e8ea); background: var(--t-hover, #17171c); }
.mail-form { margin: 0; }
.mail-section { padding: 16px 18px; border-bottom: 1px solid var(--t-line, #202024); }
.section-label { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted, #76767d); font-weight: 600; margin-bottom: 10px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.section-hint { font-size: 10px; color: var(--t-muted, #76767d); }
.sender-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sender-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  background: var(--t-panel2, #141417); border: 1px solid var(--t-line2, #2a2a30);
  border-radius: var(--r); cursor: pointer; color: var(--t-txt, #d6d6d9);
}
.sender-tile img { width: 26px; height: 26px; object-fit: contain; }
.sender-tile.active { border-color: var(--t-accent, #e8e8ea); background: var(--t-hover, #17171c); }
.tile-name { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted, #76767d); }
.fline { display: flex; flex-direction: column; gap: 5px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted, #76767d); margin-bottom: 10px; }
.fline input { height: 34px; font-size: 12.5px; }
.field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mail-section select, .mail-section textarea { width: 100%; }
.mail-section textarea { min-height: 120px; }
.mail-send { width: 100%; margin-top: 10px; height: 36px; justify-content: center; }
.seg-toggle { display: flex; border: 1px solid var(--t-line2, #2a2a30); border-radius: var(--r); overflow: hidden; }
.seg-toggle label { flex: 1; text-align: center; padding: 7px 6px; font-size: 11px; color: var(--t-muted, #76767d); cursor: pointer; }
.seg-toggle input { display: none; }
.seg-toggle label:has(input:checked) { background: var(--t-hover, #17171c); color: var(--t-txt, #d6d6d9); }
.acct-add { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.acct-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--t-line, #202024); }
.acct-mail { font-family: var(--mono, monospace); font-size: 11.5px; }
.acct-empty { font-size: 11px; color: var(--t-muted, #76767d); padding: 8px 0; }
.mail-more { border-top: 1px solid var(--t-line, #202024); }
.mail-more summary { padding: 12px 18px; font-size: 11px; color: var(--t-muted, #76767d); cursor: pointer; }
.mailer-preview-pane { display: flex; flex-direction: column; background: var(--t-bg, #0a0a0b); }
.preview-head { padding: 13px 16px; border-bottom: 1px solid var(--t-line, #202024); font-size: 11px; color: var(--t-muted, #76767d); display: flex; gap: 6px; align-items: center; }
.preview-body { flex: 1; display: flex; align-items: flex-start; justify-content: center; overflow: auto; }
.preview-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--t-muted, #76767d); margin-top: 140px; opacity: .75; }
.preview-empty span { font-size: 26px; }
.preview-empty p { font-size: 11px; margin: 0; }
.preview-body iframe { width: 100%; min-height: 640px; height: 100%; border: 0; background: #fff; }
@media (max-width: 1100px) { .mailer-shell { grid-template-columns: 1fr; } .mailer-pane { max-height: none; } }

/* ------------------------------- FLOWS ---------------------------------- */
.flow-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.crumb { font-size: 11px; color: var(--t-muted, #76767d); display: flex; gap: 8px; align-items: center; }
.crumb a { color: var(--t-muted, #76767d); text-decoration: none; }
.crumb strong { color: var(--t-txt, #d6d6d9); font-weight: 600; }
.flow-actions { display: flex; gap: 8px; align-items: center; }
.flow-actions select { height: 30px; font-size: 11px; }
.flow-shell {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px;
  border: 1px solid var(--t-line, #202024); border-radius: var(--r); overflow: hidden;
  min-height: calc(100vh - 210px); background: var(--t-panel, #101012);
}
.flow-pane { border-right: 1px solid var(--t-line, #202024); overflow: auto; background: var(--t-panel, #101012); }
.flow-pane-routes { border-right: 0; border-left: 1px solid var(--t-line, #202024); }
.flow-list { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.flow-listcard {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; position: relative;
  border: 1px solid var(--t-line, #202024); border-radius: var(--r);
  background: var(--t-panel2, #141417); color: var(--t-txt, #d6d6d9); text-decoration: none;
}
.flow-listcard:hover { border-color: var(--t-line2, #2a2a30); text-decoration: none; }
.flow-listcard.active { background: var(--t-hover, #17171c); border-color: var(--t-line2, #2a2a30); }
.flow-listname { font-size: 12px; padding-left: 12px; }
.flow-liststeps { font-size: 10px; color: var(--t-muted, #76767d); padding-left: 12px; }
.flow-listcard .flow-dot { position: absolute; left: 9px; top: 13px; }
.flow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t-accent, #e8e8ea); opacity: .65; }
.flow-canvas { padding: 16px 18px 24px; overflow: auto; background: var(--t-bg, #0a0a0b); }
.canvas-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.canvas-name { background: transparent; border: 0; color: var(--t-txt, #d6d6d9); font-size: 15px; font-weight: 600; max-width: 280px; height: 26px; padding: 0; }
.canvas-name:focus { outline: none; border-bottom: 1px solid var(--t-accent, #e8e8ea); }
.canvas-hash { font-family: var(--mono, monospace); }
.auto-toggle { margin-left: auto; font-size: 11px; color: var(--t-muted, #76767d); display: flex; align-items: center; gap: 6px; }
.step-canvas { display: flex; flex-direction: column; }
.fstep {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r);
  border: 1px solid var(--t-line2, #2a2a30); background: var(--t-panel2, #141417);
}
.fstep.bp { border-color: #6b5220; background: rgba(122, 92, 22, .08); }
.fstep.sel { box-shadow: 0 0 0 1px var(--t-accent, #e8e8ea); }
.fgrip { color: #4a4a52; font-size: 10px; cursor: grab; letter-spacing: -1px; }
.fnum { font-size: 9.5px; color: var(--t-muted, #76767d); width: 12px; }
.fradio { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--t-line2, #2a2a30); }
.ficon { width: 18px; text-align: center; color: var(--t-muted, #76767d); }
.fmain { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; }
.fname { font-size: 12.5px; font-weight: 600; }
.fpath { font-size: 10px; color: var(--t-muted, #76767d); font-family: var(--mono, monospace); }
.fkind { font-size: 10px; color: var(--t-muted, #76767d); }
.ftools { display: flex; gap: 3px; opacity: 0; transition: opacity .12s ease; }
.fstep:hover .ftools, .fstep.sel .ftools { opacity: 1; }
.ftools button { width: 22px; height: 22px; border: 1px solid var(--t-line2, #2a2a30); background: var(--t-panel, #101012); color: var(--t-muted, #76767d); border-radius: 3px; cursor: pointer; font-size: 10px; }
.ftools button:hover { color: var(--t-txt, #d6d6d9); border-color: var(--t-accent, #e8e8ea); }
.fedit { display: none; flex-basis: 100%; gap: 8px; align-items: center; margin-top: 8px; }
.fstep.sel .fedit { display: flex; }
.fedit input, .fedit select { height: 28px; font-size: 11px; }
.mini { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--t-muted, #76767d); display: flex; align-items: center; gap: 5px; }
.mini input { width: 56px; text-align: center; }
.branch-row { display: flex; gap: 8px; align-items: center; margin: 0 0 8px 38px; }
.branch-zone { flex: 1; border: 1px dashed var(--t-line2, #2a2a30); border-radius: var(--r); padding: 12px; font-size: 10px; color: var(--t-muted, #76767d); text-align: center; }
.canvas-add { display: flex; justify-content: center; margin-top: 10px; }
.route-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.route-chip { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--t-line, #202024); background: var(--t-panel2, #141417); color: var(--t-muted, #76767d); cursor: pointer; }
.route-chip.active { border-color: var(--t-accent, #e8e8ea); color: var(--t-txt, #d6d6d9); }
.route-list { display: flex; flex-direction: column; padding: 0 8px 10px; }
.route-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--t-line, #202024); padding: 9px 6px; color: var(--t-txt, #d6d6d9); cursor: pointer; font: inherit; }
.route-item:hover { background: var(--t-hover, #17171c); }
.rdot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--t-line2, #2a2a30); flex: 0 0 7px; }
.rname { font-size: 11px; text-transform: uppercase; }
.rpath { font-size: 10px; margin-left: auto; }
.flow-attach { margin-top: 12px; border: 1px solid var(--t-line, #202024); border-radius: var(--r); }
.flow-attach summary { padding: 10px 14px; font-size: 11px; color: var(--t-muted, #76767d); cursor: pointer; }
.flow-attach form { padding: 0 14px 14px; }
.flow-home { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; }
@media (max-width: 1100px) { .flow-shell { grid-template-columns: 1fr; } }

/* preview pane collapsed by default */
.mailer-shell.preview-off { grid-template-columns: minmax(0, 1fr); }
.mailer-shell.preview-off .mailer-preview-pane { display: none; }
.preview-show { position: sticky; top: 0; margin: 10px 12px; align-self: flex-start; }
.preview-head { justify-content: space-between; }
.preview-head .btn { height: 24px; padding: 0 8px; font-size: 10px; }

/* setup pane */
.mail-section[data-pane="setup"] .hr { margin: 14px 0; }

/* native controls follow the theme (spin buttons etc.) */
body { color-scheme: dark; }
body[data-theme="white"] { color-scheme: light; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: 1; }

/* equal theme tiles */
.theme-grid { grid-auto-rows: 42px; }
.theme-form { display: flex; }
.theme-opt, button.theme-opt { width: 100%; height: 42px; justify-content: flex-start; }
.theme-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* black theme: dark buttons with white text */
body[data-theme="black"] .btn.primary {
  background: #111113; border-color: #2c2c31; color: #f2f2f4;
}
body[data-theme="black"] .btn.primary:hover { background: #18181b; border-color: #3a3a41; color: #fff; }

/* bigger titles */
.topbar h1 { font-size: 20px; }
.login-head .brand-name { font-size: 30px; }
.brand-name { letter-spacing: .1em; }

/* login: dark button like the reference */
.login .btn.primary {
  background: #131316; border-color: #2c2c33; color: #e9e9ec;
}
.login .btn.primary:hover { background: #1b1b20; border-color: #3a3a44; color: #fff; }

/* number inputs: no native white spinner */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* dark buttons everywhere (matches the reference) */
body[data-theme] .btn.primary,
body:not([data-theme]) .btn.primary {
  background: #151519; border-color: #2f2f37; color: #f0f0f3;
}
body[data-theme] .btn.primary:hover,
body:not([data-theme]) .btn.primary:hover { background: #1d1d23; border-color: #3d3d47; color: #fff; filter: none; }
body[data-theme="white"] .btn.primary { background: #17171b; border-color: #17171b; color: #fff; }

/* dark native scrollbars */
* { scrollbar-color: #3a3a42 #0d0d10; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0d10; }
::-webkit-scrollbar-thumb { background: #34343c; border-radius: 6px; border: 2px solid #0d0d10; }
::-webkit-scrollbar-thumb:hover { background: #454550; }

/* bigger brand */
.brand-name { font-size: 22px; }
.login-head .brand-name { font-size: 40px; }

/* preview pane behaves like a drawer */
.mailer-shell.preview-off .mailer-preview-pane { display: none !important; }

/* wider sidebar so the wordmark can breathe, like the reference */
.layout { grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { width: 236px; flex-basis: 236px; }
.brand-name { letter-spacing: .04em; }
.topbar h1 { font-size: 22px; }

/* brand must own the full sidebar width so the fit script can scale it */
.sidebar .brand { display: block; width: 100%; }
.login-head { width: 100%; }

/* preview toggle floats over the shell instead of taking a grid cell */
.mailer-shell { position: relative; }
.preview-show { position: absolute; right: 14px; top: 10px; margin: 0; z-index: 6; }
.mailer-shell:not(.preview-off) .preview-show { display: none; }
.preview-head { padding-right: 14px; }

/* ---- dashboard (reference composition) ---- */
.ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ov-stat { border: 1px solid var(--t-line, #202024); border-radius: var(--r); background: var(--t-panel, #101012); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ov-label { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted, #76767d); }
.ov-value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.ov-sub { font-size: 10.5px; color: var(--t-muted, #76767d); }
.ov-alert { border: 1px solid #3a2c12; background: rgba(180, 130, 30, .08); color: #d8b46a; border-radius: var(--r); padding: 10px 12px; font-size: 11.5px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .ov-stats { grid-template-columns: repeat(2, 1fr); } .ov-grid { grid-template-columns: 1fr; } }
.activity { display: flex; flex-direction: column; }
.activity-row { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--t-line, #202024); }
.activity-row:last-child { border-bottom: 0; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: #3fce8f; margin-top: 5px; flex: 0 0 7px; }
.activity-dot.err { background: #d9534f; }
.activity-dot.warn { background: #d8b46a; }
.ov-more { margin-top: 14px; border: 1px solid var(--t-line, #202024); border-radius: var(--r); }
.ov-more > summary { padding: 11px 14px; font-size: 11px; color: var(--t-muted, #76767d); cursor: pointer; }
.ov-more-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }

/* ---- images in flows ---- */
.flow-thumb { width: 22px; height: 22px; border-radius: 4px; background: var(--t-panel, #101012); border: 1px solid var(--t-line2, #2a2a30); display: grid; place-items: center; overflow: hidden; position: absolute; left: 9px; top: 9px; }
.flow-thumb img { width: 16px; height: 16px; object-fit: contain; }
.flow-listcard { padding-left: 40px; }
.route-thumb { width: 18px; height: 18px; border-radius: 3px; overflow: hidden; display: grid; place-items: center; flex: 0 0 18px; }
.route-thumb img { width: 18px; height: 18px; object-fit: contain; }
.ficon img { width: 16px; height: 16px; object-fit: contain; }

/* ---- draggable page rows ---- */
.drag-row { cursor: grab; }
.drag-row.dragging { opacity: .45; }
.drag-row:hover td { background: var(--t-hover, #17171c); }

/* dashboard table breathing room */
.ov-grid .card-body .table-wrap { overflow-x: auto; }
.ov-grid .card-body table { min-width: 640px; }
.ov-grid th { white-space: nowrap; }
.visitor { min-width: 220px; }

/* visitors as a grid table (stable widths) */
.vtable { display: flex; flex-direction: column; }
.vrow { display: grid; grid-template-columns: 2.2fr 1.3fr .8fr .6fr .6fr .6fr; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--t-line, #202024); font-size: 11.5px; }
.vrow:last-child { border-bottom: 0; }
.vhead { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted, #76767d); background: var(--t-panel2, #141417); }
.vrow-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vrow-main .visitor-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vrow-main .mono { overflow: hidden; text-overflow: ellipsis; }
.visitor-loc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 900px) { .vrow { grid-template-columns: 1.6fr 1fr; } }

/* pages table: keep the title readable with the Flow column present */
.pages-table th:nth-child(4), .pages-table td:nth-child(4) { min-width: 200px; }
.pages-table th:nth-child(2), .pages-table td:nth-child(2) { min-width: 120px; }
.pages-table { min-width: 1180px; }

/* ============ login: full black, two-step ============ */
body.auth-body {
  background: #000; min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: #d6d6d9; font-family: 'Google Sans Code', ui-monospace, monospace;
}
.auth-wrap { width: 100%; max-width: 384px; padding: 20px; }
.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand .brand-name { font-size: 44px; letter-spacing: .04em; color: #ededf0; }
.auth-box { background: #060606; border: 1px solid #191919; border-radius: 8px; padding: 20px; box-shadow: 0 18px 60px rgba(0,0,0,.75); }
.auth-step { display: flex; flex-direction: column; }
.auth-label { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6f6f77; margin-bottom: 6px; }
.auth-input { height: 40px; background: #0b0b0b; border: 1px solid #232323; border-radius: 6px; color: #e8e8ea; padding: 0 12px; font-size: 13px; margin-bottom: 12px; }
.auth-input:focus { outline: none; border-color: #4a4a52; box-shadow: 0 0 0 3px rgba(235,235,245,.07); }
.auth-btn { width: 100%; height: 40px; justify-content: center; font-size: 12.5px; }
.auth-btn.busy { opacity: .8; cursor: progress; }
.auth-user { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #8b8b93; margin-bottom: 12px; }
.auth-link { background: none; border: 0; color: #a9a9b2; font-size: 10.5px; text-decoration: underline; cursor: pointer; padding: 0; }
.auth-note, .auth-flash { border-radius: 6px; padding: 10px 12px; font-size: 11.5px; margin-bottom: 12px; }
.auth-note { background: #0b0b0b; border: 1px solid #1e1e1e; color: #a5a5ad; }
.auth-note a { color: #e8e8ea; }
.auth-flash.err { background: rgba(217,119,127,.08); border: 1px solid rgba(217,119,127,.3); color: #eda7ac; }
.auth-flash.ok { background: rgba(88,201,154,.08); border: 1px solid rgba(88,201,154,.28); color: #9be3c2; }
.auth-foot { text-align: center; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #3f3f46; margin-top: 18px; }

/* ============ login: full black, two-step ============ */
body.auth-body {
  background: #000; min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: #d6d6d9; font-family: 'Google Sans Code', ui-monospace, monospace;
}
.auth-wrap { width: 100%; max-width: 384px; padding: 20px; }
.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand .brand-name { font-size: 44px; letter-spacing: .04em; color: #ededf0; }
.auth-box { background: #060606; border: 1px solid #191919; border-radius: 8px; padding: 20px; box-shadow: 0 18px 60px rgba(0,0,0,.75); }
.auth-step { display: flex; flex-direction: column; }
.auth-label { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6f6f77; margin-bottom: 6px; }
.auth-input { height: 40px; background: #0b0b0b; border: 1px solid #232323; border-radius: 6px; color: #e8e8ea; padding: 0 12px; font-size: 13px; margin-bottom: 12px; }
.auth-input:focus { outline: none; border-color: #4a4a52; box-shadow: 0 0 0 3px rgba(235,235,245,.07); }
.auth-btn { width: 100%; height: 40px; justify-content: center; font-size: 12.5px; }
.auth-btn.busy { opacity: .8; cursor: progress; }
.auth-user { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #8b8b93; margin-bottom: 12px; }
.auth-link { background: none; border: 0; color: #a9a9b2; font-size: 10.5px; text-decoration: underline; cursor: pointer; padding: 0; }
.auth-note, .auth-flash { border-radius: 6px; padding: 10px 12px; font-size: 11.5px; margin-bottom: 12px; }
.auth-note { background: #0b0b0b; border: 1px solid #1e1e1e; color: #a5a5ad; }
.auth-note a { color: #e8e8ea; }
.auth-flash.err { background: rgba(217,119,127,.08); border: 1px solid rgba(217,119,127,.3); color: #eda7ac; }
.auth-flash.ok { background: rgba(88,201,154,.08); border: 1px solid rgba(88,201,154,.28); color: #9be3c2; }
.auth-foot { text-align: center; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #3f3f46; margin-top: 18px; }

/* hidden steps must stay hidden (author display overrides UA [hidden]) */
.auth-step[hidden] { display: none !important; }

/* login fine-tuning: single-field card like the reference */
.auth-box { padding: 16px; border-radius: 10px; }
.auth-input { height: 44px; font-size: 13.5px; padding: 0 14px; margin-bottom: 10px; }
.auth-btn { height: 44px; }
.auth-wrap { max-width: 360px; }
.auth-brand { margin-bottom: 22px; }
.auth-brand .brand-name { font-size: 46px; }


/* login: no outer card, grey borderless continue/sign-in (reference style) */
.auth-box {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.auth-input { margin-bottom: 6px; }
.auth-btn {
  background: transparent; border: 0; box-shadow: none;
  color: #8b8b93; height: 34px; padding: 0 2px;
  justify-content: flex-start; font-weight: 500; font-size: 12.5px;
}
.auth-btn:hover { background: transparent; border: 0; color: #e8e8ea; }
.auth-btn:active { transform: none; }
.auth-user { margin-top: 2px; margin-bottom: 8px; }
.auth-brand { margin-bottom: 18px; }


/* login: absolutely no card, grey text buttons (Proceed / Sign in) */
.auth-box { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.auth-step { background: transparent !important; border: 0 !important; }
.auth-btn, .auth-btn.btn, .auth-btn.btn.primary {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: #8b8b93 !important; height: 32px; padding: 0 1px; font-weight: 500; font-size: 12.5px;
  justify-content: flex-start; letter-spacing: .01em;
}
.auth-btn:hover, .auth-btn.btn:hover { background: transparent !important; color: #e8e8ea !important; border: 0 !important; }
.auth-btn.busy { color: #6f6f77 !important; }
.auth-input { margin-bottom: 4px; }


/* login: centre the grey text buttons under the field (Proceed / Sign in) */
.auth-btn, .auth-btn.btn, .auth-btn.btn.primary {
  width: 100%; justify-content: center !important; text-align: center;
  height: 34px; margin-top: 2px;
}


/* previews: step dropdown + actions */
.pv-actions { margin-top: 8px; flex-wrap: wrap; }
.pv-pick { height: 30px; font-size: 11px; background: #0d0d0f; border: 1px solid #26262c; border-radius: 5px; color: #c9c9ce; padding: 0 8px; max-width: 260px; }