:root {
      --bg: #edf6ef;
      --bg-soft: #f7fbf8;
      --surface: rgba(255, 255, 255, 0.88);
      --surface-solid: #ffffff;
      --surface-soft: #f3faf6;
      --line: rgba(18, 32, 23, 0.11);
      --line-strong: rgba(18, 32, 23, 0.2);
      --text: #142018;
      --text-soft: #4d6155;
      --ink: #101111;
      --mint: #dff2e5;
      --sky: #d8e9ff;
      --rose: #ffd7de;
      --butter: #ffe9af;
      --lavender: #e3ddff;
      --success: #1c7a53;
      --warning: #8b6712;
      --danger: #bd5454;
      --shadow: 0 28px 70px rgba(105, 126, 114, 0.14);
      --radius-xxl: 34px;
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 18px;
      --radius-sm: 14px;
      --sidebar-collapsed: 88px;
      --sidebar-expanded: 264px;
      --layer-sidebar: 30;
      --layer-sidebar-menu: 35;
      --layer-modal: 160;
      --layer-modal-priority: 220;
    }

    .admin-users-head {
      align-items: flex-end;
    }

    .admin-users-metrics {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .admin-users-metrics article {
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface);
    }

    .admin-users-metrics small,
    .admin-users-metrics strong {
      display: block;
    }

    .admin-users-metrics small {
      color: var(--text-soft);
      font-size: .78rem;
    }

    .admin-users-metrics strong {
      margin-top: 6px;
      font-size: 1.5rem;
    }

    .admin-users-card {
      overflow: hidden;
    }

    .admin-users-toolbar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 16px;
    }

    .admin-users-toolbar .field {
      width: min(440px, 100%);
    }

    .admin-users-table {
      max-height: calc(48px + (10 * 72px) + 2px);
      overflow: auto;
      overscroll-behavior: contain;
      scrollbar-color: var(--line-strong) transparent;
      scrollbar-width: thin;
      border: 1px solid var(--line);
      border-radius: 16px;
    }

    .admin-users-row {
      display: grid;
      grid-template-columns: minmax(190px, 1.25fr) minmax(210px, 1.3fr) minmax(120px, .7fr) minmax(155px, .85fr) minmax(135px, .75fr);
      gap: 14px;
      align-items: center;
      min-width: 900px;
      padding: 14px 16px;
      border-top: 1px solid var(--line);
    }

    [data-admin-users-list] .admin-users-row {
      box-sizing: border-box;
      height: 72px;
    }

    .admin-users-row:first-child,
    .admin-users-row-head + [data-admin-users-list] .admin-users-row:first-child {
      border-top: 0;
    }

    .admin-users-row-head {
      position: sticky;
      z-index: 2;
      top: 0;
      min-height: 48px;
      border-top: 0;
      color: var(--text-soft);
      background: var(--surface-soft);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .admin-users-table::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }

    .admin-users-table::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: var(--line-strong);
      background-clip: padding-box;
    }

    .admin-user-primary,
    .admin-user-contact {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .admin-user-primary strong,
    .admin-user-contact span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-user-contact small,
    .admin-user-primary small {
      color: var(--text-soft);
    }

    @media (max-width: 900px) {
      .admin-users-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .admin-users-toolbar {
        align-items: stretch;
        flex-direction: column;
      }
    }

    body.theme-light {
      color-scheme: light;
      --bg: #edf6ef;
      --bg-soft: #f7fbf8;
      --surface: rgba(255, 255, 255, 0.88);
      --surface-solid: #ffffff;
      --surface-soft: #f3faf6;
      --line: rgba(18, 32, 23, 0.11);
      --line-strong: rgba(18, 32, 23, 0.2);
      --text: #142018;
      --text-soft: #4d6155;
      --ink: #155d43;
      --success: #1b7c55;
      --shadow: 0 28px 70px rgba(105, 126, 114, 0.14);
    }

    body.theme-dark {
      color-scheme: dark;
      --bg: #061a13;
      --bg-soft: #0a241a;
      --surface: rgba(10, 42, 30, 0.9);
      --surface-solid: #0d2b20;
      --surface-soft: #092219;
      --line: rgba(137, 226, 178, 0.15);
      --line-strong: rgba(137, 226, 178, 0.28);
      --text: #effaf3;
      --text-soft: #a9c8b7;
      --ink: #176348;
      --success: #83edb6;
      --warning: #ffd95c;
      --danger: #ff8b9a;
      --shadow: 0 28px 70px rgba(0, 18, 12, 0.4);
    }

    * {
      box-sizing: border-box;
    }

    html {
      width: 100%;
      max-width: 100%;
      scroll-behavior: smooth;
      overflow-x: hidden;
      overscroll-behavior-x: none;
    }

    body {
      margin: 0;
      min-height: 100dvh;
      font-family: "Manrope", "Segoe UI", sans-serif;
      color: var(--text);
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      overscroll-behavior-x: none;
      background:
        radial-gradient(circle at top left, rgba(210, 239, 220, 0.82), transparent 24%),
        radial-gradient(circle at top right, rgba(223, 242, 229, 0.9), transparent 30%),
        linear-gradient(180deg, #f9fcfa 0%, var(--bg) 100%);
    }

    body.theme-dark {
      background:
        radial-gradient(circle at top left, rgba(31, 119, 82, 0.24), transparent 26%),
        radial-gradient(circle at top right, rgba(78, 173, 119, 0.16), transparent 31%),
        linear-gradient(180deg, #09261c 0%, var(--bg) 100%);
    }

    [hidden] {
      display: none !important;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .auth-shell {
      position: relative;
      height: 100dvh;
      min-height: 100dvh;
      display: grid;
      padding: 0;
      overflow: hidden;
      background: #0b2a21;
    }

    .auth-shell.is-hidden {
      display: none;
    }

    .auth-layout {
      width: 100%;
      max-width: 100%;
      height: 100dvh;
      min-height: 100dvh;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(380px, .72fr) minmax(620px, 1.28fr);
    }

    .auth-access {
      position: relative;
      z-index: 2;
      height: 100dvh;
      min-height: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: clamp(18px, 3vh, 42px);
      padding: clamp(26px, 4vh, 64px) clamp(34px, 5vw, 72px);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      color: #13241d;
      background:
        radial-gradient(circle at 0 0, rgba(211, 229, 216, .5), transparent 28%),
        linear-gradient(145deg, #fffefb 0%, #f5f0e6 100%);
      box-shadow: 24px 0 70px rgba(2, 17, 12, .2);
      color-scheme: light;
      overflow: hidden;
    }

    .auth-access-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .auth-access-top {
      display: grid;
      gap: 18px;
    }

    .auth-back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid rgba(16, 55, 42, .12);
      border-radius: 999px;
      color: #315046;
      background: rgba(255, 255, 255, .48);
      font-size: .76rem;
      font-weight: 800;
      transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .auth-back-link:hover,
    .auth-back-link:focus-visible {
      color: #0f4b39;
      border-color: rgba(15, 75, 57, .3);
      background: rgba(255, 255, 255, .86);
      transform: translateX(-2px);
    }

    .auth-back-link span[aria-hidden="true"] {
      font-size: 1rem;
      line-height: 1;
    }

    .auth-access-head .language-switcher {
      margin: 0;
    }

    .auth-access-head .language-switcher label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .auth-access-head .language-switcher .select,
    body.theme-dark .auth-access-head .language-switcher .select {
      min-width: 126px;
      min-height: 42px;
      padding-block: 8px;
      background: rgba(255, 255, 255, .58);
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      width: fit-content;
    }

    .auth-brand img,
    .auth-showcase-brand img,
    .auth-preview-logo img {
      display: block;
      object-fit: cover;
    }

    .auth-brand img {
      width: 54px;
      height: 54px;
      border-radius: 16px;
    }

    .auth-brand strong {
      display: block;
      color: #10231b;
      font-size: clamp(1.45rem, 2vw, 2rem);
      letter-spacing: -.06em;
    }

    .auth-brand span {
      display: block;
      margin-top: 2px;
      color: #627069;
      font-size: .76rem;
      font-weight: 700;
    }

    .auth-card {
      width: min(470px, 100%);
      align-self: center;
      display: grid;
      gap: 15px;
      min-width: 0;
    }

    .auth-card-heading h1 {
      margin: 0;
      color: #12241c;
      font-size: clamp(2rem, 3vw, 3rem);
      line-height: 1.05;
      letter-spacing: -.065em;
    }

    .auth-card-heading p {
      max-width: 390px;
      margin: 12px 0 0;
      color: #5f6b65;
      font-size: 1rem;
      line-height: 1.55;
    }

    .auth-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(16, 55, 42, .06);
      border: 1px solid rgba(16, 55, 42, .1);
    }

    .auth-mode-btn {
      height: 44px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #52685e;
      font-weight: 800;
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease;
    }

    .auth-mode-btn:hover,
    .auth-mode-btn:focus-visible {
      color: #123f31;
      background: rgba(255, 255, 255, .58);
    }

    .auth-mode-btn.is-active {
      background: #fff;
      color: #10382b;
      box-shadow: 0 8px 24px rgba(23, 55, 43, .09);
    }

    .auth-linkedin {
      width: 100%;
      min-height: 54px;
      border: 1px solid rgba(19, 42, 32, .18);
      border-radius: 13px;
      color: #15231d;
      background: rgba(255, 255, 255, .72);
      box-shadow: none;
    }

    .auth-linkedin:hover {
      color: #fff;
      border-color: #0a66c2;
      background: #0a66c2;
    }

    .auth-linkedin-mark {
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      margin-right: 8px;
      border-radius: 4px;
      color: #fff;
      background: #0a66c2;
      font-size: .82rem;
      font-weight: 900;
      line-height: 1;
    }

    .auth-divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 14px;
      color: #727c77;
      font-size: .78rem;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: "";
      height: 1px;
      background: rgba(17, 41, 31, .14);
    }

    .auth-access .field label,
    body.theme-dark .auth-access .field label {
      color: #283b33;
    }

    .auth-access .input,
    .auth-access .select,
    body.theme-dark .auth-access .input,
    body.theme-dark .auth-access .select {
      min-height: 50px;
      color: #13241d;
      border-color: rgba(17, 41, 31, .18);
      background: rgba(255, 255, 255, .82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
      caret-color: #176348;
    }

    .auth-access .input::placeholder,
    body.theme-dark .auth-access .input::placeholder {
      color: #7a847f;
      opacity: 1;
    }

    .auth-access .input:focus,
    body.theme-dark .auth-access .input:focus {
      color: #10231b;
      border-color: #27815f;
      background: #fff;
      outline: 3px solid rgba(39, 129, 95, .16);
    }

    .auth-access .input:-webkit-autofill,
    .auth-access .input:-webkit-autofill:hover,
    .auth-access .input:-webkit-autofill:focus {
      -webkit-text-fill-color: #10231b;
      -webkit-box-shadow: 0 0 0 1000px #fff inset;
      box-shadow: 0 0 0 1000px #fff inset;
      caret-color: #176348;
      transition: background-color 9999s ease-out 0s;
    }

    body.theme-dark .auth-access .select option {
      color: #13241d;
      background: #fffdf8;
    }

    .auth-actions {
      display: grid;
      gap: 9px;
    }

    .auth-actions .btn {
      width: 100%;
    }

    .auth-actions .btn.primary {
      min-height: 54px;
      border-color: #0d4a37;
      color: #fff;
      background: linear-gradient(135deg, #0f4b39, #176348);
      box-shadow: 0 16px 28px rgba(15, 75, 57, .16);
    }

    body.theme-dark .auth-actions .btn.primary {
      color: #fff;
    }

    .auth-forgot {
      justify-self: end;
      width: auto !important;
      height: auto;
      min-height: 0;
      padding: 0;
      border: 0;
      color: #15543f;
      background: transparent;
      box-shadow: none;
      font-size: .8rem;
    }

    .auth-actions .auth-forgot {
      height: auto;
      min-height: 18px;
      padding: 0;
    }

    .auth-forgot:hover {
      color: #0d3528;
      background: transparent;
    }

    .auth-name-field.is-hidden {
      display: none;
    }

    .auth-legal-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #52605a;
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .auth-legal-consent.is-hidden { display: none; }

    .auth-legal-consent input {
      width: 18px;
      height: 18px;
      margin-top: 1px;
      accent-color: #d07a3d;
      flex: 0 0 auto;
    }

    .auth-shell.is-signup .auth-forgot {
      display: none;
    }

    .auth-shell .status {
      width: 100%;
      justify-content: flex-start;
      border-radius: 12px;
      font-size: .75rem;
    }

    .auth-shell .status.warning,
    body.theme-dark .auth-shell .status.warning {
      color: #765300;
      background: #f4e8bd;
      border: 1px solid rgba(118, 83, 0, .14);
    }

    .password-recovery-modal {
      position: fixed;
      inset: 0;
      z-index: 240;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(3, 22, 16, .72);
      backdrop-filter: blur(10px);
    }

    .password-recovery-modal.is-open {
      display: grid;
    }

    .password-recovery-card {
      width: min(460px, 100%);
      max-height: calc(100dvh - 40px);
      overflow-y: auto;
      padding: 26px;
      border: 1px solid rgba(16, 55, 42, .12);
      border-radius: 24px;
      color: #13241d;
      background: #fffdf8;
      box-shadow: 0 30px 80px rgba(0, 18, 12, .32);
      color-scheme: light;
    }

    .password-recovery-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }

    .password-recovery-head h2 {
      margin: 0;
      color: #10382b;
      font-size: 1.55rem;
      letter-spacing: -.045em;
    }

    .password-recovery-head p {
      margin: 7px 0 0;
      color: #607069;
      font-size: .88rem;
      line-height: 1.55;
    }

    .password-recovery-close {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 1px solid rgba(16, 55, 42, .12);
      border-radius: 999px;
      color: #29473c;
      background: #f2f6f2;
      cursor: pointer;
      font-size: 1.25rem;
    }

    .password-recovery-form {
      display: grid;
      gap: 15px;
    }

    .password-recovery-step {
      display: grid;
      gap: 15px;
    }

    .password-recovery-step[hidden] {
      display: none;
    }

    .password-recovery-card .field label {
      color: #2b443a;
    }

    .password-recovery-card .input,
    body.theme-dark .password-recovery-card .input {
      min-height: 50px;
      color: #13241d;
      border-color: rgba(17, 41, 31, .18);
      background: #fff;
      caret-color: #176348;
    }

    .password-recovery-card .input::placeholder,
    body.theme-dark .password-recovery-card .input::placeholder {
      color: #77837d;
      opacity: 1;
    }

    .password-recovery-code {
      text-align: center;
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: .42em;
      font-variant-numeric: tabular-nums;
    }

    .password-recovery-actions {
      display: grid;
      gap: 10px;
    }

    .password-recovery-actions .btn {
      width: 100%;
    }

    .password-recovery-actions .btn.primary,
    body.theme-dark .password-recovery-actions .btn.primary {
      color: #fff;
      background: linear-gradient(135deg, #0f4b39, #176348);
    }

    .password-recovery-resend {
      min-height: 38px;
      height: auto;
      padding: 4px 8px;
      color: #15543f;
      background: transparent;
      box-shadow: none;
      font-size: .78rem;
    }

    .password-recovery-status {
      min-height: 42px;
      padding: 10px 12px;
      border-radius: 12px;
      color: #52645b;
      background: #edf4ef;
      font-size: .78rem;
      font-weight: 700;
      line-height: 1.45;
    }

    .password-recovery-status.is-success {
      color: #12613f;
      background: #e2f3e9;
    }

    .password-recovery-status.is-danger {
      color: #9b2f42;
      background: #f9e5e8;
    }

    .password-recovery-hint {
      margin: 0;
      color: #6d7973;
      font-size: .76rem;
      line-height: 1.5;
    }

    .auth-benefits {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      width: min(500px, 100%);
    }

    .auth-benefit {
      display: grid;
      gap: 6px;
      color: #4e5f57;
      font-size: .72rem;
      line-height: 1.45;
    }

    .auth-benefit-icon {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      color: #176348;
      border: 1px solid rgba(23, 99, 72, .18);
      background: rgba(157, 224, 184, .2);
      font-size: 1.05rem;
      font-weight: 900;
    }

    .auth-benefit strong {
      color: #263a31;
      font-size: .76rem;
    }

    .auth-showcase {
      position: relative;
      display: grid;
      align-content: center;
      gap: clamp(24px, 4vh, 42px);
      min-width: 0;
      padding: clamp(38px, 5vw, 78px);
      color: #f2f8f4;
      background:
        radial-gradient(circle at 88% 12%, rgba(115, 220, 161, .12), transparent 28%),
        radial-gradient(circle at 20% 78%, rgba(213, 184, 90, .08), transparent 24%),
        linear-gradient(145deg, #071d17, #0b3025 62%, #071d17);
    }

    .auth-showcase::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .2;
      background-image:
        linear-gradient(rgba(157, 224, 184, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(157, 224, 184, .08) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
    }

    .auth-showcase-heading,
    .auth-product-preview {
      position: relative;
      z-index: 1;
    }

    .auth-showcase-heading {
      display: grid;
      justify-items: center;
      gap: 8px;
      text-align: center;
    }

    .auth-showcase-brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .auth-showcase-brand img {
      width: 42px;
      height: 42px;
      border-radius: 13px;
    }

    .auth-showcase-brand strong {
      font-size: clamp(1.7rem, 3vw, 2.7rem);
      letter-spacing: -.06em;
    }

    .auth-showcase-brand strong span {
      color: #87d7aa;
    }

    .auth-showcase-heading p {
      margin: 0;
      color: #c0d1c8;
      font-size: clamp(.85rem, 1.2vw, 1rem);
    }

    .auth-product-preview {
      width: min(930px, 100%);
      min-height: 520px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(157, 224, 184, .25);
      border-radius: 22px;
      background: rgba(4, 25, 19, .72);
      box-shadow: 0 34px 90px rgba(0, 0, 0, .25);
      backdrop-filter: blur(18px);
    }

    .auth-preview-sidebar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 24px 14px;
      border-right: 1px solid rgba(157, 224, 184, .12);
      background: linear-gradient(180deg, rgba(19, 77, 57, .68), rgba(7, 37, 28, .86));
    }

    .auth-preview-logo img {
      width: 40px;
      height: 40px;
      margin: 0 8px 18px;
      border-radius: 12px;
    }

    .auth-preview-nav {
      padding: 10px 12px;
      border-radius: 10px;
      color: #b9cdc3;
      font-size: .75rem;
      font-weight: 700;
    }

    .auth-preview-nav.is-active {
      color: #effaf3;
      background: rgba(119, 218, 161, .16);
    }

    .auth-preview-plan {
      margin-top: auto;
      padding: 14px 12px;
      border-radius: 12px;
      color: #d7e8df;
      border: 1px solid rgba(213, 184, 90, .2);
      background: rgba(213, 184, 90, .08);
      font-size: .7rem;
      line-height: 1.45;
    }

    .auth-preview-plan strong {
      display: block;
      color: #f0cf63;
    }

    .auth-preview-main {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 14px;
      padding: 26px;
    }

    .auth-preview-welcome h2 {
      margin: 0;
      color: #fff;
      font-size: 1.55rem;
    }

    .auth-preview-welcome p {
      margin: 5px 0 0;
      color: #b5c9bf;
      font-size: .78rem;
    }

    .auth-preview-card {
      padding: 20px;
      border: 1px solid rgba(157, 224, 184, .14);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(22, 76, 57, .58), rgba(10, 47, 36, .72));
    }

    .auth-preview-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #f4faf6;
      font-size: .87rem;
      font-weight: 900;
    }

    .auth-preview-card-head i {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: #9de0b8;
      border: 1px solid rgba(157, 224, 184, .34);
      background: rgba(157, 224, 184, .1);
      font-style: normal;
    }

    .auth-preview-chat {
      margin-top: 14px;
      padding: 15px;
      border: 1px solid rgba(157, 224, 184, .12);
      border-radius: 13px;
      color: #aebfb7;
      background: rgba(1, 18, 13, .26);
      font-size: .72rem;
    }

    .auth-preview-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 12px;
    }

    .auth-preview-chips span {
      padding: 7px 9px;
      border: 1px solid rgba(157, 224, 184, .12);
      border-radius: 999px;
      color: #bed0c7;
      font-size: .62rem;
    }

    .auth-preview-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .auth-preview-grid .auth-preview-card {
      min-height: 152px;
    }

    .auth-preview-grid h3 {
      margin: 16px 0 5px;
      color: #fff;
      font-size: .95rem;
    }

    .auth-preview-grid p {
      margin: 0;
      color: #b3c5bc;
      font-size: .68rem;
      line-height: 1.55;
    }

    .auth-preview-progress {
      height: 6px;
      margin-top: 17px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
    }

    .auth-preview-progress::before {
      content: "";
      display: block;
      width: 68%;
      height: 100%;
      background: #d5b85a;
    }

    .auth-preview-match {
      display: inline-flex;
      margin-top: 12px;
      padding: 6px 9px;
      border-radius: 999px;
      color: #aaf0c5;
      background: rgba(81, 193, 127, .13);
      font-size: .67rem;
      font-weight: 800;
    }

    .auth-legal-consent a,
    .auth-legal-note a,
    .legal-links a {
      color: #8b5e34;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .auth-legal-note {
      margin: 0;
      color: #68746f;
      font-size: 0.75rem;
      line-height: 1.5;
      text-align: center;
    }

    .legal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-top: 16px;
      font-size: 0.84rem;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    .app-shell {
      max-width: 1560px;
      margin: 0 auto;
      padding: 20px;
    }

    .mobile-sidebar-toggle,
    .sidebar-mobile-backdrop {
      display: none;
    }

    .mobile-sidebar-toggle {
      position: fixed;
      top: 14px;
      left: 14px;
      width: 48px;
      height: 48px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(16, 24, 20, 0.92);
      color: #f5f8f6;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
      z-index: calc(var(--layer-sidebar) + 20);
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    body.theme-light .mobile-sidebar-toggle {
      background: rgba(255, 255, 255, 0.96);
      color: var(--text);
      box-shadow: 0 18px 40px rgba(105, 126, 114, 0.14);
    }

    .mobile-sidebar-toggle span {
      display: block;
      font-size: 1.2rem;
      line-height: 1;
      transform: translateY(-1px);
    }

    .sticky-plan-cta {
      position: fixed;
      top: 22px;
      right: 24px;
      z-index: calc(var(--layer-sidebar) + 18);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 3px 12px;
      min-width: 210px;
      padding: 11px 15px 11px 17px;
      border: 1px solid rgba(119, 82, 0, 0.24);
      border-radius: 18px;
      color: #201701;
      background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.55), transparent 42%),
        linear-gradient(135deg, #ffe89a, #f4c94f 64%, #dcaa24);
      box-shadow: 0 16px 38px rgba(114, 78, 4, 0.25);
      cursor: pointer;
      text-align: left;
      transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
      animation: sticky-plan-arrival 420ms cubic-bezier(.2, .8, .2, 1) both;
    }

    .sticky-plan-cta[hidden] { display: none !important; }

    .sticky-plan-cta:hover {
      transform: translateY(-2px);
      filter: saturate(1.05);
      box-shadow: 0 20px 46px rgba(114, 78, 4, 0.32);
    }

    .sticky-plan-cta small {
      grid-column: 1;
      color: rgba(32, 23, 1, 0.68);
      font-size: 0.69rem;
      font-weight: 850;
      letter-spacing: 0.07em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .sticky-plan-cta strong {
      grid-column: 1;
      font-size: 0.9rem;
      line-height: 1.15;
    }

    .sticky-plan-cta-arrow {
      grid-column: 2;
      grid-row: 1 / 3;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.48);
      font-size: 1rem;
      font-weight: 900;
    }

    .app-shell.has-sticky-plan-cta .main { padding-top: 76px; }

    @keyframes sticky-plan-arrival {
      from { opacity: 0; transform: translateY(-12px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .sidebar-mobile-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(4, 9, 7, 0.52);
      backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      z-index: calc(var(--layer-sidebar) - 1);
    }

    .app-shell.is-mobile-nav-open .sidebar-mobile-backdrop {
      opacity: 1;
      pointer-events: auto;
    }

    .app-shell.is-auth-locked {
      display: none;
    }

    .sidebar,
    .panel,
    .hero-card,
    .metric,
    .list-card,
    .project-card,
    .timeline-card,
    .canvas-card,
    .draft-card,
    .preview-card,
    .detail-card {
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .sidebar {
      position: fixed;
      top: 20px;
      left: 20px;
      width: var(--sidebar-collapsed);
      height: calc(100vh - 40px);
      border-radius: 30px;
      padding: 16px 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: linear-gradient(180deg, rgba(236, 246, 240, 0.94), rgba(245, 249, 247, 0.9));
      overflow: visible;
      z-index: var(--layer-sidebar);
      box-shadow: 0 24px 60px rgba(51, 75, 61, 0.14);
      transition: width 240ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 220ms ease;
    }

    .sidebar:hover,
    .sidebar:focus-within {
      width: var(--sidebar-expanded);
      box-shadow: 0 34px 90px rgba(43, 68, 54, 0.22);
    }

    .theme-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px;
      border-radius: 999px;
      background: transparent;
      border: 1px solid transparent;
      margin: 0;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding: 0 5px;
      pointer-events: none;
      visibility: hidden;
      transition: max-height 220ms ease, opacity 180ms ease, margin 220ms ease, padding 220ms ease, visibility 180ms ease;
    }

    .sidebar:hover .theme-toggle,
    .sidebar:focus-within .theme-toggle {
      margin: 2px 0 8px;
      background: rgba(255, 255, 255, 0.34);
      border-color: transparent;
      max-height: 46px;
      opacity: 1;
      padding: 5px;
      pointer-events: auto;
      visibility: visible;
    }

    .theme-btn {
      flex: 1;
      height: 34px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-soft);
      font-weight: 800;
      cursor: pointer;
    }

    .theme-btn.is-active {
      background: var(--surface-solid);
      color: var(--text);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 4px 2px;
      min-height: 46px;
      overflow: hidden;
    }

    .brand-sidebar {
      margin-top: 0;
      min-height: 58px;
      padding: 14px 4px 0;
      border-top: 1px solid var(--line);
    }

    .sidebar:hover .brand,
    .sidebar:focus-within .brand {
      justify-content: flex-start;
      gap: 10px;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--ink);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: 800;
      box-shadow: none;
      overflow: hidden;
    }

    .brand strong {
      display: block;
      font-size: 0.96rem;
      letter-spacing: -0.04em;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      white-space: nowrap;
      transform: translateX(-8px);
      transition: max-width 220ms ease, opacity 180ms ease, transform 220ms ease;
    }

    .sidebar:hover .brand strong,
    .sidebar:focus-within .brand strong {
      max-width: 150px;
      opacity: 1;
      transform: translateX(0);
    }

    .brand span,
    .muted {
      color: var(--text-soft);
    }

    .user-card {
      position: relative;
      padding: 14px 12px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.06);
      display: grid;
      gap: 10px;
    }

    .user-card-sidebar {
      margin-top: 0;
      margin-bottom: 4px;
      flex: 0 0 74px;
      min-height: 74px;
      max-height: 74px;
      border: 0;
      padding: 8px 3px;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      transition: padding 240ms cubic-bezier(.2,.8,.2,1);
    }

    .sidebar:hover .user-card-sidebar,
    .sidebar:focus-within .user-card-sidebar {
      flex-basis: auto;
      min-height: auto;
      max-height: none;
      border: 0;
      padding: 8px 6px 12px;
      background: transparent;
      box-shadow: none;
    }

    .user-card-header {
      display: grid;
      height: 58px;
      min-height: 58px;
      align-self: start;
      grid-template-columns: 58px 0;
      column-gap: 0;
      align-items: center;
      justify-content: center;
      transition: grid-template-columns 220ms ease, column-gap 220ms ease, justify-content 220ms ease;
    }

    .sidebar:hover .user-card-header,
    .sidebar:focus-within .user-card-header {
      grid-template-columns: 58px minmax(0, 1fr);
      column-gap: 14px;
      justify-content: start;
    }

    .user-avatar-button {
      position: relative;
      width: 58px;
      height: 58px;
      border: 0;
      border-radius: 18px;
      padding: 0;
      background: linear-gradient(180deg, rgba(51, 83, 63, 0.92), rgba(17, 25, 21, 0.96));
      color: #f5fff7;
      display: grid;
      place-items: center;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 12px 24px rgba(5, 9, 7, 0.18);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .user-avatar-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 30px rgba(5, 9, 7, 0.24);
    }

    .user-avatar-button img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .user-avatar-button img[hidden] {
      display: none;
    }

    .user-avatar-fallback {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -0.05em;
      text-transform: uppercase;
    }

    .user-card-copy {
      min-width: 0;
      display: grid;
      align-content: center;
      justify-items: start;
      gap: 7px;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      padding-right: 4px;
      transform: translateX(-8px);
      transition: max-width 220ms ease, opacity 180ms ease, transform 220ms ease;
    }

    .sidebar:hover .user-card-copy,
    .sidebar:focus-within .user-card-copy {
      max-width: 150px;
      opacity: 1;
      transform: translateX(0);
    }

    .user-card strong {
      display: block;
      font-size: 0.96rem;
      letter-spacing: -0.03em;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .user-card span {
      color: var(--text-soft);
      font-size: 0.8rem;
      line-height: 1.45;
      word-break: break-word;
    }

    .user-status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      width: fit-content;
      min-height: 18px;
      padding: 0;
      border-radius: 0;
      border: 0;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: transparent;
      text-shadow: 0 0 12px currentColor;
      box-shadow: none;
    }

    .user-status-badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex: 0 0 7px;
      background: currentColor;
      box-shadow: 0 0 10px currentColor;
    }

    .user-status-badge.is-admin {
      color: #7ff4bd;
      box-shadow: none;
    }

    .user-status-badge.is-trial {
      color: #ffd95c;
      box-shadow: none;
    }

    .user-status-badge.is-pro {
      color: #69ff9d;
      box-shadow: none;
    }

    .user-status-badge.is-expired {
      color: #ff6f86;
      box-shadow: none;
    }

    .user-menu {
      position: absolute;
      top: 50%;
      left: calc(100% + 14px);
      transform: translateY(-50%);
      width: 176px;
      padding: 12px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(250, 252, 251, 0.96), rgba(239, 246, 242, 0.98));
      box-shadow: 0 18px 34px rgba(44, 66, 55, 0.18);
      backdrop-filter: blur(18px);
      display: none;
      z-index: var(--layer-sidebar-menu);
    }

    .user-menu::before {
      content: "";
      position: absolute;
      top: 50%;
      right: calc(100% - 1px);
      width: 14px;
      height: 14px;
      border-left: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(246, 250, 247, 0.98);
      transform: translateY(-50%) rotate(45deg);
    }

    .user-menu.is-open {
      display: block;
    }

    .user-menu button {
      width: 100%;
    }

    .user-menu-actions {
      display: grid;
      gap: 8px;
    }

    .user-menu-action {
      min-height: 42px;
      border: 1px solid rgba(20, 32, 24, 0.08);
      min-width: 0;
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--text);
      font-weight: 800;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .user-menu-action:hover {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(20, 32, 24, 0.14);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    }

    .user-menu-action.is-danger {
      background: rgba(189, 84, 84, 0.1);
      color: var(--danger);
      border-color: rgba(189, 84, 84, 0.18);
      box-shadow: none;
    }

    .user-menu-action.is-danger:hover {
      background: rgba(189, 84, 84, 0.16);
      border-color: rgba(189, 84, 84, 0.28);
    }

    .side-nav {
      display: grid;
      gap: 6px;
      min-height: 0;
      flex: 1 1 auto;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .sidebar-footer {
      margin-top: auto;
      padding-top: 12px;
      flex: 0 0 auto;
    }

    .sidebar-logout {
      width: 100%;
      height: 46px;
      border: 1px solid rgba(189, 84, 84, 0.18);
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 0 10px;
      background: rgba(189, 84, 84, 0.14);
      color: var(--danger);
      font-weight: 800;
      cursor: pointer;
      overflow: hidden;
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, gap 220ms ease;
    }

    .sidebar-logout:hover {
      transform: translateY(-1px);
      background: rgba(189, 84, 84, 0.2);
      border-color: rgba(189, 84, 84, 0.32);
    }

    .sidebar-logout-icon {
      width: 21px;
      height: 21px;
      flex: 0 0 21px;
    }

    .sidebar-logout-label {
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      white-space: nowrap;
      transform: translateX(-6px);
      transition: max-width 220ms ease, opacity 180ms ease, transform 220ms ease;
    }

    .sidebar:hover .sidebar-logout,
    .sidebar:focus-within .sidebar-logout {
      justify-content: flex-start;
      gap: 10px;
    }

    .sidebar:hover .sidebar-logout-label,
    .sidebar:focus-within .sidebar-logout-label {
      max-width: 130px;
      opacity: 1;
      transform: translateX(0);
    }

    .nav-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      min-height: 44px;
      padding: 5px 9px;
      border-radius: 15px;
      color: var(--text-soft);
      font-weight: 700;
      font-size: 0.88rem;
      transition: background 180ms ease, transform 180ms ease, color 180ms ease;
    }

    .sidebar:hover .nav-link,
    .sidebar:focus-within .nav-link {
      justify-content: flex-start;
      gap: 10px;
    }

    .nav-link:hover {
      transform: translateX(1px);
      background: rgba(255, 255, 255, 0.38);
    }

    .nav-link.active {
      background: rgba(255, 255, 255, 0.78);
      color: var(--text);
      box-shadow: 0 10px 24px rgba(57, 84, 68, 0.1);
    }

    .nav-main {
      display: inline-flex;
      align-items: center;
      gap: 0;
      min-width: 0;
      transition: gap 220ms ease;
    }

    .sidebar:hover .nav-main,
    .sidebar:focus-within .nav-main {
      gap: 10px;
    }

    .nav-main > span:not(.nav-icon) {
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      white-space: nowrap;
      transform: translateX(-8px);
      transition: max-width 220ms ease, opacity 180ms ease, transform 220ms ease;
    }

    .sidebar:hover .nav-main > span:not(.nav-icon),
    .sidebar:focus-within .nav-main > span:not(.nav-icon) {
      max-width: 160px;
      opacity: 1;
      transform: translateX(0);
    }

    .nav-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--text-soft);
      font-size: 0.92rem;
      flex-shrink: 0;
    }

    .nav-link.active .nav-icon {
      background: rgba(28, 122, 83, 0.1);
      color: var(--success);
    }

    .main {
      min-width: 0;
      margin-left: calc(var(--sidebar-collapsed) + 24px);
    }

    .hero-card {
      border-radius: 36px;
      padding: 26px;
      margin-bottom: 22px;
      overflow: hidden;
      position: relative;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(241, 248, 244, 0.96));
    }

    body.theme-dark .sidebar {
      background: linear-gradient(180deg, rgba(13, 49, 36, 0.98), rgba(7, 31, 22, 0.99));
      border-color: rgba(137, 226, 178, 0.13);
      box-shadow: 0 26px 64px rgba(0, 20, 13, 0.42);
    }

    body.theme-dark .hero-card {
      background: linear-gradient(145deg, rgba(13, 50, 37, 0.96), rgba(7, 30, 22, 0.98));
      border-color: rgba(137, 226, 178, 0.13);
    }

    body.theme-dark .hero-card::before {
      background: rgba(68, 181, 116, 0.18);
    }

    body.theme-dark .hero-card::after {
      background: rgba(216, 174, 71, 0.12);
    }

    body.theme-dark .eyebrow,
    body.theme-dark .pill,
    body.theme-dark .mini-window,
    body.theme-dark .summary-card,
    body.theme-dark .pulse-card,
    body.theme-dark .overview-command,
    body.theme-dark .overview-pulse-item,
    body.theme-dark .overview-details,
    body.theme-dark .metric,
    body.theme-dark .canvas-block,
    body.theme-dark .fake-section,
    body.theme-dark .step,
    body.theme-dark .insight,
    body.theme-dark .timeline-item,
    body.theme-dark .draft-item,
    body.theme-dark .signal-item,
    body.theme-dark .asset-row,
    body.theme-dark .evidence,
    body.theme-dark .metric,
    body.theme-dark .browser-shell,
    body.theme-dark .portfolio-box,
    body.theme-dark .window-bar,
    body.theme-dark .mini-window-header,
    body.theme-dark .browser-bar,
    body.theme-dark .select,
    body.theme-dark .input,
    body.theme-dark .textarea,
    body.theme-dark .overview-list-item,
    body.theme-dark .overview-kpi,
    body.theme-dark .ai-action-card,
    body.theme-dark .ai-endpoint-item,
    body.theme-dark .ai-context-panel,
    body.theme-dark .ai-context-stat,
    body.theme-dark .empty-state,
    body.theme-dark .work-card,
    body.theme-dark .gap-item,
    body.theme-dark .project-row-button,
    body.theme-dark .project-detail-block,
    body.theme-dark .modal-close,
    body.theme-dark .project-action-btn {
      background: rgba(120, 221, 166, 0.055);
      border-color: var(--line);
      color: var(--text);
    }

    body.theme-dark .overview-command {
      background: linear-gradient(145deg, rgba(14, 51, 38, 0.96), rgba(7, 30, 22, 0.98));
    }

    body.theme-dark .panel,
    body.theme-dark .list-card,
    body.theme-dark .project-card,
    body.theme-dark .timeline-card,
    body.theme-dark .canvas-card,
    body.theme-dark .draft-card,
    body.theme-dark .preview-card,
    body.theme-dark .detail-card,
    body.theme-dark .overview-card,
    body.theme-dark .projects-table-card,
    body.theme-dark .project-form-card,
    body.theme-dark .project-modal-card,
    body.theme-dark .config-item,
    body.theme-dark .portfolio-template-card,
    body.theme-dark .portfolio-create-card,
    body.theme-dark .portfolio-option-card,
    body.theme-dark .portfolio-options-shell,
    body.theme-dark .resume-card,
    body.theme-dark .resume-option-card,
    body.theme-dark .resume-options-shell {
      border-color: rgba(137, 226, 178, 0.12);
    }

    body.theme-dark .btn.secondary {
      background: rgba(121, 222, 166, 0.1);
      color: var(--text);
      border: 1px solid var(--line);
    }

    body.theme-dark .btn.primary {
      color: #ffffff;
      background: linear-gradient(135deg, #176348, #23845e);
      box-shadow: 0 18px 30px rgba(0, 24, 16, 0.3);
    }

    body.theme-dark .tag {
      color: #101111;
    }

    body.theme-dark .logout-btn {
      background: rgba(189, 84, 84, 0.18);
      color: #ffb4b4;
      border: 1px solid rgba(189, 84, 84, 0.2);
    }

    body.theme-dark .browser-url,
    body.theme-dark .window-search,
    body.theme-dark .round-icon {
      background: rgba(121, 222, 166, 0.1);
      color: var(--text-soft);
    }

    body.theme-dark .nav-icon {
      background: transparent;
      color: var(--text-soft);
    }

    body.theme-dark .nav-link.active .nav-icon {
      background: rgba(127, 244, 189, 0.1);
      color: #7ff4bd;
    }

    body.theme-dark .brand-mark {
      color: #101111;
    }

    body.theme-dark .resume-option-card.ai {
      color: #101111;
    }

    body.theme-dark .resume-option-card.ai p,
    body.theme-dark .resume-option-card.ai strong,
    body.theme-dark .resume-option-card.ai h3,
    body.theme-dark .resume-option-card.ai .muted {
      color: #101111;
    }

    body.theme-dark .resume-option-card.ai .tag {
      color: #101111;
      border-color: rgba(16, 17, 17, 0.08);
    }

    body.theme-dark .resume-option-card.ai .resume-option-badge {
      background: rgba(98, 83, 167, 0.18);
      color: #4b3ea0;
    }

    body.theme-dark .template-pill {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }

    body.theme-dark .template-pill.is-trial {
      background: rgba(29, 122, 83, 0.18);
      border-color: rgba(127, 244, 189, 0.16);
      color: #7ff4bd;
    }

    body.theme-dark .template-pill.is-premium {
      background: rgba(139, 103, 18, 0.18);
      border-color: rgba(255, 217, 92, 0.16);
      color: #ffd95c;
    }

    body.theme-dark .auth-shell {
      background: #0b2a21;
    }

    body.theme-dark .theme-btn.is-active,
    body.theme-dark .nav-link.active {
      background: rgba(122, 231, 173, 0.13);
      color: var(--text);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    body.theme-dark .mini-window,
    body.theme-dark .summary-card,
    body.theme-dark .pulse-card,
    body.theme-dark .browser-shell,
    body.theme-dark .canvas-block,
    body.theme-dark .evidence {
      background: rgba(120, 221, 166, 0.055);
      border-color: var(--line);
      color: var(--text);
    }

    body.theme-dark .mini-window-header,
    body.theme-dark .browser-bar {
      background: rgba(120, 221, 166, 0.045);
      border-color: var(--line);
      color: var(--text);
    }

    body.theme-dark .tag {
      background: rgba(121, 222, 166, 0.09);
      color: var(--text);
      border-color: var(--line);
    }

    body.theme-dark .input::placeholder,
    body.theme-dark .textarea::placeholder {
      color: rgba(237, 244, 239, 0.48);
    }

    body.theme-dark .project-row-button:hover,
    body.theme-dark .project-action-btn:hover {
      background: rgba(121, 222, 166, 0.11);
      border-color: var(--line-strong);
    }

    body.theme-dark .gap-item {
      background: rgba(255, 233, 175, 0.08);
      border-color: rgba(255, 217, 92, 0.2);
    }

    body.theme-dark .generated {
      color: var(--text-soft);
    }

    body.theme-dark .footer-note {
      background: rgba(121, 222, 166, 0.065);
      color: var(--text-soft);
      border: 1px solid var(--line);
    }

    body.theme-dark .user-menu {
      background: linear-gradient(180deg, rgba(14, 48, 36, 0.99), rgba(7, 29, 21, 0.99));
      border-color: rgba(137, 226, 178, 0.14);
      box-shadow: 0 22px 40px rgba(0, 18, 12, 0.4);
    }

    body.theme-dark .user-menu::before {
      background: rgba(10, 39, 29, 0.99);
      border-left-color: rgba(137, 226, 178, 0.14);
      border-bottom-color: rgba(137, 226, 178, 0.14);
    }

    body.theme-dark .user-menu-action {
      background: rgba(121, 222, 166, 0.07);
      border-color: rgba(137, 226, 178, 0.13);
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(137, 226, 178, 0.04);
    }

    body.theme-dark .user-menu-action:hover {
      background: rgba(121, 222, 166, 0.12);
      border-color: rgba(137, 226, 178, 0.22);
      box-shadow: inset 0 0 0 1px rgba(137, 226, 178, 0.08);
    }

    body.theme-dark .user-menu-action.is-danger {
      background: rgba(189, 84, 84, 0.16);
      color: #ff9dad;
      border-color: rgba(189, 84, 84, 0.22);
      box-shadow: none;
    }

    body.theme-dark .user-menu-action.is-danger:hover {
      background: rgba(189, 84, 84, 0.24);
      border-color: rgba(255, 140, 160, 0.28);
    }

    body.theme-dark .chip.mint,
    body.theme-dark .chip.sky,
    body.theme-dark .chip.rose,
    body.theme-dark .chip.butter,
    body.theme-dark .chip.lavender {
      color: #101111;
    }

    body.theme-dark .evidence-index,
    body.theme-dark .round-icon {
      color: #101111;
    }

    body.theme-dark .portfolio-hero {
      background: linear-gradient(145deg, rgba(14, 51, 38, 0.98), rgba(7, 29, 21, 0.99));
      border-color: var(--line);
    }

    body.theme-dark .user-card,
    body.theme-dark .auth-toggle {
      border-color: rgba(137, 226, 178, 0.14);
      background: rgba(121, 222, 166, 0.065);
    }

    body.theme-dark .sidebar .user-card-sidebar,
    body.theme-dark .sidebar:hover .user-card-sidebar,
    body.theme-dark .sidebar:focus-within .user-card-sidebar {
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    body.theme-dark .status.success { background: rgba(28, 122, 83, 0.18); }
    body.theme-dark .status.warning { background: rgba(139, 103, 18, 0.18); }
    body.theme-dark .status.danger { background: rgba(189, 84, 84, 0.18); }

    .hero-card::before,
    .hero-card::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(14px);
      opacity: 0.72;
    }

    .hero-card::before {
      width: 280px;
      height: 280px;
      background: rgba(216, 233, 255, 0.86);
      top: -80px;
      right: -60px;
    }

    .hero-card::after {
      width: 240px;
      height: 240px;
      background: rgba(255, 214, 219, 0.65);
      left: -40px;
      bottom: -100px;
    }

    .hero-grid,
    .metrics-grid,
    .onboarding-grid,
    .projects-grid,
    .ai-grid,
    .linkedin-grid,
    .content-grid,
    .preview-grid,
    .portfolio-sections,
    .field-grid {
      display: grid;
      gap: 18px;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: start;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      font-size: 0.82rem;
      font-weight: 800;
      color: var(--text-soft);
      margin-bottom: 16px;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      margin: 0;
    }

    h1 {
      font-size: clamp(2.7rem, 5vw, 4.4rem);
      line-height: 0.92;
      letter-spacing: -0.08em;
      margin-bottom: 14px;
    }

    .hero-copy p {
      color: var(--text-soft);
      line-height: 1.75;
      max-width: 58ch;
      margin-bottom: 22px;
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 18px;
    }

    .pill {
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.92);
      color: var(--text-soft);
      font-weight: 700;
      font-size: 0.88rem;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn {
      height: 48px;
      padding: 0 22px;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 800;
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn.primary {
      background: var(--ink);
      color: #fff;
      box-shadow: 0 18px 30px rgba(16, 17, 17, 0.18);
    }

    .btn.secondary {
      background: rgba(255, 255, 255, 0.88);
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.96);
    }

    .btn.voice.is-listening {
      background: rgba(20, 32, 24, 0.92);
      color: #f5fff7;
      box-shadow: 0 18px 30px rgba(16, 17, 17, 0.18);
    }

    .hero-preview {
      display: grid;
      gap: 14px;
    }

    .mini-window,
    .summary-card,
    .pulse-card {
      border-radius: 28px;
      border: 1px solid rgba(20, 32, 24, 0.06);
      background: linear-gradient(180deg, #fff, #f4faf6);
      overflow: hidden;
    }

    .mini-window-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: rgba(247, 250, 248, 0.92);
    }

    .dots {
      display: flex;
      gap: 8px;
    }

    .dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #dfe7e2;
    }

    .dots span:first-child { background: #ff6c61; }
    .dots span:nth-child(2) { background: #ffcd57; }
    .dots span:nth-child(3) { background: #53d46b; }

    .mini-window-body {
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    .fake-section {
      padding: 14px;
      border-radius: 20px;
      background: var(--surface-soft);
      border: 1px solid rgba(20, 32, 24, 0.05);
    }

    .fake-section strong {
      display: block;
      margin-bottom: 8px;
      letter-spacing: -0.04em;
    }

    .summary-card,
    .pulse-card {
      padding: 18px;
    }

    .summary-card strong,
    .pulse-card strong,
    .section-head h2,
    .panel h3 {
      letter-spacing: -0.05em;
    }

    .summary-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 0.84rem;
      font-weight: 700;
      border: 1px solid rgba(20, 32, 24, 0.06);
    }

    .chip.mint { background: var(--mint); color: #2d6548; }
    .chip.sky { background: var(--sky); color: #284f82; }
    .chip.rose { background: var(--rose); color: #91515b; }
    .chip.butter { background: var(--butter); color: #896618; }
    .chip.lavender { background: var(--lavender); color: #6253a7; }

    .metrics-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 22px;
    }

    .overview-command {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 22px;
      align-items: end;
      padding: 26px;
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(238, 249, 242, 0.76)),
        var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.82);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 18px;
    }

    .overview-command h1 {
      max-width: 760px;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
      margin-bottom: 12px;
    }

    .overview-command p {
      max-width: 72ch;
      color: var(--text-soft);
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .overview-command-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px;
      min-width: min(360px, 100%);
    }

    .overview-pulse-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .overview-pulse-item {
      display: grid;
      gap: 5px;
      padding: 13px 14px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.48);
    }

    .overview-pulse-item strong {
      font-size: 0.9rem;
    }

    .overview-pulse-item span {
      color: var(--text-soft);
      font-size: 0.84rem;
      line-height: 1.45;
    }

    .plan-modal {
      position: fixed;
      inset: 0;
      z-index: var(--layer-modal-priority);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(8, 18, 13, 0.68);
      backdrop-filter: blur(12px);
    }

    .plan-modal.is-open { display: flex; }

    .plan-modal-shell {
      width: min(1120px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
      padding: 26px;
      border: 1px solid rgba(255, 255, 255, 0.74);
      border-radius: 30px;
      background:
        radial-gradient(circle at 86% 4%, rgba(255, 222, 127, 0.34), transparent 28%),
        linear-gradient(145deg, rgba(249, 253, 250, 0.98), rgba(232, 244, 237, 0.98));
      box-shadow: 0 32px 90px rgba(5, 24, 15, 0.28);
    }

    body.theme-dark .plan-modal-shell {
      border-color: rgba(255, 255, 255, 0.12);
      background:
        radial-gradient(circle at 86% 4%, rgba(222, 183, 73, 0.17), transparent 30%),
        linear-gradient(145deg, #17221c, #101914);
    }

    .plan-modal-intro {
      max-width: 720px;
      color: var(--text-soft);
      line-height: 1.65;
    }

    .plan-comparison-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 22px;
    }

    .plan-tier-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 470px;
      padding: 22px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.58);
    }

    body.theme-dark .plan-tier-card { background: rgba(255, 255, 255, 0.045); }

    .plan-tier-card.is-featured {
      color: #f8fff9;
      border-color: rgba(214, 244, 222, 0.22);
      background:
        radial-gradient(circle at 90% 8%, rgba(255, 217, 105, 0.25), transparent 32%),
        linear-gradient(155deg, #1d4637, #10291f 68%, #0d1c16);
      box-shadow: 0 22px 56px rgba(12, 50, 35, 0.2);
    }

    .plan-tier-card.is-current {
      outline: 3px solid rgba(223, 181, 55, 0.72);
      outline-offset: -3px;
    }

    .plan-tier-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 18px;
    }

    .plan-tier-label {
      font-size: 0.76rem;
      font-weight: 850;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .plan-current-badge {
      padding: 6px 9px;
      border-radius: 999px;
      color: #102019;
      background: #f5d86e;
      font-size: 0.72rem;
      font-weight: 850;
    }

    .plan-tier-card h3 {
      margin-bottom: 8px;
      font-size: 1.55rem;
    }

    .plan-tier-price {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin: 14px 0 18px;
    }

    .plan-tier-price strong { font-size: 2rem; letter-spacing: -0.04em; }
    .plan-tier-price span { color: inherit; opacity: 0.72; }

    .plan-benefit-list {
      display: grid;
      gap: 11px;
      margin: 0 0 22px;
      padding: 0;
      list-style: none;
    }

    .plan-benefit-list li {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 8px;
      align-items: start;
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .plan-benefit-list li::before {
      content: "✓";
      font-weight: 900;
      color: #39855f;
    }

    .plan-tier-card.is-featured .plan-benefit-list li::before { color: #f5d86e; }
    .plan-tier-action { width: 100%; margin-top: auto; }
    .plan-tier-card .btn.light {
      color: #11231a;
      border-color: #f4f8f5;
      background: #f4f8f5;
    }

    .overview-focus-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      grid-auto-rows: max-content;
      align-items: start;
      gap: 18px;
      margin-bottom: 18px;
    }

    .overview-details {
      margin-top: 18px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
    }

    .overview-details > summary {
      cursor: pointer;
      padding: 18px 20px;
      color: var(--text);
      font-weight: 900;
      list-style: none;
    }

    .overview-details > summary::-webkit-details-marker {
      display: none;
    }

    .overview-details > summary::after {
      content: "Abrir";
      float: right;
      color: var(--text-soft);
      font-size: 0.82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .overview-details[open] > summary::after {
      content: "Fechar";
    }

    .overview-details-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      padding: 0 18px 18px;
    }

    .overview-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 18px;
      margin-bottom: 22px;
    }

    .overview-stack {
      display: grid;
      gap: 18px;
    }

    .overview-card {
      border-radius: 32px;
      padding: 22px;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .overview-card h3 {
      font-size: 1.45rem;
      margin-bottom: 10px;
      letter-spacing: -0.05em;
    }

    .overview-card p {
      color: var(--text-soft);
      line-height: 1.7;
    }

    .overview-list,
    .overview-kpi-list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .overview-list-item,
    .overview-kpi {
      padding: 16px;
      border-radius: 20px;
      background: var(--surface-soft);
      border: 1px solid rgba(20, 32, 24, 0.05);
    }

    .overview-list-item strong,
    .overview-kpi strong {
      display: block;
      margin-bottom: 6px;
    }

    .overview-kpi {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
    }

    .overview-kpi-value {
      font-size: 1.8rem;
      line-height: 1;
      letter-spacing: -0.07em;
      white-space: nowrap;
    }

    .overview-inline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .ai-action-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .ai-action-card {
      padding: 16px;
      border-radius: 22px;
      background: var(--surface-soft);
      border: 1px solid rgba(20, 32, 24, 0.07);
      display: grid;
      gap: 10px;
    }

    .ai-action-card strong {
      display: block;
      margin-bottom: 4px;
    }

    .ai-action-card p {
      margin: 0;
      color: var(--text-soft);
      line-height: 1.6;
    }

    .ai-action-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ai-endpoint-list {
      display: grid;
      gap: 10px;
    }

    .ai-endpoint-item {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid rgba(20, 32, 24, 0.06);
    }

    .ai-endpoint-item code {
      font-size: 0.82rem;
      word-break: break-all;
    }

    .ai-context-panel {
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 22px;
      background: var(--surface-soft);
      border: 1px solid rgba(20, 32, 24, 0.06);
    }

    .ai-context-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
    }

    .ai-context-stat {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(20, 32, 24, 0.05);
    }

    .ai-context-stat small {
      display: block;
      margin-bottom: 6px;
      color: var(--text-soft);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.72rem;
      font-weight: 800;
    }

    .ai-context-stat strong {
      display: block;
      font-size: 1.1rem;
      letter-spacing: -0.04em;
    }

    .ai-context-stat span {
      display: block;
      margin-top: 4px;
      color: var(--text-soft);
      font-size: 0.88rem;
    }

    .ai-output-grid {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .generated.is-placeholder {
      color: var(--text-soft);
    }

    .ai-inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    .ai-schema-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .ai-note {
      margin-top: 14px;
      color: var(--text-soft);
      line-height: 1.7;
    }

    .empty-state {
      margin-top: 16px;
      padding: 18px;
      border-radius: 22px;
      border: 1px dashed var(--line-strong);
      background: rgba(255, 255, 255, 0.04);
    }

    .empty-state strong {
      display: block;
      margin-bottom: 6px;
    }

    .metric {
      border-radius: 28px;
      padding: 20px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 248, 0.98));
    }

    .metric small {
      display: block;
      color: var(--text-soft);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 800;
      font-size: 0.75rem;
      margin-bottom: 8px;
    }

    .metric strong {
      display: block;
      font-size: 2rem;
      letter-spacing: -0.07em;
      margin-bottom: 8px;
    }

    .section {
      margin-bottom: 22px;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

    .section-head h2 {
      font-size: clamp(1.8rem, 3vw, 2.5rem);
    }

    .section-head p {
      max-width: 60ch;
      color: var(--text-soft);
      line-height: 1.7;
    }

    .onboarding-grid {
      grid-template-columns: 1.15fr 0.85fr;
    }

    .panel,
    .list-card,
    .project-card,
    .timeline-card,
    .canvas-card,
    .draft-card,
    .preview-card,
    .detail-card {
      border-radius: 32px;
      padding: 22px;
    }

    .panel h3,
    .list-card h3,
    .project-card h3,
    .timeline-card h3,
    .canvas-card h3,
    .draft-card h3,
    .preview-card h3,
    .detail-card h3 {
      font-size: 1.5rem;
      margin-bottom: 14px;
    }

    .step-list,
    .insight-list,
    .timeline-list,
    .draft-list,
    .signal-list {
      display: grid;
      gap: 12px;
    }

    .step,
    .insight,
    .timeline-item,
    .draft-item,
    .signal-item,
    .asset-row,
    .project-stat {
      padding: 16px;
      border-radius: 20px;
      background: var(--surface-soft);
      border: 1px solid rgba(20, 32, 24, 0.05);
    }

    .step strong,
    .timeline-item strong,
    .draft-item strong,
    .signal-item strong,
    .asset-row strong {
      display: block;
      margin-bottom: 6px;
      font-size: 1rem;
    }

    .assistant-list {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .assistant-recommendation {
      display: grid;
      gap: 12px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 92%, var(--mint)), var(--surface-soft));
    }

    .assistant-recommendation.is-priority {
      border-color: color-mix(in srgb, var(--success) 42%, var(--line));
      box-shadow: inset 3px 0 0 var(--success);
    }

    .assistant-recommendation-head,
    .assistant-meta,
    .assistant-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .assistant-recommendation h4 {
      margin: 0;
      font-size: 1.06rem;
      line-height: 1.35;
    }

    .assistant-recommendation p {
      margin: 0;
    }

    .assistant-meta {
      justify-content: flex-start;
      color: var(--text-soft);
      font-size: 0.78rem;
    }

    .assistant-meta span {
      padding: 5px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
    }

    .assistant-actions {
      justify-content: flex-start;
    }

    .assistant-actions .btn {
      min-height: 36px;
      padding: 8px 12px;
      font-size: 0.82rem;
    }

    .assistant-empty {
      padding: 22px;
      border: 1px dashed var(--line-strong);
      border-radius: 20px;
      background: var(--surface-soft);
    }

    .notification-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .notification-item {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--surface-soft);
    }

    .notification-item.is-read {
      opacity: .7;
    }

    .notification-dot {
      width: 9px;
      height: 9px;
      margin-top: 7px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 12%, transparent);
    }

    .notification-item.is-urgent .notification-dot {
      background: var(--danger);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 12%, transparent);
    }

    .notification-copy p {
      margin: 5px 0 0;
    }

    .notification-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .assistant-chat-card {
      align-self: start;
      height: fit-content;
      min-height: 0;
      background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--success) 18%, transparent), transparent 38%),
        var(--surface-solid);
    }

    .assistant-chat-messages {
      display: grid;
      gap: 10px;
      min-height: 72px;
      max-height: 220px;
      margin-top: 18px;
      padding: 14px;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
    }

    .assistant-chat-bubble {
      width: fit-content;
      max-width: 88%;
      padding: 12px 15px;
      border-radius: 16px 16px 16px 4px;
      background: var(--surface-solid);
      line-height: 1.55;
      white-space: pre-wrap;
    }

    .assistant-chat-bubble.is-user {
      justify-self: end;
      border-radius: 16px 16px 4px 16px;
      color: #10241a;
      background: var(--mint);
    }

    .assistant-chat-composer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 10px;
      margin-top: 12px;
    }

    .assistant-chat-composer .textarea {
      height: 64px;
      min-height: 64px;
    }

    .assistant-chat-shortcuts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .assistant-chat-shortcut {
      padding: 8px 11px;
      border: 1px solid color-mix(in srgb, var(--success) 42%, var(--line));
      border-radius: 999px;
      color: var(--text-soft);
      background: color-mix(in srgb, var(--success) 8%, transparent);
      font: inherit;
      font-size: .78rem;
      font-weight: 800;
      cursor: pointer;
    }

    .assistant-chat-shortcut:hover,
    .assistant-chat-shortcut:focus-visible {
      color: var(--text);
      border-color: var(--success);
      background: color-mix(in srgb, var(--success) 15%, transparent);
    }

    .professional-plan-grid,
    .document-hub-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
      gap: 18px;
      margin-bottom: 18px;
    }

    .professional-goal-card {
      grid-row: span 2;
    }

    .weekly-review {
      margin-top: 18px;
      padding: 20px;
      border-radius: 20px;
      background: var(--surface-soft);
    }

    .weekly-review p {
      margin-bottom: 0;
    }

    .assistant-action-create {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 160px 150px 110px auto;
      gap: 10px;
      margin: 18px 0;
      padding: 14px;
      border-radius: 18px;
      background: var(--surface-soft);
    }

    .assistant-action-create[hidden] {
      display: none;
    }

    .assistant-memory-create {
      display: grid;
      grid-template-columns: 190px minmax(240px, 1fr) 160px auto;
      gap: 10px;
      margin-top: 18px;
    }

    .assistant-memory-create .textarea {
      grid-column: 1 / -1;
      min-height: 86px;
    }

    .assistant-memory-create [data-assistant-memory-cancel] {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .action-calendar-card {
      margin-bottom: 18px;
    }

    .career-journal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .professional-action-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .professional-action-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface-soft);
    }

    .professional-action-item.is-completed {
      opacity: .66;
    }

    .professional-action-item.is-completed strong {
      text-decoration: line-through;
    }

    .document-hub-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .document-hub-card {
      min-height: 280px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(155deg, var(--surface-solid), var(--surface-soft));
    }

    .document-hub-card.is-featured {
      background: linear-gradient(145deg, color-mix(in srgb, var(--success) 22%, var(--surface-solid)), var(--surface-solid));
    }

    .document-hub-card.is-coming-soon {
      position: relative;
      border-style: dashed;
      background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
    }

    .document-coming-soon {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      margin-top: 18px;
      padding: 0 12px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: var(--text-soft);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .document-hub-kicker {
      display: inline-block;
      margin-bottom: 42px;
      color: var(--success);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .assistant-preference-options,
    .assistant-settings-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
    }

    .assistant-preference-options label,
    .assistant-settings-row label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-soft);
    }

    .assistant-settings-row {
      margin: 18px 0;
    }

    .job-overview-card,
    .job-discovery-card {
      margin-bottom: 18px;
      background:
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--mint) 16%, transparent), transparent 34%),
        var(--surface-solid);
    }

    .notification-center-card + .job-overview-card {
      margin-top: 18px;
    }

    .job-opportunity-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .job-opportunity-list.is-compact {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .job-opportunity-card {
      display: grid;
      gap: 14px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
    }

    .job-opportunity-list:not(.is-compact) .job-opportunity-card {
      grid-template-columns: auto minmax(0, 1fr) minmax(220px, .6fr);
      align-items: start;
    }

    .job-match-score {
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      border: 1px solid color-mix(in srgb, var(--success) 36%, var(--line));
      border-radius: 22px;
      background: color-mix(in srgb, var(--success) 12%, var(--surface-solid));
    }

    .job-match-score strong {
      font-size: 1.28rem;
    }

    .job-match-score small {
      color: var(--text-soft);
      font-size: .66rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .job-opportunity-copy h4 {
      margin: 0 0 5px;
      font-size: 1.08rem;
    }

    .job-opportunity-copy p {
      margin: 0;
    }

    .job-opportunity-meta,
    .job-card-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .job-opportunity-meta {
      margin-top: 10px;
      color: var(--text-soft);
      font-size: .78rem;
    }

    .job-opportunity-meta span {
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
    }

    .job-match-details {
      display: grid;
      gap: 8px;
      padding: 14px;
      border-radius: 16px;
      background: var(--surface-solid);
      font-size: .82rem;
    }

    .job-match-details ul {
      margin: 0;
      padding-left: 18px;
      color: var(--text-soft);
    }

    .job-search-settings {
      margin-top: 18px;
      padding: 0 18px 18px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--surface-soft);
    }

    .job-search-settings summary {
      padding: 16px 0;
      cursor: pointer;
      font-weight: 900;
    }

    .job-search-form {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .job-search-context {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 18px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
      color: var(--text-soft);
      font-size: 0.86rem;
    }

    .job-search-context strong {
      color: var(--text);
    }

    .job-tabs {
      display: flex;
      gap: 8px;
      margin-top: 18px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface-soft);
    }

    .job-tab {
      flex: 1;
      min-height: 42px;
      padding: 9px 14px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--text-soft);
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .job-tab.is-active {
      background: var(--surface-solid);
      color: var(--text);
      box-shadow: 0 8px 22px rgba(16, 32, 25, 0.08);
    }

    .job-tab span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--success) 14%, transparent);
      color: var(--text);
      font-size: 0.72rem;
    }

    .application-kit-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(5, 14, 11, 0.76);
      backdrop-filter: blur(14px);
    }

    .application-kit-modal.is-open {
      display: grid;
    }

    .application-kit-shell {
      width: min(980px, calc(100vw - 32px));
      max-height: min(860px, calc(100vh - 32px));
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: var(--surface-solid);
      box-shadow: 0 30px 90px rgba(3, 12, 9, 0.35);
    }

    .application-kit-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 22px 24px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(120deg, color-mix(in srgb, var(--success) 16%, var(--surface-solid)), var(--surface-solid));
    }

    .application-kit-head h3,
    .application-kit-section h4 {
      margin: 0;
    }

    .application-kit-head p {
      margin: 7px 0 0;
    }

    .application-kit-layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      min-height: 520px;
      max-height: calc(100vh - 150px);
    }

    .application-kit-tabs {
      display: grid;
      align-content: start;
      gap: 7px;
      padding: 18px;
      overflow-y: auto;
      border-right: 1px solid var(--line);
      background: var(--surface-soft);
    }

    .application-kit-tab {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
      color: var(--text-soft);
      text-align: left;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .application-kit-tab.is-active {
      border-color: var(--line);
      background: var(--surface-solid);
      color: var(--text);
    }

    .application-kit-tab.is-locked::after {
      content: "Pro";
      float: right;
      color: var(--gold);
      font-size: .68rem;
      text-transform: uppercase;
    }

    .application-kit-main {
      padding: 24px;
      overflow-y: auto;
    }

    .application-kit-section {
      display: grid;
      gap: 16px;
    }

    .application-kit-block {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface-soft);
    }

    .application-kit-block p {
      margin: 7px 0 0;
      white-space: pre-wrap;
    }

    .application-kit-block ul {
      margin: 9px 0 0;
      padding-left: 20px;
      color: var(--text-soft);
    }

    .application-kit-copy {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }

    .application-checklist {
      display: grid;
      gap: 10px;
    }

    .application-check-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 11px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--surface-soft);
    }

    .application-check-item.is-complete {
      opacity: .68;
    }

    .application-check-item strong,
    .application-check-item span {
      display: block;
    }

    .application-check-item span {
      margin-top: 4px;
      color: var(--text-soft);
      font-size: .84rem;
    }

    @media (max-width: 720px) {
      .application-kit-modal { padding: 0; }
      .application-kit-shell { width: 100%; max-width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
      .application-kit-head { padding: 17px 18px; }
      .application-kit-layout { grid-template-columns: 1fr; max-height: calc(100vh - 96px); }
      .application-kit-tabs { display: flex; padding: 11px 14px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
      .application-kit-tab { width: auto; min-width: max-content; }
      .application-kit-main { padding: 18px; }
    }

    .job-feedback-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 12px;
    }

    .job-feedback-btn {
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: transparent;
      color: var(--text-soft);
      font: inherit;
      font-size: 0.75rem;
      font-weight: 800;
      cursor: pointer;
    }

    .job-feedback-btn.is-active {
      border-color: color-mix(in srgb, var(--success) 48%, var(--line));
      background: color-mix(in srgb, var(--success) 12%, transparent);
      color: var(--text);
    }

    .job-estimate-note {
      margin: 16px 0 0;
      color: var(--text-soft);
      font-size: .78rem;
      line-height: 1.55;
    }

    .field-grid {
      grid-template-columns: 1fr 1fr;
      margin-top: 16px;
    }

    .field-grid.minimal {
      gap: 14px 16px;
      margin-top: 0;
    }

    .field-grid.compact {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px 16px;
      margin-top: 0;
    }

    .field {
      display: grid;
      gap: 8px;
    }

    .editable-select-stack {
      display: grid;
      gap: 10px;
    }

    .field-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .field-help {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-soft);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      text-transform: none;
      letter-spacing: 0;
      cursor: help;
      transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
    }

    .field-help::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(6px);
      width: min(240px, 68vw);
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(10, 16, 13, 0.96);
      color: #f3fff7;
      font-size: 0.74rem;
      font-weight: 600;
      line-height: 1.45;
      text-transform: none;
      letter-spacing: 0;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      z-index: 30;
      transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .field-help:hover,
    .field-help:focus-visible {
      border-color: var(--line-strong);
      color: var(--text);
      background: rgba(255, 255, 255, 0.12);
      outline: none;
    }

    .field-help:hover::after,
    .field-help:focus-visible::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    body.theme-light .field-help {
      background: rgba(18, 30, 21, 0.05);
    }

    body.theme-light .field-help::after {
      background: rgba(255, 255, 255, 0.98);
      color: #173122;
      box-shadow: 0 18px 38px rgba(34, 68, 52, 0.16);
    }

    .editable-select-hint {
      margin: -2px 2px 0;
      font-size: 0.78rem;
      color: var(--text-soft);
    }

    .field.span-2 {
      grid-column: span 2;
    }

    .field.span-3 {
      grid-column: span 3;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field label {
      font-size: 0.78rem;
      font-weight: 800;
      color: var(--text-soft);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .input,
    .textarea,
    .select {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.04);
      border-radius: 14px;
      padding: 13px 14px;
      color: var(--text);
    }

    .textarea {
      min-height: 110px;
      resize: vertical;
    }

    .onboarding-shell {
      display: grid;
      gap: 18px;
    }

    .onboarding-tabs {
      position: sticky;
      top: 20px;
      z-index: 12;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(8, 14, 11, 0.82);
      border: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }

    .onboarding-tab {
      height: 40px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-soft);
      font-weight: 700;
      cursor: pointer;
    }

    .onboarding-tab.is-active {
      background: var(--surface-solid);
      color: var(--text);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .onboarding-panel {
      display: none;
    }

    .onboarding-panel.is-active {
      display: block;
    }

    .onboarding-panel .form-card + .form-card {
      margin-top: 18px;
    }

    .sync-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      margin: 14px 0 18px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(135deg, rgba(216, 233, 255, 0.34), rgba(223, 242, 229, 0.3));
    }

    .sync-bar strong {
      display: block;
      margin-bottom: 4px;
      letter-spacing: -0.03em;
    }

    .career-stack {
      display: grid;
      gap: 18px;
    }

    .work-card {
      padding: 18px;
      border-radius: 24px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.04);
    }

    .work-card-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }

    .work-card-head p {
      color: var(--text-soft);
      line-height: 1.6;
    }

    .work-card-head-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .work-card-remove {
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--text-soft);
      font: inherit;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .work-card-remove:hover,
    .work-card-remove:focus-visible {
      border-color: rgba(222, 82, 82, 0.42);
      background: rgba(222, 82, 82, 0.12);
      color: #e36a6a;
      outline: none;
      transform: translateY(-1px);
    }

    .career-add-row {
      display: flex;
      justify-content: flex-start;
      padding-top: 2px;
    }

    .period-range {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .gap-card {
      padding: 18px;
      border-radius: 22px;
      border: 1px dashed rgba(139, 103, 18, 0.35);
      background: rgba(255, 233, 175, 0.1);
    }

    .gap-card.is-hidden,
    .field.is-hidden {
      display: none;
    }

    .gap-card strong {
      display: block;
      margin-bottom: 6px;
    }

    .gap-list {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .gap-item {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(139, 103, 18, 0.18);
    }

    .gap-item strong {
      display: block;
      margin-bottom: 4px;
    }

    .sync-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 12px;
    }

    .summary-actions {
      justify-content: space-between;
    }

    .summary-actions-left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn.icon-only {
      width: 48px;
      min-width: 48px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
    }

    .form-card {
      border-radius: 28px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--line);
    }

    .form-card h3 {
      font-size: 1.45rem;
      margin-bottom: 6px;
      letter-spacing: -0.05em;
    }

    .form-card > p {
      color: var(--text-soft);
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .form-section + .form-section {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .form-section h4 {
      font-size: 1rem;
      margin-bottom: 14px;
      letter-spacing: -0.03em;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .tag {
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 0.82rem;
      font-weight: 700;
      background: #fff;
      border: 1px solid var(--line);
    }

    .asset-card {
      margin-top: 18px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.04);
    }

    .asset-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .asset-toolbar input[type="file"] {
      max-width: 100%;
    }

    .asset-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .asset-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--line);
    }

    .asset-item strong {
      display: block;
      margin-bottom: 4px;
    }

    .asset-item a {
      font-weight: 800;
      color: var(--text);
    }

    .projects-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .projects-shell {
      display: grid;
      gap: 18px;
    }

    .projects-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .projects-toolbar-group {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .search-input {
      min-width: min(320px, 100%);
    }

    .projects-table-card,
    .project-form-card,
    .project-modal-card {
      border-radius: 28px;
      padding: 22px;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .projects-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 10px;
    }

    .projects-table col.col-project { width: 25%; }
    .projects-table col.col-company { width: 18.75%; }
    .projects-table col.col-time { width: 16.66%; }
    .projects-table col.col-skills { width: 20.84%; }
    .projects-table col.col-status { width: 18.75%; }
    .projects-table col.col-actions { width: 110px; }

    .projects-table th {
      text-align: left;
      padding: 0 14px 8px;
      color: var(--text-soft);
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .projects-table td {
      padding: 0;
    }

    .project-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 110px;
      gap: 12px;
      align-items: stretch;
    }

    .project-row-button {
      width: 100%;
      display: grid;
      grid-template-columns: 1.2fr 0.9fr 0.8fr 1fr 0.9fr;
      gap: 12px;
      align-items: center;
      text-align: left;
      padding: 16px 14px;
      border: 1px solid rgba(20, 32, 24, 0.05);
      border-radius: 18px;
      background: var(--surface-soft);
      color: var(--text);
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .project-row-button:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
      background: rgba(255, 255, 255, 0.72);
    }

    .project-row-title strong {
      display: block;
      margin-bottom: 4px;
    }

    .project-row-title span,
    .project-row-cell {
      color: var(--text-soft);
      font-size: 0.94rem;
    }

    .skills-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .taxonomy-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
      min-height: 20px;
    }

    .taxonomy-suggestion {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      border-radius: 999px;
      padding: 9px 14px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
    }

    .taxonomy-suggestion:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
      background: rgba(255, 255, 255, 0.11);
    }

    .taxonomy-suggestion.is-active {
      background: rgba(109, 221, 172, 0.22);
      border-color: rgba(109, 221, 172, 0.5);
      color: #cffff0;
      box-shadow: 0 0 0 1px rgba(109, 221, 172, 0.08) inset;
    }

    .taxonomy-suggestion.is-empty {
      cursor: default;
      font-weight: 600;
      color: var(--text-soft);
      background: rgba(255, 255, 255, 0.03);
    }

    body.theme-light .taxonomy-suggestion {
      background: rgba(18, 30, 21, 0.05);
    }

    body.theme-light .taxonomy-suggestion.is-active {
      color: #195637;
      background: rgba(109, 221, 172, 0.2);
    }

    .project-row-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 110px;
    }

    .project-action-btn {
      width: 46px;
      min-width: 46px;
      height: 100%;
      border: 1px solid rgba(20, 32, 24, 0.05);
      border-radius: 18px;
      background: var(--surface-soft);
      color: var(--text);
      cursor: pointer;
      font-size: 1rem;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
    }

    .project-action-btn:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
      background: rgba(255, 255, 255, 0.72);
    }

    .project-action-btn.delete {
      color: var(--danger);
    }

    .project-form-card {
      width: min(760px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
    }

    .project-modal {
      position: fixed;
      inset: 0;
      padding: 24px;
      background: rgba(9, 16, 13, 0.52);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: var(--layer-modal);
    }

    .project-modal.is-open {
      display: flex;
    }

    .project-form-modal {
      position: fixed;
      inset: 0;
      padding: 24px;
      background: rgba(9, 16, 13, 0.52);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: var(--layer-modal);
    }

    .project-form-modal.is-open {
      display: flex;
    }

    .project-modal-card {
      width: min(760px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
    }

    .modal-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }

    .modal-close {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 999px;
      background: rgba(20, 32, 24, 0.08);
      color: var(--text);
      cursor: pointer;
      font-size: 1.2rem;
    }

    .project-detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 16px;
    }

    .project-detail-block {
      padding: 16px;
      border-radius: 18px;
      background: var(--surface-soft);
      border: 1px solid rgba(20, 32, 24, 0.05);
    }

    .project-detail-block strong {
      display: block;
      margin-bottom: 6px;
    }

    .config-list {
      display: grid;
      gap: 14px;
    }

    .config-item {
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.88);
      background: var(--surface);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    .config-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 20px 22px;
      border: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }

    .config-toggle strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1.05rem;
    }

    .config-toggle span {
      color: var(--text-soft);
    }

    .config-chevron {
      flex-shrink: 0;
      color: var(--text-soft);
      font-size: 1.2rem;
      transition: transform 180ms ease;
    }

    .config-item.is-open .config-chevron {
      transform: rotate(180deg);
    }

    .config-content {
      display: none;
      padding: 0 22px 22px;
      border-top: 1px solid var(--line);
    }

    .config-item.is-open .config-content {
      display: block;
    }

    .portfolio-builder {
      display: grid;
      gap: 18px;
    }

    .portfolio-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .portfolio-library {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .portfolio-template-card,
    .portfolio-create-card,
    .portfolio-option-card {
      border-radius: 28px;
      padding: 22px;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .portfolio-template-cover {
      height: 170px;
      border-radius: 22px;
      margin-bottom: 16px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)),
        linear-gradient(135deg, #d8e9ff, #e8f4eb 48%, #ffe9af);
      position: relative;
      overflow: hidden;
    }

    .portfolio-template-cover::after {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.42);
      backdrop-filter: blur(10px);
    }

    .template-preview-window {
      position: absolute;
      inset: 18px;
      border-radius: 18px;
      background: #e9ece9;
      overflow: hidden;
      z-index: 1;
      padding: 0;
    }

    .template-preview-track {
      animation: template-scroll 12s linear infinite;
      will-change: transform;
    }

    .template-preview-window.resume .template-preview-track {
      animation-duration: 10s;
    }

    .template-preview-window.portfolio .template-preview-track {
      animation-duration: 14s;
    }

    .template-artboard {
      --art-ink: #18231e;
      --art-muted: #66736c;
      --art-paper: #fbfcf8;
      --art-accent: #32634d;
      width: 100%;
      min-height: 720px;
      padding: 34px;
      color: var(--art-ink);
      background: var(--art-paper);
      font-family: "Manrope", sans-serif;
      position: relative;
      overflow: hidden;
      min-width: 0;
    }

    .template-artboard * { box-sizing: border-box; }
    .template-artboard > *,
    .art-hero > *,
    .art-content > *,
    .art-project-grid > * { min-width: 0; }
    .template-artboard h4,
    .template-artboard p { margin: 0; }
    .template-artboard h4,
    .template-artboard h5,
    .template-artboard p,
    .art-section-label,
    .art-footer strong { overflow-wrap: anywhere; }
    .art-nav,
    .art-hero,
    .art-metrics,
    .art-content,
    .art-footer { position: relative; z-index: 1; }
    .art-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 44px; }
    .art-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--art-accent); color: #fff; font-size: 11px; font-weight: 800; }
    .art-nav-links { display: flex; gap: 14px; color: var(--art-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
    .art-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-bottom: 30px; border-bottom: 1px solid color-mix(in srgb, var(--art-ink) 14%, transparent); }
    .art-eyebrow { color: var(--art-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
    .art-hero h4 { max-width: 560px; font-size: clamp(28px, 5vw, 54px); line-height: .98; letter-spacing: -.055em; }
    .art-hero p { max-width: 540px; margin-top: 18px; color: var(--art-muted); font-size: 13px; line-height: 1.65; }
    .art-avatar { width: 92px; height: 112px; border-radius: 46px 46px 18px 18px; display: grid; place-items: center; color: #fff; background: var(--art-accent); font-family: Georgia, serif; font-size: 27px; }
    .art-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
    .art-chip { border: 1px solid color-mix(in srgb, var(--art-ink) 18%, transparent); border-radius: 999px; padding: 6px 10px; font-size: 9px; }
    .art-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 24px 0; background: color-mix(in srgb, var(--art-ink) 12%, transparent); }
    .art-metric { min-height: 72px; padding: 15px; background: var(--art-paper); }
    .art-metric strong { display: block; font-size: 22px; line-height: 1; color: var(--art-accent); }
    .art-metric span { display: block; margin-top: 7px; color: var(--art-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
    .art-content { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 26px; }
    .art-section { min-height: 145px; padding: 22px; border: 1px solid color-mix(in srgb, var(--art-ink) 12%, transparent); border-radius: 18px; }
    .art-section-label { display: block; margin-bottom: 19px; color: var(--art-accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
    .art-section h5 { margin: 0 0 10px; font-size: 16px; line-height: 1.15; }
    .art-section p { color: var(--art-muted); font-size: 10px; line-height: 1.55; }
    .art-bars { display: grid; gap: 8px; margin-top: 18px; }
    .art-bar { height: 6px; border-radius: 9px; background: color-mix(in srgb, var(--art-accent) 15%, transparent); overflow: hidden; }
    .art-bar::after { content: ""; display: block; width: 72%; height: 100%; background: var(--art-accent); }
    .art-bar:nth-child(2)::after { width: 88%; }
    .art-bar:nth-child(3)::after { width: 57%; }
    .art-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .art-project { min-height: 92px; padding: 15px; border-radius: 13px; background: color-mix(in srgb, var(--art-accent) 10%, var(--art-paper)); }
    .art-project b { display: block; margin-bottom: 7px; font-size: 11px; }
    .art-project span { color: var(--art-muted); font-size: 9px; line-height: 1.4; }
    .art-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 25px; padding: 19px 22px; color: #fff; background: var(--art-accent); border-radius: 16px; }
    .art-footer strong { max-width: 72%; font-size: 14px; }
    .art-footer span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }

    .template-preview-window.is-card .template-artboard { min-height: 820px; padding: 22px; }
    .template-preview-window.is-card .art-nav { margin-bottom: 24px; }
    .template-preview-window.is-card .art-nav-links { display: none; }
    .template-preview-window.is-card .art-mark { width: 24px; height: 24px; border-radius: 7px; font-size: 8px; }
    .template-preview-window.is-card .art-hero { gap: 10px; padding-bottom: 18px; }
    .template-preview-window.is-card .art-hero h4 { font-size: 24px; }
    .template-preview-window.is-card .art-hero p { font-size: 7px; margin-top: 9px; }
    .template-preview-window.is-card .art-eyebrow { font-size: 6px; margin-bottom: 7px; }
    .template-preview-window.is-card .art-avatar { width: 45px; height: 54px; font-size: 13px; }
    .template-preview-window.is-card .art-chip { padding: 3px 6px; font-size: 5px; }
    .template-preview-window.is-card .art-metrics { margin: 13px 0; }
    .template-preview-window.is-card .art-metric { min-height: 46px; padding: 9px; }
    .template-preview-window.is-card .art-metric strong { font-size: 13px; }
    .template-preview-window.is-card .art-metric span { font-size: 5px; }
    .template-preview-window.is-card .art-content { gap: 10px; }
    .template-preview-window.is-card .art-section { min-height: 105px; padding: 12px; border-radius: 10px; }
    .template-preview-window.is-card .art-section-label { margin-bottom: 9px; font-size: 5px; }
    .template-preview-window.is-card .art-section h5 { font-size: 9px; }
    .template-preview-window.is-card .art-section p,
    .template-preview-window.is-card .art-project span { font-size: 5px; }
    .template-preview-window.is-card .art-project { min-height: 58px; padding: 8px; }
    .template-preview-window.is-card .art-project b { font-size: 7px; }
    .template-preview-window.is-card .art-footer { margin-top: 12px; padding: 10px; }
    .template-preview-window.is-card .art-footer strong { font-size: 8px; }
    .template-preview-window.is-card .art-footer span { font-size: 5px; }

    /* Curriculos sao documentos profissionais, nao paginas de portfolio. */
    .template-artboard.resume-document {
      --resume-accent: #285741;
      min-height: 1040px;
      padding: 48px 52px;
      overflow: visible;
      color: #18231e;
      background: #fff;
      font-family: "Manrope", sans-serif;
    }
    .resume-document .resume-header { padding-bottom: 22px; border-bottom: 2px solid var(--resume-accent); }
    .resume-document .resume-name { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -.025em; }
    .resume-document .resume-role { margin-top: 7px; color: var(--resume-accent); font-size: 13px; font-weight: 800; }
    .resume-document .resume-contact { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 13px; color: #4f5d56; font-size: 9px; line-height: 1.45; }
    .resume-document .resume-contact span { overflow-wrap: anywhere; }
    .resume-document .resume-contact span + span::before { content: "|"; margin-right: 13px; color: #a7b0ab; }
    .resume-document .resume-body { display: grid; gap: 22px; margin-top: 24px; }
    .resume-document .resume-section { break-inside: avoid; }
    .resume-document .resume-section-title { margin: 0 0 10px; color: var(--resume-accent); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
    .resume-document .resume-summary { color: #34423b; font-size: 10px; line-height: 1.65; }
    .resume-document .resume-list { display: grid; gap: 5px; margin: 0; padding-left: 16px; color: #34423b; font-size: 9px; line-height: 1.55; }
    .resume-document .resume-experiences { display: grid; gap: 17px; }
    .resume-document .resume-entry { break-inside: avoid; }
    .resume-document .resume-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
    .resume-document .resume-entry h5 { margin: 0; font-size: 11px; line-height: 1.35; }
    .resume-document .resume-entry-period { flex: 0 0 auto; color: #657169; font-size: 8px; }
    .resume-document .resume-entry-company { display: block; margin: 3px 0 7px; color: #536159; font-size: 9px; }
    .resume-document .resume-inline-list { color: #34423b; font-size: 9px; line-height: 1.6; }
    .resume-document .resume-education-list { display: grid; gap: 7px; color: #34423b; font-size: 9px; line-height: 1.5; }
    .resume-document .resume-projects { display: grid; gap: 9px; }
    .resume-document .resume-project { font-size: 9px; line-height: 1.5; }
    .resume-document .resume-project strong { display: block; color: #18231e; }
    .resume-document .resume-missing { padding: 9px 11px; border: 1px dashed #b9c4bd; color: #718078; font-size: 8px; line-height: 1.45; }
    .resume-document.layout-boardroom-signal,
    .resume-document.layout-technical-depth,
    .resume-document.layout-founder-one-page { --art-paper: #fff; --art-ink: #18231e; --art-muted: #66736c; color: #18231e; background: #fff; font-family: "Manrope", sans-serif; }
    .resume-document.layout-minimal-recruiter { --resume-accent: #111; }
    .resume-document.layout-boardroom-signal { --resume-accent: #8a651f; }
    .resume-document.layout-technical-depth { --resume-accent: #11613f; }
    .resume-document.layout-growth-operator { --resume-accent: #b94722; }
    .resume-document.layout-creative-column { --resume-accent: #6d2c91; }
    .resume-document.layout-career-shifter { --resume-accent: #3156b8; }
    .resume-document.layout-founder-one-page { --resume-accent: #56513d; }
    .resume-document::before,
    .resume-document::after { display: none !important; content: none !important; }
    .template-preview-window.is-card .resume-document { min-height: 900px; padding: 25px 27px; }
    .template-preview-window.is-card .resume-document .resume-name { font-size: 17px; }
    .template-preview-window.is-card .resume-document .resume-role { margin-top: 4px; font-size: 7px; }
    .template-preview-window.is-card .resume-document .resume-contact { gap: 3px 7px; margin-top: 7px; font-size: 5px; }
    .template-preview-window.is-card .resume-document .resume-contact span + span::before { margin-right: 7px; }
    .template-preview-window.is-card .resume-document .resume-header { padding-bottom: 12px; }
    .template-preview-window.is-card .resume-document .resume-body { gap: 12px; margin-top: 13px; }
    .template-preview-window.is-card .resume-document .resume-section-title { margin-bottom: 6px; font-size: 6px; }
    .template-preview-window.is-card .resume-document .resume-summary,
    .template-preview-window.is-card .resume-document .resume-list,
    .template-preview-window.is-card .resume-document .resume-inline-list,
    .template-preview-window.is-card .resume-document .resume-education-list,
    .template-preview-window.is-card .resume-document .resume-project,
    .template-preview-window.is-card .resume-document .resume-entry-company { font-size: 5px; }
    .template-preview-window.is-card .resume-document .resume-experiences { gap: 9px; }
    .template-preview-window.is-card .resume-document .resume-entry h5 { font-size: 6px; }
    .template-preview-window.is-card .resume-document .resume-entry-period,
    .template-preview-window.is-card .resume-document .resume-missing { font-size: 4px; }

    /* Resume directions */
    .layout-executive-clean { --art-paper: #f7f5ef; --art-accent: #285741; }
    .layout-portfolio-hybrid { --art-paper: #fff7f3; --art-accent: #d45f4c; }
    .layout-portfolio-hybrid .art-hero { grid-template-columns: .75fr 1.25fr; }
    .layout-portfolio-hybrid .art-avatar { grid-column: 1; grid-row: 1; width: 100%; border-radius: 2px 80px 2px 2px; }
    .layout-minimal-recruiter { --art-paper: #fff; --art-accent: #111; }
    .layout-minimal-recruiter .art-nav,
    .layout-minimal-recruiter .art-avatar { display: none; }
    .layout-minimal-recruiter .art-hero h4 { font-size: 40px; }
    .layout-minimal-recruiter .art-section { border-width: 0 0 1px; border-radius: 0; padding-left: 0; }
    .layout-boardroom-signal { --art-paper: #10273b; --art-ink: #f6f1e8; --art-muted: #a9bbc6; --art-accent: #d1a85c; }
    .layout-boardroom-signal::before { content: ""; position: absolute; inset: 0 68% 0 0; background: #0a1b2a; }
    .layout-boardroom-signal .art-content { grid-template-columns: .72fr 1.28fr; }
    .layout-boardroom-signal .art-section:first-child { grid-column: 2; }
    .layout-technical-depth { --art-paper: #101616; --art-ink: #e5fff1; --art-muted: #8fa69b; --art-accent: #55e59a; font-family: Consolas, monospace; }
    .layout-technical-depth .art-section,
    .layout-technical-depth .art-footer { border-radius: 4px; }
    .layout-technical-depth .art-section-label::before { content: "// "; }
    .layout-growth-operator { --art-paper: #fff5bc; --art-accent: #ff4f24; }
    .layout-growth-operator .art-hero h4 { text-transform: uppercase; }
    .layout-growth-operator .art-metric { border: 2px solid var(--art-ink); }
    .layout-growth-operator .art-section { border: 2px solid var(--art-ink); border-radius: 0; box-shadow: 6px 6px 0 var(--art-ink); }
    .layout-creative-column { --art-paper: #f4d8ee; --art-accent: #6d2c91; }
    .layout-creative-column::before { content: "PORTFOLIO / CV"; position: absolute; right: -18px; top: 250px; font-size: 72px; font-weight: 900; color: rgba(109,44,145,.08); transform: rotate(90deg); }
    .layout-creative-column .art-hero { grid-template-columns: 1.4fr .6fr; }
    .layout-creative-column .art-avatar { border-radius: 50%; }
    .layout-consulting-matrix { --art-paper: #eef4ec; --art-accent: #174f41; }
    .layout-consulting-matrix .art-content { grid-template-columns: repeat(2, 1fr); }
    .layout-consulting-matrix .art-section { border-radius: 0; }
    .layout-consulting-matrix .art-metrics { border: 1px solid var(--art-accent); }
    .layout-career-shifter { --art-paper: #eef4ff; --art-accent: #3156d8; }
    .layout-career-shifter::after { content: ""; position: absolute; width: 320px; height: 320px; right: -160px; top: 70px; border: 48px solid rgba(49,86,216,.12); border-radius: 50%; }
    .layout-career-shifter .art-section:first-child { transform: translateY(18px); }
    .layout-founder-one-page { --art-paper: #111; --art-ink: #f4efdf; --art-muted: #a9a494; --art-accent: #d6ff58; }
    .layout-founder-one-page .art-nav-links { color: var(--art-ink); }
    .layout-founder-one-page .art-hero h4 { font-family: Georgia, serif; font-weight: 400; }
    .layout-founder-one-page .art-section { border: 0; padding-left: 0; }

    /* Distinct professional resume systems */
    .resume-document .resume-decoration { display: none; pointer-events: none; }
    .resume-document .resume-body-split { display: grid; grid-template-columns: minmax(150px, .68fr) minmax(0, 1.32fr); gap: 30px; align-items: start; }
    .resume-document .resume-sidebar,
    .resume-document .resume-main { display: grid; gap: 21px; min-width: 0; }
    .resume-document .resume-competency-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .resume-document.layout-executive-clean { border-top: 11px solid #285741; }
    .resume-document.layout-executive-clean .resume-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr); align-items: end; gap: 26px; }
    .resume-document.layout-executive-clean .resume-role { font-family: Georgia, serif; font-size: 15px; font-weight: 400; }
    .resume-document.layout-executive-clean .resume-contact { justify-content: flex-end; text-align: right; }
    .resume-document.layout-executive-clean .resume-objective-section { padding: 14px 16px; border-left: 4px solid var(--resume-accent); background: #f1f6f3; }
    .resume-document.layout-executive-clean .resume-entry { padding-left: 17px; border-left: 2px solid #c9d9d0; }

    .resume-document.layout-portfolio-hybrid { --resume-accent: #c95543; padding-left: 0; }
    .resume-document.layout-portfolio-hybrid .resume-header { margin-left: 52px; }
    .resume-document.layout-portfolio-hybrid .resume-body-split { gap: 0; margin-top: 24px; }
    .resume-document.layout-portfolio-hybrid .resume-sidebar { align-self: stretch; padding: 26px 24px; color: #fff; background: #c95543; }
    .resume-document.layout-portfolio-hybrid .resume-sidebar .resume-section-title,
    .resume-document.layout-portfolio-hybrid .resume-sidebar .resume-summary,
    .resume-document.layout-portfolio-hybrid .resume-sidebar .resume-list,
    .resume-document.layout-portfolio-hybrid .resume-sidebar .resume-inline-list { color: #fff; }
    .resume-document.layout-portfolio-hybrid .resume-sidebar .resume-section-title { padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.45); }
    .resume-document.layout-portfolio-hybrid .resume-main { padding: 3px 0 0 30px; }
    .resume-document.layout-portfolio-hybrid .resume-project { padding: 11px 13px; background: #fff3ef; border-left: 3px solid #c95543; }

    .resume-document.layout-minimal-recruiter { --resume-accent: #111; padding: 52px 58px; }
    .resume-document.layout-minimal-recruiter .resume-header { border-bottom: 1px solid #111; }
    .resume-document.layout-minimal-recruiter .resume-name { font-size: 27px; font-weight: 700; letter-spacing: -.015em; }
    .resume-document.layout-minimal-recruiter .resume-role { color: #222; font-weight: 600; }
    .resume-document.layout-minimal-recruiter .resume-body { gap: 18px; }
    .resume-document.layout-minimal-recruiter .resume-section-title { color: #111; font-size: 9px; letter-spacing: .16em; }
    .resume-document.layout-minimal-recruiter .resume-entry-period { color: #333; }

    .resume-document.layout-boardroom-signal { --resume-accent: #b88a38; padding-top: 0; }
    .resume-document.layout-boardroom-signal .resume-header { margin: 0 -52px; padding: 42px 52px 30px; color: #fff; border: 0; background: #10273b; }
    .resume-document.layout-boardroom-signal .resume-name { font-family: Georgia, serif; font-size: 34px; font-weight: 400; }
    .resume-document.layout-boardroom-signal .resume-role { color: #e3bd73; }
    .resume-document.layout-boardroom-signal .resume-contact { color: #c5d1d8; }
    .resume-document.layout-boardroom-signal .resume-contact span + span::before { color: #718693; }
    .resume-document.layout-boardroom-signal .resume-section-title { display: flex; align-items: center; gap: 10px; color: #8a651f; }
    .resume-document.layout-boardroom-signal .resume-section-title::after { content: ""; flex: 1; height: 1px; background: #d7c49f; }
    .resume-document.layout-boardroom-signal .resume-entry { position: relative; padding-left: 18px; }
    .resume-document.layout-boardroom-signal .resume-entry::before { content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #b88a38; }

    .resume-document.layout-technical-depth { --resume-accent: #11704a; padding-left: 66px; background: #f7faf8; }
    .resume-document.layout-technical-depth .resume-decoration { display: grid; position: absolute; inset: 0 auto 0 0; width: 22px; grid-template-rows: 1.5fr 1fr .7fr; }
    .resume-document.layout-technical-depth .resume-decoration span:nth-child(1) { background: #11704a; }
    .resume-document.layout-technical-depth .resume-decoration span:nth-child(2) { background: #72c49f; }
    .resume-document.layout-technical-depth .resume-decoration span:nth-child(3) { background: #d5eee2; }
    .resume-document.layout-technical-depth .resume-header { border-bottom-style: dashed; }
    .resume-document.layout-technical-depth .resume-role,
    .resume-document.layout-technical-depth .resume-section-title,
    .resume-document.layout-technical-depth .resume-entry-period { font-family: Consolas, monospace; }
    .resume-document.layout-technical-depth .resume-section-title::before { content: "// "; }
    .resume-document.layout-technical-depth .resume-tools-section { padding: 15px; border: 1px solid #98b9a8; background: #eef7f2; }
    .resume-document.layout-technical-depth .resume-entry { padding: 12px 14px; border: 1px solid #d2e1d8; background: #fff; }

    .resume-document.layout-growth-operator { --resume-accent: #d94f28; background: #fffdf2; }
    .resume-document.layout-growth-operator .resume-header { position: relative; margin: -48px -52px 0; padding: 38px 52px 28px; border: 0; background: #f5d94f; }
    .resume-document.layout-growth-operator .resume-header::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28%; height: 8px; background: #d94f28; }
    .resume-document.layout-growth-operator .resume-name { font-size: 36px; font-weight: 900; text-transform: uppercase; }
    .resume-document.layout-growth-operator .resume-role { display: inline-block; width: fit-content; padding: 5px 9px; color: #fff; background: #d94f28; }
    .resume-document.layout-growth-operator .resume-objective-section,
    .resume-document.layout-growth-operator .resume-strengths-section { padding: 15px 17px; border: 2px solid #20231f; box-shadow: 4px 4px 0 #20231f; background: #fff; }
    .resume-document.layout-growth-operator .resume-entry h5 { text-transform: uppercase; }

    .resume-document.layout-creative-column { --resume-accent: #7c2c78; padding-right: 35px; overflow: hidden; background: #fff9fc; }
    .resume-document.layout-creative-column .resume-decoration { display: block; position: absolute; right: -48px; top: 65px; width: 155px; height: 155px; border: 28px solid rgba(124,44,120,.12); border-radius: 50%; }
    .resume-document.layout-creative-column .resume-header { position: relative; padding-left: 23px; border: 0; }
    .resume-document.layout-creative-column .resume-header::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(#7c2c78, #e790b5); }
    .resume-document.layout-creative-column .resume-name { font-family: Georgia, serif; font-size: 38px; font-weight: 400; }
    .resume-document.layout-creative-column .resume-body-split { grid-template-columns: minmax(145px, .62fr) minmax(0, 1.38fr); }
    .resume-document.layout-creative-column .resume-sidebar { padding: 20px; border-radius: 28px 28px 4px 28px; background: #f0d9e9; }
    .resume-document.layout-creative-column .resume-section-title { color: #7c2c78; font-family: Georgia, serif; font-size: 11px; letter-spacing: .04em; text-transform: none; }
    .resume-document.layout-creative-column .resume-project { padding-bottom: 8px; border-bottom: 1px solid #d8a7c8; }

    .resume-document.layout-consulting-matrix { --resume-accent: #174f41; }
    .resume-document.layout-consulting-matrix .resume-header { padding: 24px; color: #fff; border: 0; background: #174f41; }
    .resume-document.layout-consulting-matrix .resume-role,
    .resume-document.layout-consulting-matrix .resume-contact { color: #d7eee5; }
    .resume-document.layout-consulting-matrix .resume-competency-matrix { padding: 12px; border: 1px solid #9ab8ad; background: #edf5f1; }
    .resume-document.layout-consulting-matrix .resume-competency-matrix .resume-section { padding: 12px; border: 1px solid #c8d9d2; background: #fff; }
    .resume-document.layout-consulting-matrix .resume-experience-section { padding-top: 5px; border-top: 3px solid #174f41; }
    .resume-document.layout-consulting-matrix .resume-entry { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 0 18px; padding: 10px 0; border-bottom: 1px solid #d8e3de; }
    .resume-document.layout-consulting-matrix .resume-entry .resume-list { grid-column: 2; }

    .resume-document.layout-career-shifter { --resume-accent: #3156b8; background: linear-gradient(135deg, #f5f8ff 0 165px, #fff 165px); }
    .resume-document.layout-career-shifter .resume-decoration { display: flex; position: absolute; top: 28px; right: 38px; gap: 7px; }
    .resume-document.layout-career-shifter .resume-decoration span { width: 28px; height: 7px; background: #3156b8; transform: skewX(-35deg); }
    .resume-document.layout-career-shifter .resume-decoration span:nth-child(2) { opacity: .55; }
    .resume-document.layout-career-shifter .resume-decoration span:nth-child(3) { opacity: .2; }
    .resume-document.layout-career-shifter .resume-objective-section { position: relative; padding: 17px 18px 17px 48px; border: 1px solid #b9c8ee; border-radius: 12px; background: #edf2ff; }
    .resume-document.layout-career-shifter .resume-objective-section::before { content: "→"; position: absolute; left: 18px; top: 13px; color: #3156b8; font-size: 23px; font-weight: 900; }
    .resume-document.layout-career-shifter .resume-strengths-section .resume-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
    .resume-document.layout-career-shifter .resume-entry { padding: 13px 15px; border-radius: 10px; background: #f6f8fc; }

    .resume-document.layout-founder-one-page { --resume-accent: #7b6230; padding-top: 0; }
    .resume-document.layout-founder-one-page .resume-header { margin: 0 -52px; padding: 40px 52px 30px; color: #f7f2e6; border: 0; background: #171713; }
    .resume-document.layout-founder-one-page .resume-name { font-family: Georgia, serif; font-size: 39px; font-weight: 400; }
    .resume-document.layout-founder-one-page .resume-role { color: #d4b876; font-family: Georgia, serif; font-weight: 400; }
    .resume-document.layout-founder-one-page .resume-contact { color: #c8c1ad; }
    .resume-document.layout-founder-one-page .resume-summary-section { padding: 18px 20px; border-left: 1px solid #7b6230; background: #faf7ef; }
    .resume-document.layout-founder-one-page .resume-section-title { color: #6e5527; font-family: Georgia, serif; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
    .resume-document.layout-founder-one-page .resume-project strong { font-family: Georgia, serif; font-size: 11px; }

    .template-preview-window.is-card .resume-document.layout-boardroom-signal .resume-header,
    .template-preview-window.is-card .resume-document.layout-founder-one-page .resume-header { margin: 0 -25px; padding: 23px 25px 17px; }
    .template-preview-window.is-card .resume-document.layout-growth-operator .resume-header { margin: -25px -25px 0; padding: 22px 25px 16px; }
    .template-preview-window.is-card .resume-document.layout-portfolio-hybrid .resume-header { margin-left: 25px; }
    .template-preview-window.is-card .resume-document.layout-portfolio-hybrid .resume-sidebar { padding: 14px 12px; }
    .template-preview-window.is-card .resume-document.layout-portfolio-hybrid .resume-main { padding-left: 15px; }
    .template-preview-window.is-card .resume-document.layout-growth-operator .resume-name,
    .template-preview-window.is-card .resume-document.layout-creative-column .resume-name,
    .template-preview-window.is-card .resume-document.layout-founder-one-page .resume-name { font-size: 19px; }
    .template-preview-window.is-card .resume-document.layout-technical-depth { padding-left: 35px; }

    @media (max-width: 700px) {
      .resume-document .resume-body-split,
      .resume-document .resume-competency-matrix { grid-template-columns: minmax(0, 1fr); gap: 18px; }
      .resume-document.layout-portfolio-hybrid .resume-body-split,
      .resume-document.layout-creative-column .resume-body-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
      .resume-document.layout-executive-clean .resume-header { grid-template-columns: minmax(0, 1fr); }
      .resume-document.layout-executive-clean .resume-contact { justify-content: flex-start; text-align: left; }
      .resume-document.layout-portfolio-hybrid { padding-left: 20px; }
      .resume-document.layout-portfolio-hybrid .resume-header { margin-left: 0; }
      .resume-document.layout-portfolio-hybrid .resume-sidebar,
      .resume-document.layout-portfolio-hybrid .resume-main { padding: 18px; }
      .resume-document.layout-consulting-matrix .resume-entry { grid-template-columns: minmax(0, 1fr); }
      .resume-document.layout-consulting-matrix .resume-entry .resume-list { grid-column: auto; }
      .template-studio-mini .resume-document.layout-boardroom-signal .resume-header,
      .template-studio-mini .resume-document.layout-founder-one-page .resume-header { margin: 0 -20px; padding: 24px 20px 18px; }
      .template-studio-mini .resume-document.layout-growth-operator .resume-header { margin: -20px -20px 0; padding: 24px 20px 18px; }
    }

    /* Portfolio directions */
    .layout-light-premium-dashboard { --art-paper: #edf5f0; --art-accent: #1e6a52; }
    .layout-light-premium-dashboard .art-section,
    .layout-light-premium-dashboard .art-project { box-shadow: 0 15px 35px rgba(28,67,52,.08); background: rgba(255,255,255,.7); }
    .layout-case-focused-storyteller { --art-paper: #f7e6dc; --art-accent: #aa4a3c; }
    .layout-case-focused-storyteller .art-hero { min-height: 310px; align-items: center; }
    .layout-case-focused-storyteller .art-avatar { width: 180px; height: 220px; border-radius: 90px 90px 8px 8px; }
    .layout-minimal-consultant-page { --art-paper: #faf9f4; --art-accent: #111; font-family: Georgia, serif; }
    .layout-minimal-consultant-page .art-nav-links,
    .layout-minimal-consultant-page .art-metrics { display: none; }
    .layout-minimal-consultant-page .art-section { border-radius: 0; border-width: 1px 0 0; }
    .layout-atelier-editorial { --art-paper: #efe2d0; --art-accent: #e63870; }
    .layout-atelier-editorial .art-hero h4 { font-family: Georgia, serif; font-style: italic; font-size: 64px; }
    .layout-atelier-editorial .art-project-grid { grid-template-columns: 1.4fr .6fr; }
    .layout-atelier-editorial .art-project:first-child { min-height: 170px; background: #cf6f83; }
    .layout-product-systems { --art-paper: #e9efff; --art-accent: #2955db; }
    .layout-product-systems .art-section,
    .layout-product-systems .art-project { border: 1px dashed rgba(41,85,219,.45); border-radius: 8px; }
    .layout-product-systems .art-mark { border-radius: 50%; }
    .layout-operator-command { --art-paper: #091613; --art-ink: #e8fff6; --art-muted: #83a299; --art-accent: #5fffc0; font-family: Consolas, monospace; }
    .layout-operator-command .art-metric,
    .layout-operator-command .art-project { background: #10231e; border: 1px solid #24463c; }
    .layout-operator-command .art-section { border-color: #24463c; border-radius: 5px; }
    .layout-campaign-motion { --art-paper: #ff623f; --art-ink: #1c1020; --art-muted: #512b34; --art-accent: #fff151; }
    .layout-campaign-motion .art-hero h4 { font-size: 70px; text-transform: uppercase; font-weight: 900; }
    .layout-campaign-motion .art-section { border: 3px solid var(--art-ink); border-radius: 28px; }
    .layout-campaign-motion .art-project:nth-child(2) { transform: rotate(3deg); background: #d9c8ff; }
    .layout-research-archive { --art-paper: #f1eee3; --art-accent: #5d2e27; font-family: Georgia, serif; }
    .layout-research-archive::before { content: "ARCHIVE  /  2026  /  FIELD NOTES"; position: absolute; left: 14px; top: 140px; writing-mode: vertical-rl; font: 9px Consolas, monospace; letter-spacing: .16em; }
    .layout-research-archive .art-section { border-radius: 0; border-style: dashed; }
    .layout-sales-showcase { --art-paper: #eff9ed; --art-accent: #09714f; }
    .layout-sales-showcase .art-metric strong { font-size: 32px; }
    .layout-sales-showcase .art-footer { border-radius: 999px; padding-left: 30px; }
    .layout-founder-memoir { --art-paper: #171713; --art-ink: #f5f0df; --art-muted: #aaa38c; --art-accent: #d3ad69; font-family: Georgia, serif; }
    .layout-founder-memoir .art-hero { min-height: 300px; }
    .layout-founder-memoir .art-hero h4 { font-weight: 400; font-size: 63px; }
    .layout-founder-memoir .art-avatar { border-radius: 50% 50% 4px 4px; }
    .layout-founder-memoir .art-section { border: 0; border-top: 1px solid #514b3c; border-radius: 0; }

    /* Elaborate portfolio systems */
    .portfolio-artboard {
      --folio-ink: #102018;
      --folio-muted: #66736c;
      --folio-paper: #f6faf7;
      --folio-accent: #2f7758;
      min-height: 1180px;
      padding: 32px;
      overflow: hidden;
      color: var(--folio-ink);
      background: var(--folio-paper);
      font-family: "Manrope", sans-serif;
    }
    .portfolio-artboard h4,
    .portfolio-artboard h5,
    .portfolio-artboard p,
    .portfolio-artboard figure,
    .portfolio-artboard blockquote { margin: 0; }
    .portfolio-artboard h4,
    .portfolio-artboard h5,
    .portfolio-artboard p,
    .portfolio-artboard strong,
    .portfolio-artboard span { overflow-wrap: anywhere; }
    .folio-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .folio-brand { display: flex; align-items: center; gap: 10px; font-size: 10px; }
    .folio-brand > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--folio-ink); font-size: 9px; font-weight: 900; }
    .folio-nav-links { display: flex; gap: 16px; color: var(--folio-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
    .folio-marquee { display: none; position: relative; z-index: 2; margin: 20px -32px 0; overflow: hidden; white-space: nowrap; }
    .folio-marquee span { display: inline-block; min-width: 200%; padding: 8px 0; font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; animation: folio-marquee-motion 18s linear infinite; }
    .folio-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: 30px; align-items: center; min-height: 390px; padding: 64px 0 50px; }
    .folio-kicker { margin-bottom: 16px; color: var(--folio-accent); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
    .folio-hero h4 { max-width: 700px; font-size: clamp(38px, 6vw, 72px); line-height: .94; letter-spacing: -.065em; }
    .folio-hero p { max-width: 610px; margin-top: 22px; color: var(--folio-muted); font-size: 12px; line-height: 1.7; }
    .folio-hero-actions { display: flex; align-items: center; gap: 13px; width: fit-content; margin-top: 24px; padding: 9px 9px 9px 14px; border: 1px solid color-mix(in srgb, var(--folio-ink) 18%, transparent); border-radius: 999px; font-size: 8px; font-weight: 800; }
    .folio-hero-actions b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: var(--folio-accent); }
    .folio-hero-art { position: relative; min-height: 270px; }
    .folio-hero-art span { position: absolute; display: block; border-radius: 28px; }
    .folio-hero-art span:nth-child(1) { inset: 12% 0 0 12%; background: color-mix(in srgb, var(--folio-accent) 20%, #fff); transform: rotate(8deg); }
    .folio-hero-art span:nth-child(2) { inset: 0 16% 14% 0; border: 2px solid var(--folio-accent); transform: rotate(-7deg); }
    .folio-hero-art span:nth-child(3) { width: 54px; height: 54px; right: 4%; top: 0; border-radius: 50%; background: var(--folio-accent); animation: folio-float 4.5s ease-in-out infinite; }
    .folio-hero-art b { position: absolute; inset: 28% 20% auto 24%; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: #fff; background: var(--folio-ink); font: 42px Georgia, serif; }
    .folio-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 0; border-block: 1px solid color-mix(in srgb, var(--folio-ink) 14%, transparent); }
    .folio-facts span { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--folio-accent) 9%, transparent); font-size: 8px; }
    .folio-work,
    .folio-capabilities { position: relative; z-index: 1; padding-top: 54px; }
    .folio-section-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
    .folio-section-head > div { display: grid; gap: 4px; }
    .folio-section-head span { color: var(--folio-accent); font-size: 9px; font-weight: 900; }
    .folio-section-head small { color: var(--folio-muted); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
    .folio-section-head h5 { max-width: 520px; font-size: 27px; letter-spacing: -.04em; }
    .folio-project-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .folio-project-card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--folio-ink) 12%, transparent); border-radius: 24px; background: rgba(255,255,255,.72); }
    .folio-project-card.is-1 { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; }
    .folio-project-visual { position: relative; min-height: 180px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--folio-accent) 70%, #fff), color-mix(in srgb, var(--folio-accent) 16%, #fff)); }
    .folio-project-visual::before { content: ""; position: absolute; width: 140px; height: 140px; right: -35px; bottom: -45px; border: 28px solid rgba(255,255,255,.42); border-radius: 50%; }
    .folio-project-visual span { position: absolute; left: 17px; top: 15px; color: rgba(255,255,255,.82); font: 9px Consolas, monospace; }
    .folio-project-visual b { position: absolute; left: 17px; bottom: 14px; color: #fff; font-size: 36px; letter-spacing: -.08em; }
    .folio-project-visual i { position: absolute; inset: 24% 16% 23% 38%; border: 1px solid rgba(255,255,255,.64); border-radius: 50% 6px 50% 6px; transform: rotate(18deg); }
    .folio-project-copy { padding: 20px; }
    .folio-project-copy > span,
    .folio-editorial-piece figcaption > span,
    .folio-campaign-card > div > span,
    .folio-sales-proof > span { color: var(--folio-accent); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .folio-project-copy h5,
    .folio-editorial-piece h5,
    .folio-campaign-card h5,
    .folio-system-window h5,
    .folio-sales-proof h5 { margin-top: 8px; font-size: 16px; line-height: 1.12; }
    .folio-project-copy p,
    .folio-editorial-piece p,
    .folio-campaign-card p,
    .folio-system-window p,
    .folio-sales-proof p { margin-top: 8px; color: var(--folio-muted); font-size: 8px; line-height: 1.55; }
    .folio-project-copy > strong { display: block; margin-top: 10px; color: var(--folio-accent); font-size: 8px; }
    .folio-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
    .folio-tags span { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--folio-ink) 15%, transparent); border-radius: 999px; font-size: 6px; }
    .folio-capability-cloud { display: flex; flex-wrap: wrap; gap: 9px; }
    .folio-capability-cloud > span { padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--folio-ink) 14%, transparent); border-radius: 999px; background: rgba(255,255,255,.62); font-size: 8px; }
    .folio-capabilities > p { color: var(--folio-muted); font-size: 9px; }
    .folio-footer { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-top: 64px; padding: 28px; border-radius: 26px; color: #fff; background: var(--folio-ink); }
    .folio-footer > div { display: grid; gap: 6px; }
    .folio-footer small { color: rgba(255,255,255,.65); font-size: 7px; text-transform: uppercase; letter-spacing: .12em; }
    .folio-footer strong { max-width: 620px; font-size: 22px; line-height: 1.05; }
    .folio-footer > span { max-width: 35%; color: rgba(255,255,255,.75); font-size: 8px; }

    .folio-light-premium-dashboard { --folio-paper: #edf5f0; --folio-accent: #1e6a52; background: radial-gradient(circle at 78% 8%, #d6e7ff, transparent 26%), radial-gradient(circle at 12% 44%, #f7e9b8, transparent 22%), var(--folio-paper); }
    .folio-light-premium-dashboard .folio-hero { padding-inline: 28px; border-radius: 32px; background: rgba(255,255,255,.58); box-shadow: 0 24px 70px rgba(23,78,57,.09); backdrop-filter: blur(16px); }
    .folio-light-premium-dashboard .folio-project-card { box-shadow: 0 18px 45px rgba(23,78,57,.08); }
    .folio-light-premium-dashboard .folio-project-card.is-2 { transform: translateY(18px); }

    .folio-case-focused-storyteller { --folio-paper: #f5e7de; --folio-accent: #a84839; padding-inline: 42px; }
    .folio-case-focused-storyteller .folio-hero { min-height: 500px; border-bottom: 1px solid #cba99c; }
    .folio-case-focused-storyteller .folio-hero h4 { font-family: Georgia, serif; font-size: 74px; font-weight: 400; }
    .folio-case-focused-storyteller .folio-hero-art span:nth-child(1) { inset: 0 5% 0 5%; border-radius: 48% 48% 10px 10px; background: #bd715e; }
    .folio-case-focused-storyteller .folio-hero-art span:nth-child(2) { inset: 14% -10% -8% 28%; border-color: #6d3027; border-radius: 50%; }
    .folio-case-focused-storyteller .folio-project-layout { grid-template-columns: 1fr; gap: 44px; }
    .folio-case-story { padding-top: 22px; border-top: 1px solid #cba99c; }
    .folio-case-index { margin-bottom: 14px; color: #a84839; font: 8px Consolas, monospace; letter-spacing: .12em; }
    .folio-case-opening { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 26px; align-items: center; }
    .folio-case-opening h5 { margin: 9px 0; font: 30px/1 Georgia, serif; }
    .folio-case-opening p,
    .folio-case-chapters p { color: #6e5148; font-size: 9px; line-height: 1.6; }
    .folio-case-opening > div > span { color: #a84839; font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
    .folio-case-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: #cfb4aa; }
    .folio-case-chapters > div { padding: 15px; background: #f8eee8; }
    .folio-case-chapters small { color: #a84839; font-size: 7px; font-weight: 900; text-transform: uppercase; }

    .folio-minimal-consultant-page { --folio-paper: #faf9f4; --folio-ink: #131411; --folio-accent: #131411; padding: 46px; font-family: Georgia, serif; }
    .folio-minimal-consultant-page .folio-nav-links,
    .folio-minimal-consultant-page .folio-hero-art,
    .folio-minimal-consultant-page .folio-facts { display: none; }
    .folio-minimal-consultant-page .folio-hero { display: block; min-height: 470px; padding-top: 100px; }
    .folio-minimal-consultant-page .folio-hero h4 { max-width: 850px; font-size: 82px; font-weight: 400; line-height: .98; }
    .folio-minimal-consultant-page .folio-hero p { max-width: 520px; margin-left: 36%; }
    .folio-minimal-consultant-page .folio-project-layout { display: block; }
    .folio-consultant-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(130px, .45fr); gap: 20px; align-items: start; padding: 22px 0; border-top: 1px solid #bbb9b0; }
    .folio-consultant-row > span { font: 9px Consolas, monospace; }
    .folio-consultant-row h5 { font-size: 20px; }
    .folio-consultant-row p { margin-top: 6px; color: #686961; font: 9px/1.6 Manrope, sans-serif; }
    .folio-consultant-row > strong { text-align: right; font: 8px/1.5 Manrope, sans-serif; }
    .folio-minimal-consultant-page .folio-capability-cloud > span { border-radius: 0; background: transparent; }

    .folio-atelier-editorial { --folio-paper: #eddfce; --folio-ink: #351f27; --folio-accent: #dd356d; padding: 38px; background: linear-gradient(90deg, transparent 49.8%, rgba(53,31,39,.08) 50%, transparent 50.2%), var(--folio-paper); }
    .folio-atelier-editorial .folio-marquee { display: block; color: #fff; background: #dd356d; transform: rotate(-1.2deg); }
    .folio-atelier-editorial .folio-hero { min-height: 530px; grid-template-columns: 1.4fr .6fr; }
    .folio-atelier-editorial .folio-hero h4 { font-family: Georgia, serif; font-size: 82px; font-style: italic; font-weight: 400; }
    .folio-atelier-editorial .folio-hero-art { min-height: 350px; }
    .folio-atelier-editorial .folio-hero-art b { inset: 32% 8% auto 12%; border-radius: 2px 80px 2px 2px; background: #dd356d; }
    .folio-atelier-editorial .folio-project-layout { grid-template-columns: 1.3fr .7fr; align-items: start; }
    .folio-editorial-piece { display: grid; gap: 12px; }
    .folio-editorial-piece.is-1 { grid-row: span 2; }
    .folio-editorial-piece.is-1 .folio-project-visual { min-height: 360px; }
    .folio-editorial-piece.is-2 { transform: translateY(55px) rotate(2deg); }
    .folio-editorial-piece.is-3 { margin-top: 45px; }
    .folio-editorial-piece h5 { font: italic 24px/1 Georgia, serif; }

    .folio-product-systems { --folio-paper: #edf2ff; --folio-accent: #2955db; background-image: linear-gradient(rgba(41,85,219,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(41,85,219,.07) 1px, transparent 1px); background-size: 26px 26px; }
    .folio-product-systems .folio-nav { padding: 10px 13px; border: 1px solid #9eb2ec; border-radius: 10px; background: rgba(255,255,255,.82); }
    .folio-product-systems .folio-hero-art span { border-radius: 8px; }
    .folio-product-systems .folio-project-layout { grid-template-columns: 1fr; }
    .folio-system-window { overflow: hidden; border: 1px solid #8ba5e8; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 8px 8px 0 rgba(41,85,219,.11); }
    .folio-window-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #b6c5ed; background: #dfe7ff; }
    .folio-window-bar i { width: 6px; height: 6px; border-radius: 50%; background: #2955db; opacity: .35; }
    .folio-window-bar span { margin-left: 7px; color: #52648f; font: 7px Consolas, monospace; }
    .folio-system-grid { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr); gap: 18px; padding: 14px; }
    .folio-system-grid .folio-project-visual { min-height: 150px; border-radius: 7px; }
    .folio-system-grid small { color: #2955db; font: 7px Consolas, monospace; }

    .folio-operator-command { --folio-paper: #07120f; --folio-ink: #e6fff4; --folio-muted: #7d9b8f; --folio-accent: #58f3ad; color: var(--folio-ink); background: radial-gradient(circle at 72% 18%, #143c30, transparent 28%), #07120f; font-family: Consolas, monospace; }
    .folio-operator-command .folio-nav { padding-bottom: 10px; border-bottom: 1px solid #24483b; }
    .folio-operator-command .folio-brand > span { color: #07120f; background: #58f3ad; }
    .folio-operator-command .folio-hero h4 { font-size: 62px; letter-spacing: -.045em; }
    .folio-operator-command .folio-hero h4::before { content: "~/"; color: #58f3ad; }
    .folio-operator-command .folio-hero-art span:nth-child(1) { background: #10261f; }
    .folio-operator-command .folio-hero-art b { color: #07120f; background: #58f3ad; }
    .folio-operator-command .folio-facts { border-color: #24483b; }
    .folio-operator-command .folio-project-layout { grid-template-columns: 1fr; }
    .folio-command-card { padding: 16px; border: 1px solid #24483b; border-radius: 6px; background: rgba(11,31,25,.86); }
    .folio-command-card > div { color: #7d9b8f; font-size: 7px; }
    .folio-command-card > div span { color: #58f3ad; }
    .folio-command-card h5 { margin: 13px 0 8px; color: #e6fff4; font-size: 15px; }
    .folio-command-card p { color: #91afa3; font: 8px/1.6 Manrope, sans-serif; }
    .folio-command-card code { display: block; margin-top: 12px; padding: 8px; color: #58f3ad; background: #081813; font-size: 7px; }
    .folio-operator-command .folio-capability-cloud > span { border-color: #315c4d; background: #10261f; }
    .folio-operator-command .folio-footer { color: #e6fff4; background: #10261f; border: 1px solid #315c4d; }
    .folio-operator-command .folio-footer small,
    .folio-operator-command .folio-footer > span { color: #91afa3; }

    .folio-campaign-motion { --folio-paper: #ff6242; --folio-ink: #21111d; --folio-muted: #6c2f2b; --folio-accent: #fff255; background: radial-gradient(circle at 90% 5%, #d8caff 0 12%, transparent 12.2%), #ff6242; }
    .folio-campaign-motion .folio-marquee { display: block; color: #21111d; background: #fff255; transform: rotate(1.5deg); }
    .folio-campaign-motion .folio-hero h4 { font-size: 82px; font-weight: 900; text-transform: uppercase; }
    .folio-campaign-motion .folio-hero-art span:nth-child(1) { background: #d9c9ff; transform: rotate(12deg); }
    .folio-campaign-motion .folio-hero-art b { color: #21111d; background: #fff255; transform: rotate(-8deg); }
    .folio-campaign-motion .folio-project-layout { grid-template-columns: repeat(2, 1fr); }
    .folio-campaign-card { position: relative; padding: 12px; border: 3px solid #21111d; border-radius: 26px; background: #fff8e8; box-shadow: 7px 7px 0 #21111d; }
    .folio-campaign-card.is-2 { transform: rotate(2deg) translateY(18px); background: #d9c9ff; }
    .folio-campaign-card.is-3 { transform: rotate(-1.5deg); background: #fff255; }
    .folio-campaign-card .folio-project-visual { min-height: 145px; border-radius: 16px; }
    .folio-campaign-card > div:last-child { padding: 12px 5px 5px; }
    .folio-tape { position: absolute; z-index: 2; top: -12px; right: 18px; padding: 6px 12px; color: #fff; background: #21111d; font-size: 7px; font-weight: 900; transform: rotate(3deg); }
    .folio-campaign-motion .folio-footer { color: #21111d; background: #fff255; border: 3px solid #21111d; }
    .folio-campaign-motion .folio-footer small,
    .folio-campaign-motion .folio-footer > span { color: #6c2f2b; }

    .folio-research-archive { --folio-paper: #f1eee3; --folio-ink: #352c26; --folio-muted: #71665c; --folio-accent: #6b3329; padding-left: 50px; background-image: linear-gradient(rgba(107,51,41,.06) 1px, transparent 1px); background-size: 100% 28px; font-family: Georgia, serif; }
    .folio-research-archive::before { content: "FIELD NOTES / ARCHIVE / 2026"; position: absolute; left: 13px; top: 130px; writing-mode: vertical-rl; color: #6b3329; font: 7px Consolas, monospace; letter-spacing: .18em; }
    .folio-research-archive .folio-hero { min-height: 430px; }
    .folio-research-archive .folio-hero h4 { font-size: 68px; font-weight: 400; }
    .folio-research-archive .folio-project-layout { display: block; border-top: 2px solid #6b3329; }
    .folio-research-entry { display: grid; grid-template-columns: 70px 1fr 1fr 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid #b8aa9e; }
    .folio-research-entry small { color: #6b3329; font: 7px Consolas, monospace; text-transform: uppercase; }
    .folio-research-entry h5 { margin: 6px 0; font-size: 16px; }
    .folio-research-entry p { color: #71665c; font: 8px/1.55 Manrope, sans-serif; }
    .folio-archive-code { font: 8px Consolas, monospace; }
    .folio-research-archive .folio-capability-cloud > span { border-radius: 2px; background: #e6dfd1; }

    .folio-sales-showcase { --folio-paper: #edf8e9; --folio-ink: #0c3427; --folio-accent: #08714e; background: radial-gradient(circle at 84% 20%, #fff0a9, transparent 24%), var(--folio-paper); }
    .folio-sales-showcase .folio-hero { min-height: 440px; }
    .folio-sales-showcase .folio-hero h4 { font-size: 76px; }
    .folio-sales-showcase .folio-hero-actions { color: #fff; border: 0; background: #08714e; }
    .folio-sales-showcase .folio-project-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .folio-sales-proof { padding: 20px; border: 1px solid #a9cbbd; border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 18px 40px rgba(8,113,78,.08); }
    .folio-proof-result { min-height: 58px; margin-bottom: 18px; color: #08714e; font-size: 18px; font-weight: 900; line-height: 1.06; }
    .folio-sales-showcase .folio-footer { border-radius: 999px; background: #08714e; }

    .folio-founder-memoir { --folio-paper: #171713; --folio-ink: #f4efdf; --folio-muted: #aaa38c; --folio-accent: #d3ad69; color: var(--folio-ink); background: radial-gradient(circle at 78% 14%, #293d35, transparent 28%), #171713; font-family: Georgia, serif; }
    .folio-founder-memoir .folio-brand > span { color: #171713; background: #d3ad69; }
    .folio-founder-memoir .folio-nav-links { color: #aaa38c; }
    .folio-founder-memoir .folio-hero { display: block; min-height: 590px; padding-top: 110px; }
    .folio-founder-memoir .folio-hero h4 { max-width: 880px; font-size: 88px; font-weight: 400; }
    .folio-founder-memoir .folio-hero p { margin-left: 46%; color: #aaa38c; }
    .folio-founder-memoir .folio-hero-art { display: none; }
    .folio-founder-memoir .folio-facts { border-color: #514b3c; }
    .folio-founder-memoir .folio-project-layout { grid-template-columns: repeat(2, 1fr); }
    .folio-memoir-chapter { padding: 24px 0; border-top: 1px solid #514b3c; }
    .folio-memoir-chapter > span { color: #d3ad69; font: 7px Manrope, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
    .folio-memoir-chapter h5 { margin: 13px 0; font-size: 28px; font-weight: 400; }
    .folio-memoir-chapter p { color: #aaa38c; font: 9px/1.7 Manrope, sans-serif; }
    .folio-memoir-chapter blockquote { margin-top: 20px; padding-left: 17px; border-left: 1px solid #d3ad69; color: #e7dcc0; font-size: 13px; font-style: italic; line-height: 1.5; }
    .folio-founder-memoir .folio-capability-cloud > span { border-color: #514b3c; background: transparent; }
    .folio-founder-memoir .folio-footer { color: #171713; background: #d3ad69; }
    .folio-founder-memoir .folio-footer small,
    .folio-founder-memoir .folio-footer > span { color: #5f4a2a; }

    .template-preview-window.is-card .portfolio-artboard { min-height: 1050px; padding: 20px; }
    .template-preview-window.is-card .folio-nav-links { display: none; }
    .template-preview-window.is-card .folio-brand { font-size: 6px; }
    .template-preview-window.is-card .folio-brand > span { width: 20px; height: 20px; font-size: 5px; }
    .template-preview-window.is-card .folio-hero { min-height: 300px; gap: 12px; padding: 36px 0 25px; }
    .template-preview-window.is-card .folio-kicker { margin-bottom: 8px; font-size: 5px; }
    .template-preview-window.is-card .folio-hero h4 { font-size: 30px; }
    .template-preview-window.is-card .folio-hero p { margin-top: 10px; font-size: 6px; }
    .template-preview-window.is-card .folio-hero-actions { margin-top: 12px; padding: 5px 5px 5px 8px; font-size: 4px; }
    .template-preview-window.is-card .folio-hero-actions b { width: 14px; height: 14px; }
    .template-preview-window.is-card .folio-hero-art { min-height: 150px; }
    .template-preview-window.is-card .folio-hero-art b { font-size: 20px; }
    .template-preview-window.is-card .folio-facts { padding: 7px 0; }
    .template-preview-window.is-card .folio-facts span { padding: 3px 5px; font-size: 4px; }
    .template-preview-window.is-card .folio-work,
    .template-preview-window.is-card .folio-capabilities { padding-top: 28px; }
    .template-preview-window.is-card .folio-section-head { margin-bottom: 12px; }
    .template-preview-window.is-card .folio-section-head h5 { font-size: 14px; }
    .template-preview-window.is-card .folio-section-head span,
    .template-preview-window.is-card .folio-section-head small { font-size: 4px; }
    .template-preview-window.is-card .folio-project-layout { gap: 8px; }
    .template-preview-window.is-card .folio-project-visual { min-height: 90px; }
    .template-preview-window.is-card .folio-project-copy { padding: 10px; }
    .template-preview-window.is-card .folio-project-copy h5,
    .template-preview-window.is-card .folio-editorial-piece h5,
    .template-preview-window.is-card .folio-campaign-card h5,
    .template-preview-window.is-card .folio-system-window h5,
    .template-preview-window.is-card .folio-sales-proof h5 { font-size: 8px; }
    .template-preview-window.is-card .folio-project-copy p,
    .template-preview-window.is-card .folio-editorial-piece p,
    .template-preview-window.is-card .folio-campaign-card p,
    .template-preview-window.is-card .folio-system-window p,
    .template-preview-window.is-card .folio-sales-proof p { font-size: 4px; }
    .template-preview-window.is-card .folio-footer { margin-top: 30px; padding: 14px; }
    .template-preview-window.is-card .folio-footer strong { font-size: 11px; }
    .template-preview-window.is-card .folio-footer small,
    .template-preview-window.is-card .folio-footer > span { font-size: 4px; }
    .template-preview-window.is-card .folio-case-focused-storyteller,
    .template-preview-window.is-card .folio-minimal-consultant-page,
    .template-preview-window.is-card .folio-atelier-editorial { padding-inline: 22px; }
    .template-preview-window.is-card .folio-case-focused-storyteller .folio-hero h4,
    .template-preview-window.is-card .folio-minimal-consultant-page .folio-hero h4,
    .template-preview-window.is-card .folio-atelier-editorial .folio-hero h4,
    .template-preview-window.is-card .folio-campaign-motion .folio-hero h4,
    .template-preview-window.is-card .folio-founder-memoir .folio-hero h4 { font-size: 34px; }

    @keyframes folio-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes folio-marquee-motion { to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
      .folio-marquee span,
      .folio-hero-art span:nth-child(3) { animation: none; }
    }

    @media (max-width: 700px) {
      .portfolio-artboard { padding: 22px 18px; }
      .folio-hero,
      .folio-case-opening,
      .folio-system-grid { grid-template-columns: minmax(0, 1fr); }
      .folio-hero { min-height: auto; padding: 48px 0 34px; }
      .folio-hero h4,
      .folio-case-focused-storyteller .folio-hero h4,
      .folio-minimal-consultant-page .folio-hero h4,
      .folio-atelier-editorial .folio-hero h4,
      .folio-campaign-motion .folio-hero h4,
      .folio-founder-memoir .folio-hero h4 { font-size: 42px; }
      .folio-hero-art { min-height: 230px; }
      .folio-section-head { align-items: start; flex-direction: column; }
      .folio-project-layout,
      .folio-project-card.is-1,
      .folio-case-chapters,
      .folio-atelier-editorial .folio-project-layout,
      .folio-campaign-motion .folio-project-layout,
      .folio-sales-showcase .folio-project-layout,
      .folio-founder-memoir .folio-project-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
      .folio-editorial-piece.is-1 .folio-project-visual { min-height: 230px; }
      .folio-editorial-piece.is-2,
      .folio-editorial-piece.is-3,
      .folio-campaign-card.is-2,
      .folio-campaign-card.is-3 { margin-top: 0; transform: none; }
      .folio-consultant-row { grid-template-columns: 35px minmax(0, 1fr); }
      .folio-consultant-row > strong { grid-column: 2; text-align: left; }
      .folio-minimal-consultant-page .folio-hero p,
      .folio-founder-memoir .folio-hero p { margin-left: 0; }
      .folio-research-entry { grid-template-columns: minmax(0, 1fr); }
      .folio-footer { align-items: start; flex-direction: column; }
      .folio-footer > span { max-width: 100%; }
      .folio-case-focused-storyteller,
      .folio-minimal-consultant-page,
      .folio-atelier-editorial { padding-inline: 18px; }
    }

    .elements-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .portfolio-options-modal {
      position: fixed;
      inset: 0;
      padding: 24px;
      background: rgba(9, 16, 13, 0.52);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: var(--layer-modal);
    }

    .portfolio-options-modal.is-open {
      display: flex;
    }

    .portfolio-options-shell {
      width: min(980px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
      border-radius: 30px;
      padding: 24px;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .portfolio-options-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 18px;
    }

    .resume-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .resume-card,
    .resume-option-card,
    .resume-options-shell {
      border-radius: 28px;
      padding: 22px;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .resume-cover {
      height: 180px;
      border-radius: 22px;
      margin-bottom: 16px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)),
        linear-gradient(135deg, #edf6ef, #d8e9ff 52%, #ffe9af);
      position: relative;
      overflow: hidden;
    }

    .resume-cover::after {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(10px);
    }

    .template-studio-modal {
      position: fixed;
      inset: 0;
      padding: 24px;
      background: rgba(9, 16, 13, 0.56);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: var(--layer-modal-priority);
    }

    .template-studio-modal.is-open {
      display: flex;
    }

    .template-studio-shell {
      width: min(1180px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
      border-radius: 30px;
      padding: 24px;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.82);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .template-studio-grid {
      display: grid;
      grid-template-columns: 0.98fr 1.02fr;
      gap: 18px;
      margin-top: 18px;
    }

    .template-studio-grid > *,
    .template-studio-field-grid > *,
    .template-studio-panel .sync-actions > * { min-width: 0; }

    .template-studio-panel {
      border-radius: 24px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.06);
      padding: 20px;
    }

    .template-studio-preview-shell {
      position: sticky;
      top: 0;
    }

    .template-studio-mini {
      border-radius: 24px;
      padding: 18px;
      min-height: 540px;
      overflow: hidden;
      position: relative;
      background: #dde2de;
    }

    .template-studio-mini .template-preview-window {
      position: relative;
      inset: auto;
      height: 500px;
      background: #d9dedb;
      border-radius: 15px;
      box-shadow: 0 20px 55px rgba(10, 24, 18, .2);
      overflow: auto;
    }

    .template-studio-mini .template-preview-track { animation: none; }

    @media (max-width: 700px) {
      .template-studio-shell { overflow-x: hidden; }
      .template-studio-panel .sync-actions { display: grid; grid-template-columns: 1fr; }
      .template-studio-panel .sync-actions .btn { width: 100%; }
      .template-studio-mini { min-height: 430px; padding: 8px; }
      .template-studio-mini .template-preview-window { height: 410px; }
      .template-studio-mini .template-artboard { min-height: 680px; padding: 20px; }
      .template-studio-mini .art-nav { margin-bottom: 28px; }
      .template-studio-mini .art-nav-links { display: none; }
      .template-studio-mini .art-hero,
      .template-studio-mini .layout-portfolio-hybrid .art-hero,
      .template-studio-mini .layout-creative-column .art-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
      .template-studio-mini .art-hero h4,
      .template-studio-mini .layout-atelier-editorial .art-hero h4,
      .template-studio-mini .layout-campaign-motion .art-hero h4,
      .template-studio-mini .layout-founder-memoir .art-hero h4 { font-size: 30px; }
      .template-studio-mini .art-avatar,
      .template-studio-mini .layout-case-focused-storyteller .art-avatar { width: 54px; height: 68px; border-radius: 27px 27px 10px 10px; font-size: 16px; }
      .template-studio-mini .art-metrics { gap: 1px; margin: 16px 0; }
      .template-studio-mini .art-metric { min-height: 58px; padding: 10px; }
      .template-studio-mini .art-metric strong,
      .template-studio-mini .layout-sales-showcase .art-metric strong { font-size: 18px; }
      .template-studio-mini .art-content,
      .template-studio-mini .layout-boardroom-signal .art-content,
      .template-studio-mini .layout-consulting-matrix .art-content { grid-template-columns: minmax(0, 1fr); gap: 12px; }
      .template-studio-mini .layout-boardroom-signal .art-section:first-child { grid-column: auto; }
      .template-studio-mini .art-section { min-height: 120px; padding: 16px; }
      .template-studio-mini .art-project-grid,
      .template-studio-mini .layout-atelier-editorial .art-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .template-studio-mini .art-footer { align-items: flex-start; flex-direction: column; }
      .template-studio-mini .art-footer strong { max-width: 100%; }
    }

    .template-studio-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .template-studio-field-grid .field.is-wide {
      grid-column: 1 / -1;
    }

    @keyframes template-scroll {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-45%);
      }
    }

    @media print {
      body.is-template-printing > *:not(.app-shell),
      body.is-template-printing .app-shell > *:not(.main),
      body.is-template-printing .main > *:not(.template-studio-modal) { display: none !important; }
      body.is-template-printing .app-shell,
      body.is-template-printing .main { display: block !important; padding: 0 !important; margin: 0 !important; }
      body.is-template-printing .template-studio-modal {
        display: block !important;
        position: static;
        padding: 0;
        background: #fff;
      }
      body.is-template-printing .template-studio-shell,
      body.is-template-printing .template-studio-grid,
      body.is-template-printing .template-studio-panel,
      body.is-template-printing .template-studio-mini,
      body.is-template-printing .template-preview-window {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
      }
      body.is-template-printing .template-studio-shell > .modal-head,
      body.is-template-printing .template-studio-grid > .template-studio-panel:not(.template-studio-preview-shell),
      body.is-template-printing .template-studio-preview-shell > .template-topline { display: none !important; }
      body.is-template-printing .template-artboard { min-height: 100vh; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      body.is-template-printing .resume-missing { display: none !important; }
      body.is-template-printing .resume-document { min-height: auto; padding: 12mm 14mm; }
    }

    .resume-options-modal {
      position: fixed;
      inset: 0;
      padding: 24px;
      background: rgba(9, 16, 13, 0.52);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: var(--layer-modal);
    }

    .resume-options-modal.is-open {
      display: flex;
    }

    .resume-options-shell {
      width: min(920px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
    }

    .linkedin-import-modal {
      position: fixed;
      inset: 0;
      padding: 24px;
      background: rgba(9, 16, 13, 0.56);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: var(--layer-modal-priority);
    }

    .linkedin-import-modal.is-open {
      display: flex;
    }

    .linkedin-import-shell {
      width: min(1120px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
      border-radius: 28px;
      padding: 24px;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.82);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .template-topline,
    .template-summary-row,
    .template-structure-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .template-topline {
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .template-summary-row {
      margin-top: 14px;
      margin-bottom: 8px;
    }

    .template-structure-list {
      margin-top: 16px;
    }

    .template-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.42);
      color: var(--text-soft);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .template-pill.is-trial {
      color: var(--success);
      border-color: rgba(28, 122, 83, 0.18);
      background: rgba(223, 242, 229, 0.74);
    }

    .template-pill.is-premium {
      color: #7f5a00;
      border-color: rgba(139, 103, 18, 0.18);
      background: rgba(255, 233, 175, 0.82);
    }

    .template-stat {
      font-size: 0.82rem;
      color: var(--text-soft);
      font-weight: 700;
    }

    .template-description {
      min-height: 72px;
    }

    .template-structure-list .tag,
    .template-summary-row .tag {
      background: rgba(255, 255, 255, 0.06);
    }

    .btn.is-locked,
    .btn[disabled] {
      cursor: not-allowed;
      opacity: 0.72;
      box-shadow: none;
    }

    .template-empty-note {
      border: 1px dashed var(--line);
      border-radius: 18px;
      padding: 16px;
      color: var(--text-soft);
    }

    .linkedin-import-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0;
    }

    .linkedin-import-stat {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.05);
    }

    .linkedin-import-stat small {
      display: block;
      margin-bottom: 6px;
      color: var(--text-soft);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .linkedin-import-stat strong {
      display: block;
      font-size: 1.35rem;
      letter-spacing: 0;
    }

    .linkedin-import-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .linkedin-import-field {
      display: grid;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.04);
    }

    .linkedin-import-field.is-wide {
      grid-column: 1 / -1;
    }

    .linkedin-import-field-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
    }

    .linkedin-import-field-head strong {
      display: block;
      margin-bottom: 4px;
    }

    .linkedin-import-editing-hint {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 10px;
      color: var(--text-soft);
      background: rgba(255, 255, 255, 0.05);
      font-size: 0.76rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .linkedin-import-field textarea {
      min-height: 120px;
      font-size: 0.94rem;
      line-height: 1.55;
    }

    .linkedin-import-note {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-soft);
      line-height: 1.65;
    }

    .resume-options-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .resume-option-card.ai {
      background: linear-gradient(145deg, rgba(216, 233, 255, 0.82), rgba(227, 221, 255, 0.78));
      border-color: rgba(98, 83, 167, 0.2);
    }

    .resume-option-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 800;
      margin-bottom: 14px;
      background: rgba(98, 83, 167, 0.12);
      color: #6253a7;
    }

    .project-cover {
      height: 180px;
      border-radius: 24px;
      margin-bottom: 16px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.05)),
        linear-gradient(135deg, #d8e9ff, #fdf1c7 54%, #ffd7de);
      position: relative;
      overflow: hidden;
    }

    .project-cover::after {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 28px;
      right: 18px;
      top: 18px;
      background: rgba(255,255,255,0.58);
      backdrop-filter: blur(8px);
      transform: rotate(10deg);
    }

    .project-meta,
    .project-footer,
    .inline-row,
    .preview-header,
    .draft-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .project-meta {
      margin-bottom: 12px;
    }

    .project-footer {
      margin-top: 16px;
    }

    .project-footer .chip {
      font-size: 0.78rem;
    }

    .evidence-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .evidence {
      display: flex;
      align-items: start;
      gap: 12px;
      padding: 14px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--line);
    }

    .evidence-index,
    .round-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-weight: 800;
      flex-shrink: 0;
    }

    .evidence-index {
      background: var(--mint);
      color: var(--success);
    }

    .round-icon {
      background: rgba(20, 32, 24, 0.06);
      color: var(--text);
    }

    .ai-grid {
      grid-template-columns: 0.95fr 1.05fr;
    }

    .canvas-block {
      padding: 18px;
      border-radius: 24px;
      background: linear-gradient(180deg, #fff, #f6fbf8);
      border: 1px solid var(--line);
      margin-bottom: 14px;
    }

    .canvas-block:last-child {
      margin-bottom: 0;
    }

    .canvas-block strong {
      display: block;
      margin-bottom: 10px;
      font-size: 1.05rem;
    }

    .generated {
      font-size: 1rem;
      line-height: 1.8;
      color: #324137;
    }

    .linkedin-grid,
    .content-grid {
      grid-template-columns: 1fr 1fr;
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 0.78rem;
    }

    .status::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
    }

    .status.success {
      color: var(--success);
      background: rgba(28, 122, 83, 0.1);
    }

    .status.warning {
      color: var(--warning);
      background: rgba(139, 103, 18, 0.12);
    }

    .status.danger {
      color: var(--danger);
      background: rgba(189, 84, 84, 0.1);
    }

    .preview-grid {
      grid-template-columns: 0.82fr 1.18fr;
    }

    .browser-shell {
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(20, 32, 24, 0.06);
      background: linear-gradient(180deg, #fff, #f7fbf8);
    }

    .browser-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: rgba(247, 250, 248, 0.92);
    }

    .browser-url {
      flex: 1;
      height: 34px;
      border-radius: 999px;
      background: rgba(20, 32, 24, 0.06);
      display: flex;
      align-items: center;
      padding: 0 16px;
      color: var(--text-soft);
      font-size: 0.88rem;
    }

    .browser-body {
      padding: 18px;
    }

    .portfolio-hero {
      padding: 22px;
      border-radius: 28px;
      background: linear-gradient(145deg, #f8fbf9, #edf6ef);
      border: 1px solid rgba(20, 32, 24, 0.05);
      margin-bottom: 14px;
    }

    .portfolio-hero h3 {
      font-size: 2rem;
      margin-bottom: 8px;
    }

    .portfolio-sections {
      grid-template-columns: 1fr 1fr;
    }

    .portfolio-box {
      padding: 16px;
      border-radius: 22px;
      background: #fff;
      border: 1px solid var(--line);
    }

    .portfolio-box strong {
      display: block;
      margin-bottom: 8px;
    }

    .footer-note {
      padding: 14px 16px;
      border-radius: 18px;
      margin-top: 14px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--text-soft);
      line-height: 1.7;
    }

    [data-view] {
      display: none;
    }

    [data-view].is-active {
      display: block;
    }

    /* Theme-specific contrast: light uses grounded inks; dark keeps luminous accents. */
    body.theme-light {
      color-scheme: light;
    }

    body.theme-dark {
      color-scheme: dark;
    }

    body.theme-light .onboarding-tabs {
      background: rgba(247, 251, 248, 0.92);
      border-color: rgba(18, 32, 23, 0.13);
      box-shadow: 0 14px 34px rgba(56, 83, 67, 0.12);
    }

    body.theme-light .onboarding-tab {
      color: #405448;
    }

    body.theme-light .onboarding-tab:hover {
      color: #142018;
      background: rgba(18, 32, 23, 0.06);
    }

    body.theme-light .onboarding-tab.is-active {
      color: #142018;
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(56, 83, 67, 0.12), inset 0 0 0 1px rgba(18, 32, 23, 0.09);
    }

    body.theme-dark .onboarding-tabs {
      background: rgba(7, 32, 23, 0.94);
      border-color: rgba(137, 226, 178, 0.15);
    }

    body.theme-dark .onboarding-tab {
      color: #afcdbd;
    }

    body.theme-dark .onboarding-tab:hover {
      color: #f3f8f5;
      background: rgba(121, 222, 166, 0.1);
    }

    body.theme-light .user-status-badge {
      text-shadow: none;
    }

    body.theme-light .user-status-badge.is-admin {
      color: #12613f;
    }

    body.theme-light .user-status-badge.is-trial {
      color: #765300;
    }

    body.theme-light .user-status-badge.is-pro {
      color: #156237;
    }

    body.theme-light .user-status-badge.is-expired {
      color: #a43149;
    }

    body.theme-light .user-status-badge::before {
      box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
    }

    body.theme-light .input,
    body.theme-light .textarea,
    body.theme-light .select {
      background: rgba(255, 255, 255, 0.78);
      border-color: rgba(18, 32, 23, 0.14);
      color: #142018;
    }

    body.theme-light .input::placeholder,
    body.theme-light .textarea::placeholder {
      color: #6d7d73;
      opacity: 1;
    }

    body.theme-dark .input,
    body.theme-dark .textarea,
    body.theme-dark .select {
      background: rgba(121, 222, 166, 0.06);
      border-color: rgba(137, 226, 178, 0.16);
      color: #f1f6f3;
    }

    body.theme-dark .select option,
    body.theme-dark .select optgroup {
      background: #0d2b20;
      color: #edf4ef;
    }

    body.theme-dark .select option:disabled {
      color: #829087;
    }

    body.theme-light .select option,
    body.theme-light .select optgroup {
      background: #ffffff;
      color: #142018;
    }

    .input:focus,
    .textarea:focus,
    .select:focus {
      outline: 3px solid color-mix(in srgb, var(--success) 18%, transparent);
      outline-offset: 1px;
      border-color: color-mix(in srgb, var(--success) 55%, var(--line));
    }

    body.theme-light .field label,
    body.theme-light .projects-table th,
    body.theme-light .linkedin-import-stat small,
    body.theme-light .ai-context-stat small {
      color: #43584c;
    }

    body.theme-dark .field label,
    body.theme-dark .projects-table th,
    body.theme-dark .linkedin-import-stat small,
    body.theme-dark .ai-context-stat small {
      color: #b3d0c0;
    }

    body.theme-light .panel,
    body.theme-light .list-card,
    body.theme-light .project-card,
    body.theme-light .timeline-card,
    body.theme-light .canvas-card,
    body.theme-light .draft-card,
    body.theme-light .preview-card,
    body.theme-light .detail-card,
    body.theme-light .overview-card,
    body.theme-light .projects-table-card,
    body.theme-light .project-form-card,
    body.theme-light .project-modal-card,
    body.theme-light .config-item,
    body.theme-light .portfolio-template-card,
    body.theme-light .portfolio-create-card,
    body.theme-light .portfolio-option-card,
    body.theme-light .resume-card,
    body.theme-light .resume-option-card {
      border-color: rgba(18, 32, 23, 0.1);
    }

    body.theme-light .step,
    body.theme-light .insight,
    body.theme-light .timeline-item,
    body.theme-light .draft-item,
    body.theme-light .signal-item,
    body.theme-light .overview-list-item,
    body.theme-light .overview-kpi,
    body.theme-light .ai-action-card,
    body.theme-light .ai-endpoint-item,
    body.theme-light .ai-context-panel,
    body.theme-light .project-row-button,
    body.theme-light .project-detail-block,
    body.theme-light .work-card {
      background: #f5faf7;
      border-color: rgba(18, 32, 23, 0.09);
    }

    body.theme-light .tag,
    body.theme-light .template-pill,
    body.theme-light .linkedin-import-editing-hint {
      color: #344a3e;
      border-color: rgba(18, 32, 23, 0.12);
    }

    body.theme-light .template-pill.is-trial {
      color: #12613f;
      background: rgba(28, 122, 83, 0.1);
      border-color: rgba(28, 122, 83, 0.2);
    }

    body.theme-light .template-pill.is-premium {
      color: #765300;
      background: rgba(139, 103, 18, 0.11);
      border-color: rgba(139, 103, 18, 0.2);
    }

    body.theme-light .btn.secondary {
      background: rgba(255, 255, 255, 0.9);
      border-color: rgba(18, 32, 23, 0.13);
      color: #142018;
    }

    body.theme-light .status.success {
      color: #12613f;
      background: rgba(28, 122, 83, 0.11);
    }

    body.theme-light .status.warning {
      color: #765300;
      background: rgba(139, 103, 18, 0.13);
    }

    body.theme-light .status.danger {
      color: #a43149;
      background: rgba(189, 84, 84, 0.11);
    }

    body.theme-dark .status.success {
      color: #8af5c3;
    }

    body.theme-dark .status.warning {
      color: #ffe17a;
    }

    body.theme-dark .status.danger {
      color: #ff9eaa;
    }

    body.theme-light .nav-link {
      color: #52665a;
    }

    body.theme-light .nav-link:hover,
    body.theme-light .nav-link.active {
      color: #142018;
    }

    body.theme-dark .nav-link {
      color: #a9c8b7;
    }

    body.theme-dark .nav-link:hover,
    body.theme-dark .nav-link.active {
      color: #f1f6f3;
    }

    body.theme-light {
      scrollbar-color: #91a498 #edf5ef;
    }

    body.theme-dark {
      scrollbar-color: #3d745b #071d15;
    }

    body.theme-light ::-webkit-scrollbar-track {
      background: #edf5ef;
    }

    body.theme-light ::-webkit-scrollbar-thumb {
      background: #91a498;
      border: 3px solid #edf5ef;
      border-radius: 999px;
    }

    body.theme-dark ::-webkit-scrollbar-track {
      background: #071d15;
    }

    body.theme-dark ::-webkit-scrollbar-thumb {
      background: #3d745b;
      border: 3px solid #071d15;
      border-radius: 999px;
    }

    @media (max-width: 1320px) {
      .sidebar {
        position: static;
        width: auto;
        height: auto;
      }

      .sidebar:hover,
      .sidebar:focus-within {
        width: auto;
      }

      .brand strong,
      .nav-main > span:not(.nav-icon),
      .user-card-copy {
        max-width: 100%;
        opacity: 1;
        transform: none;
      }

      .brand,
      .sidebar:hover .brand,
      .sidebar:focus-within .brand {
        justify-content: flex-start;
        gap: 10px;
      }

      .theme-toggle {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--line);
        margin: 4px 0 8px;
        max-height: 46px;
        opacity: 1;
        padding: 5px;
        pointer-events: auto;
        visibility: visible;
      }

      .nav-link,
      .sidebar:hover .nav-link,
      .sidebar:focus-within .nav-link {
        justify-content: flex-start;
        gap: 10px;
      }

      .sidebar-logout,
      .sidebar:hover .sidebar-logout,
      .sidebar:focus-within .sidebar-logout {
        justify-content: flex-start;
        gap: 10px;
      }

      .sidebar-logout-label,
      .sidebar:hover .sidebar-logout-label,
      .sidebar:focus-within .sidebar-logout-label {
        max-width: 160px;
        opacity: 1;
        transform: none;
      }

      .nav-main,
      .sidebar:hover .nav-main,
      .sidebar:focus-within .nav-main {
        gap: 10px;
      }

      .user-card-sidebar,
      .sidebar:hover .user-card-sidebar,
      .sidebar:focus-within .user-card-sidebar {
        flex-basis: auto;
        min-height: auto;
        max-height: none;
        padding: 14px 12px;
      }

      .user-card-header,
      .sidebar:hover .user-card-header,
      .sidebar:focus-within .user-card-header {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 18px;
        justify-content: start;
      }

      .main {
        margin-left: 0;
      }
    }

    @media (max-width: 1100px) {
      .auth-layout {
        grid-template-columns: 1fr;
      }

      .auth-shell {
        overflow-x: hidden;
        overflow-y: hidden;
      }

      .auth-access {
        min-height: 0;
      }

      .auth-showcase {
        display: none;
      }

      .hero-grid,
      .metrics-grid,
      .overview-grid,
      .onboarding-grid,
      .projects-grid,
      .resume-grid,
      .portfolio-library,
      .resume-options-grid,
      .portfolio-options-grid,
      .linkedin-import-summary,
      .linkedin-import-grid,
      .overview-command,
      .overview-pulse-row,
      .overview-focus-grid,
      .overview-details-grid,
      .professional-plan-grid,
      .document-hub-grid,
      .job-opportunity-list.is-compact,
      .job-search-form,
      .ai-grid,
      .linkedin-grid,
      .content-grid,
      .preview-grid,
      .portfolio-sections,
      .field-grid {
        grid-template-columns: 1fr;
      }

      .assistant-action-create,
      .assistant-memory-create {
        grid-template-columns: 1fr 1fr;
      }

      .linkedin-import-field.is-wide {
        grid-column: auto;
      }

      .overview-command-actions {
        justify-content: flex-start;
      }

      .project-row-button,
      .project-detail-grid {
        grid-template-columns: 1fr;
      }

      .template-studio-grid,
      .template-studio-field-grid,
      .plan-comparison-grid {
        grid-template-columns: 1fr;
      }

      .plan-tier-card { min-height: auto; }
    }

    @media (min-width: 761px) and (max-height: 820px) {
      .auth-access {
        gap: 16px;
        padding-top: 20px;
        padding-bottom: 20px;
      }

      .auth-access-top {
        gap: 10px;
      }

      .auth-back-link {
        min-height: 34px;
        padding-block: 6px;
      }

      .auth-brand img {
        width: 46px;
        height: 46px;
      }

      .auth-brand span {
        display: none;
      }

      .auth-card {
        align-self: start;
        gap: 10px;
      }

      .auth-card-heading h1 {
        font-size: clamp(2rem, 5vh, 2.55rem);
      }

      .auth-card-heading p {
        margin-top: 7px;
        line-height: 1.4;
      }

      .auth-linkedin,
      .auth-actions .btn.primary {
        min-height: 50px;
      }

      .auth-benefits {
        display: none;
      }

      .auth-showcase {
        height: 100dvh;
        align-content: start;
        gap: 14px;
        padding: 18px clamp(24px, 4vw, 54px);
        overflow: hidden;
      }

      .auth-showcase-heading {
        gap: 4px;
      }

      .auth-showcase-brand strong {
        font-size: clamp(1.65rem, 4vh, 2.15rem);
      }

      .auth-product-preview {
        height: min(520px, calc(100dvh - 116px));
        min-height: 0;
      }

      .auth-preview-sidebar {
        padding-block: 18px;
      }

      .auth-preview-main {
        gap: 10px;
        padding: 18px;
      }

      .auth-preview-card {
        padding: 15px;
      }

      .auth-preview-chat {
        margin-top: 10px;
        padding: 12px;
      }

      .auth-preview-chips {
        margin-top: 9px;
      }

      .auth-preview-grid {
        gap: 10px;
      }

      .auth-preview-grid .auth-preview-card {
        min-height: 132px;
      }

      .auth-preview-grid h3 {
        margin-top: 11px;
      }

      .auth-shell.is-signup .auth-card {
        gap: 7px;
      }

      .auth-shell.is-signup .auth-card-heading p,
      .auth-shell.is-signup .auth-divider,
      .auth-shell.is-signup .auth-legal-note {
        display: none;
      }
    }

    @media (min-width: 761px) and (max-height: 680px) {
      .auth-access {
        gap: 8px;
        padding: 12px 24px;
      }

      .auth-access-top {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
      }

      .auth-access-head {
        display: contents;
      }

      .auth-back-link {
        width: 38px;
        min-height: 38px;
        justify-content: center;
        padding: 6px;
      }

      .auth-back-link span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }

      .auth-brand {
        justify-self: center;
      }

      .auth-brand img {
        width: 38px;
        height: 38px;
        border-radius: 12px;
      }

      .auth-brand strong {
        font-size: 1.3rem;
      }

      .auth-access-head .language-switcher .select,
      body.theme-dark .auth-access-head .language-switcher .select {
        min-width: 106px;
        max-width: 106px;
        min-height: 38px;
        padding: 7px 9px;
        font-size: .72rem;
      }

      .auth-card {
        gap: 6px;
      }

      .auth-card-heading h1 {
        font-size: 1.72rem;
        line-height: 1;
      }

      .auth-card-heading p {
        max-width: none;
        margin-top: 3px;
        font-size: .72rem;
        line-height: 1.2;
      }

      .auth-linkedin {
        min-height: 40px;
      }

      .auth-divider {
        gap: 9px;
        font-size: .68rem;
      }

      .auth-toggle {
        padding: 3px;
      }

      .auth-mode-btn {
        height: 34px;
        font-size: .82rem;
      }

      .auth-card .field {
        gap: 4px;
      }

      .auth-card .field label {
        font-size: .67rem;
      }

      .auth-access .input,
      body.theme-dark .auth-access .input {
        min-height: 40px;
        padding-block: 7px;
      }

      .auth-shell .status {
        min-height: 32px;
        padding-block: 5px;
        font-size: .67rem;
      }

      .auth-actions {
        gap: 5px;
      }

      .auth-actions .auth-forgot {
        min-height: 15px;
        font-size: .7rem;
      }

      .auth-actions .btn.primary {
        min-height: 42px;
      }

      .auth-legal-note {
        display: block;
        font-size: .58rem;
        line-height: 1.15;
      }

      .auth-showcase {
        gap: 9px;
        padding: 12px clamp(20px, 3vw, 42px);
      }

      .auth-showcase-heading {
        gap: 2px;
      }

      .auth-showcase-heading p {
        font-size: .76rem;
      }

      .auth-product-preview {
        height: calc(100dvh - 82px);
      }
    }

    @media (min-width: 761px) and (max-height: 540px) {
      .auth-access {
        gap: 5px;
        padding-block: 7px;
      }

      .auth-access-top {
        gap: 7px;
      }

      .auth-back-link,
      .auth-brand img {
        width: 32px;
        height: 32px;
        min-height: 32px;
      }

      .auth-brand strong {
        font-size: 1.12rem;
      }

      .auth-access-head .language-switcher .select,
      body.theme-dark .auth-access-head .language-switcher .select {
        min-width: 98px;
        max-width: 98px;
        min-height: 32px;
        padding-block: 4px;
        font-size: .66rem;
      }

      .auth-card {
        gap: 4px;
      }

      .auth-card-heading h1 {
        font-size: 1.42rem;
      }

      .auth-card-heading p {
        margin-top: 2px;
        font-size: .65rem;
        line-height: 1.1;
      }

      .auth-linkedin {
        min-height: 34px;
        font-size: .76rem;
      }

      .auth-divider {
        min-height: 14px;
        font-size: .6rem;
      }

      .auth-mode-btn {
        height: 29px;
        font-size: .72rem;
      }

      .auth-card .field {
        gap: 2px;
      }

      .auth-card .field label {
        font-size: .59rem;
      }

      .auth-access .input,
      body.theme-dark .auth-access .input {
        min-height: 34px;
        padding-block: 5px;
        font-size: .75rem;
      }

      .auth-shell .status {
        min-height: 25px;
        padding-block: 3px;
        font-size: .59rem;
      }

      .auth-actions {
        gap: 3px;
      }

      .auth-actions .auth-forgot {
        font-size: .62rem;
      }

      .auth-actions .btn.primary {
        min-height: 34px;
        font-size: .76rem;
      }

      .auth-legal-note {
        font-size: .5rem;
        line-height: 1.05;
      }

      .auth-showcase {
        gap: 6px;
        padding-block: 7px;
      }

      .auth-showcase-brand {
        gap: 7px;
      }

      .auth-showcase-brand strong {
        font-size: 1.28rem;
      }

      .auth-showcase-heading p {
        font-size: .64rem;
      }

      .auth-product-preview {
        height: calc(100dvh - 58px);
      }

      .auth-preview-sidebar {
        gap: 4px;
        padding: 10px 9px;
      }

      .auth-preview-logo img {
        width: 30px;
        height: 30px;
        margin: 0 6px 5px;
      }

      .auth-preview-nav {
        padding: 6px 8px;
        font-size: .63rem;
      }

      .auth-preview-plan {
        padding: 7px 8px;
        font-size: .58rem;
        line-height: 1.25;
      }

      .auth-preview-main {
        gap: 6px;
        padding: 10px;
      }

      .auth-preview-welcome h2 {
        font-size: 1.1rem;
      }

      .auth-preview-welcome p {
        margin-top: 2px;
        font-size: .62rem;
      }

      .auth-preview-card {
        padding: 9px;
      }

      .auth-preview-card-head {
        gap: 7px;
        font-size: .72rem;
      }

      .auth-preview-card-head i {
        width: 27px;
        height: 27px;
      }

      .auth-preview-chat {
        margin-top: 6px;
        padding: 7px;
        font-size: .61rem;
      }

      .auth-preview-chips {
        gap: 4px;
        margin-top: 5px;
      }

      .auth-preview-chips span {
        padding: 4px 6px;
        font-size: .53rem;
      }

      .auth-preview-grid {
        gap: 6px;
      }

      .auth-preview-grid .auth-preview-card {
        min-height: 95px;
      }

      .auth-preview-grid h3 {
        margin: 6px 0 3px;
        font-size: .76rem;
      }

      .auth-preview-grid p {
        font-size: .57rem;
        line-height: 1.3;
      }

      .auth-preview-progress {
        margin-top: 7px;
      }

      .auth-preview-match {
        margin-top: 6px;
        padding: 4px 6px;
        font-size: .55rem;
      }
    }

    @media (max-width: 760px) {
      html,
      body,
      .app-shell,
      .main,
      .view {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      body { touch-action: pan-y; }

      .app-shell,
      .main,
      .main > *,
      [data-view],
      .hero-card,
      .panel,
      .list-card,
      .projects-shell,
      .projects-table-card,
      .project-row,
      .project-row-button {
        max-width: 100%;
        min-width: 0;
      }

      .app-shell { overflow-x: hidden; }

      .sticky-plan-cta {
        top: 14px;
        right: 14px;
        min-width: 0;
        max-width: calc(100vw - 86px);
        padding: 9px 11px 9px 13px;
        border-radius: 16px;
      }

      .sticky-plan-cta small { font-size: 0.62rem; }
      .sticky-plan-cta strong { font-size: 0.82rem; }
      .sticky-plan-cta-arrow { width: 28px; height: 28px; }

      .section-head {
        align-items: stretch;
        flex-direction: column;
      }

      .section-head > .btn {
        width: 100%;
        height: auto;
        min-height: 48px;
        padding-block: 12px;
        white-space: normal;
      }

      .auth-shell {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
      }

      .auth-layout {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        grid-template-columns: 1fr;
      }

      .auth-access {
        height: 100dvh;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: safe center;
        gap: clamp(7px, 1.5dvh, 14px);
        padding: clamp(10px, 2dvh, 18px) 16px max(clamp(14px, 2dvh, 20px), env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
      }

      .auth-access-top {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      .auth-back-link {
        width: 36px;
        min-height: 36px;
        justify-content: center;
        padding: 6px;
      }

      .auth-back-link span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }

      .auth-access-head {
        display: contents;
      }

      .auth-brand {
        justify-self: center;
        gap: 10px;
      }

      .auth-brand img {
        width: 42px;
        height: 42px;
        border-radius: 13px;
      }

      .auth-brand strong {
        font-size: 1.4rem;
      }

      .auth-brand span {
        display: none;
      }

      .auth-access-head .language-switcher .select,
      body.theme-dark .auth-access-head .language-switcher .select {
        min-width: 102px;
        max-width: 102px;
        min-height: 38px;
        padding: 7px 9px;
        font-size: .76rem;
      }

      .auth-showcase {
        display: none;
      }

      .auth-card {
        width: 100%;
        align-self: stretch;
        gap: clamp(7px, 1.15dvh, 11px);
      }

      .auth-card-heading h1 {
        font-size: clamp(1.78rem, 8vw, 2.25rem);
        line-height: 1.02;
      }

      .auth-card-heading p {
        margin-top: 4px;
        font-size: .84rem;
        line-height: 1.3;
      }

      .auth-linkedin {
        min-height: 46px;
      }

      .auth-divider {
        gap: 10px;
      }

      .auth-toggle {
        padding: 3px;
      }

      .auth-mode-btn {
        height: 40px;
      }

      .auth-access .input,
      body.theme-dark .auth-access .input {
        min-height: 44px;
        padding-block: 9px;
      }

      .auth-actions .btn.primary {
        min-height: 46px;
      }

      .auth-benefits {
        display: none;
      }

      .auth-mode-btn {
        min-width: 0;
        padding-inline: 8px;
        font-size: 0.92rem;
      }

      .auth-card .field {
        gap: 5px;
      }

      .auth-shell .status {
        padding-block: 7px;
      }

      .auth-forgot {
        font-size: .75rem;
      }

      .auth-legal-note {
        font-size: .65rem;
        line-height: 1.3;
      }

      .auth-shell.is-keyboard-open {
        height: 100dvh;
        overflow-y: auto;
      }

      .auth-shell.is-keyboard-open .auth-layout,
      .auth-shell.is-keyboard-open .auth-access {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
      }

      .password-recovery-modal {
        align-items: end;
        padding: 12px;
      }

      .password-recovery-card {
        max-height: calc(100dvh - 24px);
        padding: 22px 18px;
        border-radius: 22px;
      }

      .app-shell {
        padding: 14px;
      }

      .mobile-sidebar-toggle {
        display: inline-flex;
      }

      .sidebar-mobile-backdrop {
        display: block;
      }

      .hero-card,
      .panel,
      .list-card,
      .project-card,
      .timeline-card,
      .canvas-card,
      .draft-card,
      .preview-card,
      .detail-card,
      .sidebar {
        border-radius: 24px;
      }

      .asset-toolbar,
      .ai-inline-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .asset-toolbar .btn,
      .ai-inline-actions .btn {
        width: 100%;
      }

      .assistant-chat-composer,
      .assistant-action-create,
      .assistant-memory-create,
      .professional-action-item,
      .notification-item,
      .job-opportunity-list:not(.is-compact) .job-opportunity-card {
        grid-template-columns: 1fr;
      }

      .job-match-score {
        width: 64px;
        height: 64px;
      }

      .job-search-context,
      .job-tabs {
        align-items: stretch;
      }

      .job-search-context {
        display: grid;
      }

      .job-tabs {
        display: grid;
        grid-template-columns: 1fr;
      }

      .assistant-chat-composer .btn,
      .assistant-action-create .btn,
      .assistant-memory-create .btn,
      .notification-actions .btn {
        width: 100%;
      }

      .notification-actions {
        justify-content: stretch;
      }

      .asset-item {
        align-items: flex-start;
        flex-direction: column;
      }

      .asset-item strong,
      .asset-item span {
        overflow-wrap: anywhere;
      }

      .projects-toolbar-group {
        width: 100%;
      }

      .search-input {
        min-width: 0;
        width: 100%;
      }

      .projects-table-card { padding: 14px; overflow: hidden; }
      .projects-table,
      .projects-table tbody,
      .projects-table tr,
      .projects-table td { display: block; width: 100%; }
      .projects-table colgroup,
      .projects-table thead { display: none; }
      .projects-table { border-spacing: 0; }
      .projects-table tr + tr { margin-top: 12px; }
      .project-row { grid-template-columns: minmax(0, 1fr); }
      .project-row-button { grid-template-columns: minmax(0, 1fr); gap: 14px; }
      .project-row-cell::before,
      .project-row-button > .skills-stack::before {
        display: block;
        margin-bottom: 4px;
        color: var(--text-soft);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .project-row-button > .project-row-cell:nth-child(2)::before { content: "Empresa"; }
      .project-row-button > .project-row-cell:nth-child(3)::before { content: "Tempo"; }
      .project-row-button > .skills-stack::before { width: 100%; content: "Habilidades"; }
      .project-row-button > .project-row-cell:nth-child(5)::before { content: "Status"; }
      .project-row-actions { width: 100%; justify-content: flex-end; }
      .project-action-btn { width: 48px; min-width: 48px; height: 48px; }

      .plan-modal,
      .linkedin-import-modal,
      .template-studio-modal,
      .resume-options-modal { width: 100%; max-width: 100%; overflow-x: hidden; }
      .plan-modal-shell,
      .linkedin-import-shell,
      .template-studio-shell,
      .resume-options-shell { width: 100%; max-width: 100%; overflow-x: hidden; }

      .linkedin-import-modal {
        padding: 12px;
        align-items: stretch;
      }

      .linkedin-import-shell {
        max-height: calc(100vh - 24px);
        padding: 18px;
        border-radius: 22px;
      }

      .template-studio-modal {
        padding: 12px;
        align-items: stretch;
      }

      .template-studio-shell {
        max-height: calc(100vh - 24px);
        padding: 18px;
        border-radius: 22px;
      }

      .template-studio-mini {
        min-height: 420px;
      }

      .template-studio-mini .template-preview-window {
        height: 380px;
      }

      .sidebar {
        position: fixed;
        top: 14px;
        left: 14px;
        width: min(280px, calc(100vw - 28px));
        height: calc(100vh - 28px);
        transform: translateX(calc(-100% - 20px));
        transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
      }

      .sidebar:hover,
      .sidebar:focus-within {
        width: min(280px, calc(100vw - 28px));
      }

      .app-shell.is-mobile-nav-open .sidebar {
        transform: translateX(0);
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
      }

      .theme-toggle {
        margin: 4px 0 8px;
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--line);
        max-height: 46px;
        opacity: 1;
        padding: 5px;
        pointer-events: auto;
        visibility: visible;
      }

      .brand,
      .sidebar:hover .brand,
      .sidebar:focus-within .brand {
        justify-content: flex-start;
        gap: 10px;
      }

      .brand strong,
      .sidebar:hover .brand strong,
      .sidebar:focus-within .brand strong,
      .nav-main > span:not(.nav-icon),
      .sidebar:hover .nav-main > span:not(.nav-icon),
      .sidebar:focus-within .nav-main > span:not(.nav-icon),
      .user-card-copy,
      .sidebar:hover .user-card-copy,
      .sidebar:focus-within .user-card-copy {
        max-width: 180px;
        opacity: 1;
        overflow: visible;
        transform: translateX(0);
        pointer-events: auto;
      }

      .nav-link,
      .sidebar:hover .nav-link,
      .sidebar:focus-within .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding-inline: 12px;
      }

      .nav-main,
      .sidebar:hover .nav-main,
      .sidebar:focus-within .nav-main {
        justify-content: flex-start;
      }

      .user-card-sidebar,
      .sidebar:hover .user-card-sidebar,
      .sidebar:focus-within .user-card-sidebar {
        flex-basis: auto;
        align-items: stretch;
        min-height: auto;
        max-height: none;
      }

      .main {
        margin-left: 0;
        padding-top: 60px;
      }
    }
    .language-switcher {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .language-switcher label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .language-switcher .select {
      min-width: 150px;
      width: auto;
    }

    .instagram-studio-hero {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
      gap: 24px;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xxl);
      background: linear-gradient(135deg, #10271e 0%, #183d2d 68%, #d1ae43 160%);
      color: #f7faf8;
      box-shadow: var(--shadow);
    }

    .instagram-studio-hero::after {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      right: -80px;
      bottom: -160px;
      border-radius: 50%;
      background: #ffda6a;
      filter: blur(2px);
      opacity: .85;
      z-index: 0;
    }

    .instagram-studio-hero > * { position: relative; z-index: 1; }

    .instagram-studio-hero h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(2rem, 4vw, 4.6rem); line-height: .98; letter-spacing: -.06em; }
    .instagram-studio-hero p { max-width: 700px; margin: 0; color: rgba(247, 250, 248, .76); font-size: 1.02rem; line-height: 1.7; }
    .instagram-hero-side { position: relative; z-index: 1; display: grid; align-content: end; gap: 10px; }
    .instagram-hero-note { padding: 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(5,17,12,.34); backdrop-filter: blur(10px); }
    .instagram-hero-note strong, .instagram-hero-note span { display: block; }
    .instagram-hero-note span { margin-top: 5px; color: rgba(255,255,255,.7); font-size: .85rem; }

    .editorial-mix {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0;
    }

    .editorial-mix-card { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
    .editorial-mix-card strong { display: block; font-size: 1.5rem; letter-spacing: -.04em; }
    .editorial-mix-card span { color: var(--text-soft); font-size: .82rem; }
    .editorial-mix-card.is-gold { background: var(--butter); color: #172018; }
    .editorial-mix-card.is-gold span { color: #5e552f; }

    .instagram-studio-grid {
      display: grid;
      grid-template-columns: minmax(250px, .72fr) minmax(340px, 1.15fr) minmax(280px, .85fr);
      gap: 16px;
      align-items: start;
    }

    .instagram-panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
    .instagram-panel h3 { margin: 0 0 6px; }
    .instagram-brief-grid { display: grid; gap: 13px; margin-top: 18px; }
    .instagram-brief-grid .field label { display: block; margin-bottom: 7px; }
    .instagram-generate { width: 100%; margin-top: 4px; background: #f3ca4d; color: #172018; border-color: transparent; }
    .instagram-generate:hover { background: #ffdb69; }
    .instagram-research-toggle { display: flex; gap: 9px; align-items: flex-start; color: var(--text-soft); font-size: .82rem; line-height: 1.45; }

    .instagram-preview-panel { position: sticky; top: 18px; }
    .instagram-canvas-shell { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 480px; margin-top: 16px; padding: 20px; border-radius: 22px; background: repeating-linear-gradient(45deg, rgba(127,127,127,.08) 0 10px, transparent 10px 20px), var(--surface-soft); }
    .instagram-canvas-shell canvas { display: block; width: min(100%, 430px); height: auto; max-height: 620px; border-radius: 5px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
    .instagram-preview-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
    .instagram-preview-nav button { min-width: 44px; }
    .instagram-slide-count { font-size: .82rem; color: var(--text-soft); }
    .instagram-version-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
    .instagram-version-switch .btn { min-height: 42px; padding: 9px 12px; border-color: transparent; }
    .instagram-version-switch .btn.is-active { border-color: rgba(120,230,164,.48); background: rgba(120,230,164,.15); color: var(--success); box-shadow: inset 0 0 0 1px rgba(120,230,164,.08); }

    .instagram-editor-empty { min-height: 380px; display: grid; place-items: center; text-align: center; color: var(--text-soft); }
    .instagram-editor-fields { display: grid; gap: 12px; margin-top: 15px; }
    .instagram-editor-fields textarea { min-height: 105px; }
    .instagram-slide-editor { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
    .instagram-slide-editor strong { display: block; margin-bottom: 10px; }
    .instagram-editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
    .instagram-editor-actions .is-wide { grid-column: 1 / -1; }
    .instagram-sources { display: grid; gap: 8px; margin-top: 16px; }
    .instagram-source { display: block; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
    .instagram-source strong, .instagram-source span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .instagram-source span { margin-top: 3px; color: var(--text-soft); font-size: .75rem; }

    .instagram-history { margin-top: 18px; }
    .instagram-history-toolbar { display: flex; align-items: center; gap: 8px; }
    .instagram-history-toolbar .btn { min-width: 44px; padding-inline: 13px; }
    .instagram-history-grid { display: flex; gap: 14px; margin-top: 16px; padding: 2px 2px 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; touch-action: pan-x pan-y; }
    .instagram-history-card { position: relative; flex: 0 0 clamp(250px, 29vw, 350px); display: grid; gap: 0; min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); scroll-snap-align: start; overflow: hidden; }
    .instagram-history-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
    .instagram-history-card.is-queued { border-color: rgba(244,202,82,.52); box-shadow: inset 0 0 0 1px rgba(244,202,82,.12); }
    .instagram-history-card.is-published { border-color: rgba(120,230,164,.7); background: color-mix(in srgb, var(--surface) 88%, rgba(120,230,164,.12)); box-shadow: inset 0 0 0 1px rgba(120,230,164,.2); }
    .instagram-history-open { display: grid; gap: 11px; width: 100%; min-height: 178px; padding: 17px 92px 17px 17px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
    .instagram-history-delete { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,128,140,.24); border-radius: 12px; background: rgba(189,84,84,.09); color: var(--danger); cursor: pointer; }
    .instagram-history-delete:hover { background: rgba(189,84,84,.18); }
    .instagram-history-queue { position: absolute; top: 12px; right: 52px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(244,202,82,.34); border-radius: 12px; background: rgba(244,202,82,.1); color: var(--gold); font-size: 1rem; cursor: pointer; }
    .instagram-history-queue:hover { background: rgba(244,202,82,.2); }
    .instagram-history-queue.is-published { border-color: rgba(120,230,164,.78); background: rgba(120,230,164,.2); color: #78e6a4; box-shadow: 0 0 0 2px rgba(120,230,164,.08); }
    .instagram-history-queue.is-published:hover { background: rgba(120,230,164,.3); }
    .instagram-history-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .instagram-history-card h4 { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .instagram-history-card p { margin: 0; color: var(--text-soft); font-size: .82rem; }
    .instagram-bucket-pill { display: inline-flex; width: fit-content; padding: 6px 9px; border-radius: 999px; background: var(--butter); color: #3d361c; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
    .instagram-workflow-pill { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(244,202,82,.14); color: var(--gold); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
    .instagram-workflow-pill.is-published { color: var(--success); background: rgba(120,230,164,.14); }
    .instagram-queue-card-action { width: calc(100% - 28px); margin: 0 14px 14px; }
    .instagram-publication-queue { margin-top: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, rgba(244,202,82,.12)), var(--surface)); }
    .instagram-publication-queue .instagram-history-grid { min-height: 190px; }
    .instagram-workflow-action { border-color: rgba(244,202,82,.32); color: var(--gold); }
    .instagram-published-action { border-color: rgba(120,230,164,.34); color: var(--success); }

    @media (max-width: 1180px) {
      .instagram-studio-grid { grid-template-columns: minmax(240px, .8fr) minmax(340px, 1.2fr); }
      .instagram-editor-panel { grid-column: 1 / -1; }
    }

    @media (max-width: 760px) {
      .instagram-studio-hero, .instagram-studio-grid { grid-template-columns: 1fr; }
      .instagram-studio-hero { padding: 25px 20px; }
      .instagram-hero-side { display: none; }
      .editorial-mix { grid-template-columns: 1fr 1fr; }
      .instagram-preview-panel { position: static; }
      .instagram-canvas-shell { min-height: 360px; padding: 12px; }
      .instagram-history-card { flex-basis: min(82vw, 310px); }
      .instagram-editor-actions { grid-template-columns: 1fr; }
      .instagram-editor-actions .is-wide { grid-column: auto; }
    }

    @media (max-width: 760px) and (max-height: 700px) {
      .auth-access {
        gap: 6px;
        padding-block: 8px;
      }

      .auth-brand img {
        width: 36px;
        height: 36px;
      }

      .auth-brand strong {
        font-size: 1.2rem;
      }

      .auth-card {
        gap: 6px;
      }

      .auth-card-heading h1 {
        font-size: 1.7rem;
      }

      .auth-card-heading p {
        font-size: .76rem;
        line-height: 1.2;
      }

      .auth-linkedin,
      .auth-actions .btn.primary {
        min-height: 42px;
      }

      .auth-mode-btn {
        height: 36px;
      }

      .auth-access .input,
      body.theme-dark .auth-access .input {
        min-height: 42px;
        padding-block: 7px;
      }

      .auth-shell .status {
        min-height: 34px;
        padding-block: 5px;
        font-size: .68rem;
      }

      .auth-legal-note {
        font-size: .6rem;
        line-height: 1.2;
        min-height: 2.4em;
        padding: 2px 6px 4px;
        overflow: visible;
      }
    }

    @media (max-width: 760px) and (max-height: 610px) {
      .auth-access {
        gap: 4px;
        padding-block: 6px;
      }

      .auth-access-top {
        gap: 6px;
      }

      .auth-back-link,
      .auth-brand img {
        width: 32px;
        height: 32px;
        min-height: 32px;
      }

      .auth-brand strong {
        font-size: 1.08rem;
      }

      .auth-access-head .language-switcher .select,
      body.theme-dark .auth-access-head .language-switcher .select {
        min-width: 96px;
        max-width: 96px;
        min-height: 32px;
        padding-block: 4px;
        font-size: .66rem;
      }

      .auth-card {
        gap: 4px;
      }

      .auth-card-heading h1 {
        font-size: 1.42rem;
      }

      .auth-card-heading p {
        margin-top: 2px;
        font-size: .65rem;
        line-height: 1.1;
      }

      .auth-linkedin {
        min-height: 35px;
        font-size: .76rem;
      }

      .auth-divider {
        min-height: 14px;
        font-size: .62rem;
      }

      .auth-mode-btn {
        height: 30px;
        font-size: .74rem;
      }

      .auth-card .field {
        gap: 2px;
      }

      .auth-card .field label {
        font-size: .61rem;
      }

      .auth-access .input,
      body.theme-dark .auth-access .input {
        min-height: 35px;
        padding-block: 5px;
        font-size: .76rem;
      }

      .auth-shell .status {
        min-height: 27px;
        padding-block: 3px;
        font-size: .61rem;
      }

      .auth-actions {
        gap: 3px;
      }

      .auth-actions .auth-forgot {
        min-height: 14px;
        font-size: .62rem;
      }

      .auth-actions .btn.primary {
        min-height: 36px;
        font-size: .78rem;
      }

      .auth-legal-note {
        display: block;
        min-height: 2.3em;
        padding: 1px 6px 3px;
        font-size: .54rem;
        line-height: 1.15;
      }
    }

    .support-launcher {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: calc(var(--layer-sidebar) + 18);
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 18px;
      border: 1px solid rgba(127, 244, 189, 0.28);
      border-radius: 999px;
      background: linear-gradient(135deg, #176c51, #0e4b3b);
      color: #f4fff8;
      box-shadow: 0 16px 36px rgba(4, 30, 22, 0.28);
      font-weight: 800;
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    }

    .support-launcher:hover {
      transform: translateY(-2px);
      filter: saturate(1.08);
      box-shadow: 0 20px 44px rgba(4, 30, 22, 0.34);
    }

    .support-launcher svg {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
    }

    .support-modal {
      position: fixed;
      inset: 0;
      z-index: var(--layer-modal-priority);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      overflow-y: auto;
      background: rgba(3, 14, 10, 0.72);
      backdrop-filter: blur(12px);
    }

    .support-modal.is-open {
      display: flex;
    }

    .support-modal-card {
      width: min(590px, 100%);
      max-height: calc(100vh - 48px);
      padding: 26px;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: var(--surface-solid);
      box-shadow: 0 32px 90px rgba(0, 0, 0, 0.34);
    }

    .support-modal-card .modal-head {
      margin-bottom: 20px;
    }

    .support-modal-card h2 {
      margin: 4px 0 7px;
      font-size: clamp(1.45rem, 3vw, 2rem);
      letter-spacing: -0.045em;
    }

    .support-modal-card .modal-head p {
      max-width: 470px;
      margin: 0;
      line-height: 1.55;
    }

    .support-form {
      display: grid;
      gap: 16px;
    }

    .support-field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .support-field-grid .field {
      display: grid;
      gap: 7px;
    }

    .support-field-grid .field > span {
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .support-field-grid .is-wide {
      grid-column: 1 / -1;
    }

    .support-message {
      min-height: 150px;
      resize: vertical;
    }

    .support-contact-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 13px 15px;
      border: 1px solid color-mix(in srgb, var(--success) 22%, var(--line));
      border-radius: 16px;
      background: color-mix(in srgb, var(--success) 8%, var(--surface-soft));
      color: var(--text-soft);
      font-size: 0.78rem;
      line-height: 1.55;
    }

    .support-contact-note > span {
      color: var(--success);
      font-size: 1rem;
    }

    .support-contact-note p {
      margin: 0;
    }

    .support-contact-note a {
      color: var(--success);
      font-weight: 800;
      word-break: break-word;
    }

    .support-status {
      min-height: 20px;
      color: var(--text-soft);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .support-status.is-success {
      color: var(--success);
    }

    .support-status.is-error {
      color: var(--danger);
    }

    .support-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    @media (max-width: 620px) {
      .support-launcher {
        right: 14px;
        bottom: 14px;
        width: 48px;
        padding: 0;
      }

      .support-launcher span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .support-modal {
        align-items: flex-end;
        padding: 0;
      }

      .support-modal-card {
        width: 100%;
        max-height: calc(100vh - 18px);
        padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
      }

      .support-field-grid {
        grid-template-columns: 1fr;
      }

      .support-field-grid .is-wide {
        grid-column: auto;
      }

      .support-actions {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
      }

      .support-actions .btn {
        width: 100%;
      }
    }

    @media (max-height: 900px) {
      .sidebar {
        top: 10px;
        height: calc(100vh - 20px);
        padding-block: 10px;
        gap: 6px;
      }

      .sidebar:hover .theme-toggle,
      .sidebar:focus-within .theme-toggle,
      .theme-toggle {
        margin-block: 0 4px;
      }

      .side-nav {
        gap: 2px;
      }

      .nav-link {
        min-height: 38px;
        padding-block: 2px;
      }

      .nav-icon {
        width: 30px;
        height: 30px;
      }

      .sidebar-footer {
        padding-top: 4px;
      }

      .sidebar-logout {
        height: 42px;
      }

      .brand-sidebar {
        min-height: 48px;
        padding-top: 8px;
      }
    }