/* ============================================================
   AI Dare — Neo-Brutalist Design System v4.0
   Based on NPS YouDare Design System 2.0
   Brutalismo editorial: bordas sólidas, sem raio, sombras geométricas
   ============================================================ */

/* === CUSTOM FONTS === */
@font-face {
    font-family: 'Paytone One';
    src: url('../../assets/fonts/PaytoneOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Alice';
    src: url('../../assets/fonts/Alice-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Brand Colors — Neo-Brutalist Palette */
    --yellow:        #F0E000;
    --magenta:       #F000B0;
    --cyan:          #30B0F0;
    --ink:           #000000;

    /* Compat aliases */
    --primary:       #000000;
    --primary-dark:  #000000;
    --primary-light: #1a1a1a;
    --accent:        #F000B0;
    --secondary:     #F0E000;
    --secondary-light: #FFFBD0;

    /* Backgrounds */
    --bg:            #F4F2ED;
    --bg-cream:      #F4F2ED;
    --bg-white:      #FFFFFF;
    --card:          #FFFFFF;
    --bg-dark:       #000000;
    --bg-sidebar:    #000000;
    --bg-overlay:    rgba(0, 0, 0, 0.6);
    --bg-focus:      #FFFBD0;

    /* Text */
    --text:          #000000;
    --text-dark:     #000000;
    --text-body:     #000000;
    --text-muted:    #6B6B6B;
    --text-light:    #999999;
    --text-white:    #FFFFFF;

    /* Borders — all solid black */
    --border:        #000000;
    --border-light:  #000000;
    --border-focus:  var(--magenta);
    --border-w:      2px;

    /* Status */
    --success:       #0BB26C;
    --success-light: #e6f7ef;
    --warning:       #F5A300;
    --warning-light: #fff6e0;
    --danger:        #E6264A;
    --danger-light:  #fde8ec;
    --info:          #30B0F0;
    --info-light:    #e6f4fd;
    --green:         #0BB26C;
    --amber:         #F5A300;
    --red:           #E6264A;
    --light:         #EEEEEE;

    /* Shadows — geometric / solid */
    --shadow-sm:     3px 3px 0 var(--ink);
    --shadow-md:     6px 6px 0 var(--ink);
    --shadow-lg:     6px 6px 0 var(--ink);
    --shadow-xl:     8px 8px 0 var(--ink);
    --shadow-magenta: 4px 4px 0 var(--magenta);
    --shadow-yellow:  4px 4px 0 var(--yellow);

    /* Radius — ZERO everywhere (brutalist) */
    --radius-sm:     0px;
    --radius-md:     0px;
    --radius-lg:     0px;
    --radius-xl:     0px;
    --radius-full:   0px;
    --radius:        0px;

    /* Spacing */
    --space-xs:      4px;
    --space-sm:      8px;
    --space-md:      16px;
    --space-lg:      24px;
    --space-xl:      32px;
    --space-2xl:     48px;

    /* Typography */
    --font-family:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading:  'Paytone One', 'Inter', sans-serif;
    --font-serif:    'Alice', Georgia, serif;
    --font-xs:       11px;
    --font-sm:       13px;
    --font-base:     14.5px;
    --font-md:       15px;
    --font-lg:       18px;
    --font-xl:       22px;
    --font-2xl:      28px;

    /* Layout */
    --navbar-height: 56px;
    --transition:    all .12s ease;
}

/* === TYPOGRAPHY === */
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: 1.5;
    color: var(--text-body);
    background: var(--bg);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
h1 { font-size: var(--font-2xl); }
h2 { font-size: var(--font-xl); }
h3 { font-size: var(--font-lg); }
h4 { font-size: var(--font-md); }

/* Subtitle class — Alice italic */
.subtitle, .serif {
    font-family: var(--font-serif);
    font-style: italic;
}

a { color: var(--magenta); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--ink); }

/* === LAYOUT SHELL === */
.yd-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ========== TOP NAVBAR ========== */
.yd-navbar {
    background: var(--ink);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    z-index: 9999;
    border-bottom: 2px solid var(--ink);
}

.yd-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--space-lg);
    gap: var(--space-lg);
}

/* Logo/Brand */
.yd-navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
    text-decoration: none;
}

.yd-navbar-brand img {
    height: 32px;
    width: auto;
}

/* Nav menu container */
.yd-navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
}

/* Nav link base styles */
.yd-navbar-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.85);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.yd-navbar-link svg {
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.yd-navbar-link:hover {
    color: var(--yellow);
    background: rgba(0,0,0,.12);
}

.yd-navbar-link.active {
    color: var(--yellow);
    background: rgba(0,0,0,.15);
}

/* Dropdown container */
.yd-navbar-dropdown {
    position: relative;
    display: inline-flex;
}

/* Dropdown panel (hidden by default) */
.yd-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-md);
    min-width: 320px;
    max-width: 380px;
    margin-top: 4px;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, visibility .15s, transform .15s;
    z-index: 10000;
}

/* Multi-column dropdown for large lists */
.yd-dropdown-panel.yd-dropdown-multicol {
    min-width: 600px;
    max-width: 720px;
    flex-direction: row;
    flex-wrap: wrap;
}
.yd-dropdown-panel.yd-dropdown-multicol .yd-dropdown-item {
    width: calc(50% - 4px);
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────
   NOTIFICAÇÕES IN-APP — sininho + dropdown na navbar
   ───────────────────────────────────────────────────────────────── */
.yd-notif-btn { position: relative; }
.yd-notif-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #f32a58; color: #fff;
    border-radius: 8px; font-size: 9px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--ink, #14141a);
    font-family: 'Inter', sans-serif;
}
.yd-notif-panel {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    width: 380px; max-height: 480px;
    background: #14141a;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    display: none; flex-direction: column;
    z-index: 99000;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.yd-notif-panel.open { display: flex; }
.yd-notif-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 12px; font-weight: 800; color: #fff;
    letter-spacing: .5px;
}
.yd-notif-head button {
    background: none; border: none; color: rgba(255,255,255,.5);
    font-size: 10px; font-weight: 600; cursor: pointer;
    font-family: inherit; letter-spacing: .3px;
}
.yd-notif-head button:hover { color: #f3a02a; }
.yd-notif-list { flex: 1; overflow-y: auto; min-height: 0; }
.yd-notif-empty { padding: 30px 18px; text-align: center; font-size: 12px; color: rgba(255,255,255,.4); font-style: italic; }
.yd-notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    cursor: pointer;
    transition: background .12s;
    position: relative;
}
.yd-notif-item:hover { background: rgba(255,255,255,.04); }
.yd-notif-item.unread { background: rgba(243,160,42,.05); }
.yd-notif-item.unread::before {
    content: ''; position: absolute; left: 6px; top: 18px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #f3a02a;
}
.yd-notif-item.unread { padding-left: 20px; }
.yd-notif-title {
    font-size: 12px; font-weight: 800; color: #fff;
    margin-bottom: 4px; line-height: 1.3;
}
.yd-notif-msg {
    font-size: 11px; color: rgba(255,255,255,.7);
    line-height: 1.4; white-space: pre-wrap;
}
.yd-notif-time {
    font-size: 10px; color: rgba(255,255,255,.4);
    margin-top: 6px; font-variant-numeric: tabular-nums;
}

/* Posiciona o painel relativo à navbar-right (que é position:relative? garantir) */
.yd-navbar-right { position: relative; }

/* ─────────────────────────────────────────────────────────────────
   FEEDBACK GLOBAL — botão FAB + modal
   ───────────────────────────────────────────────────────────────── */
/* Feedback FAB — empilhado ACIMA do WhatsApp, lado direito da tela.
   40x40px, só ícone de bug · tooltip no hover */
.yd-feedback-fab {
    position: fixed;
    bottom: 76px;        /* WhatsApp tá em bottom:24, com 40px de altura + 12 gap = 76 */
    right: 24px;
    z-index: 99998;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1a1f;
    color: #f3a02a;
    border: 1.5px solid rgba(243,160,42,.7);
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
    padding: 0;
}
.yd-feedback-fab svg { width: 18px; height: 18px; }
.yd-feedback-fab:hover {
    background: #f3a02a;
    color: #1a1a1f;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(243,160,42,.35);
}
/* Tooltip no hover — aparece à esquerda do botão */
.yd-feedback-fab::before {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.92);
    color: #fff;
    padding: 7px 12px;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.yd-feedback-fab::after {
    content: '';
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(0,0,0,.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
}
.yd-feedback-fab:hover::before, .yd-feedback-fab:hover::after { opacity: 1; }

/* Modal */
.yd-fb-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
    z-index: 100000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    font-family: 'Inter', sans-serif;
}
.yd-fb-overlay.open { display: flex; }
.yd-fb-modal {
    background: #14141a;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    width: 100%; max-width: 560px;
    max-height: 90vh;
    box-shadow: 0 12px 60px rgba(0,0,0,.6);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.yd-fb-header {
    padding: 22px 24px 16px;
    background: linear-gradient(135deg, rgba(243,160,42,.18), rgba(243,160,42,.04));
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.yd-fb-overline { font-size: 9px; font-weight: 800; color: #f3a02a; letter-spacing: 2px; margin-bottom: 4px; }
.yd-fb-title { font-size: 20px; font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 6px; }
.yd-fb-sub { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.45; }
.yd-fb-close {
    background: none; border: none; color: rgba(255,255,255,.5);
    font-size: 26px; line-height: 1; cursor: pointer; padding: 0;
    width: 32px; height: 32px;
    border-radius: 50%; transition: background .15s;
}
.yd-fb-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.yd-fb-body { padding: 18px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.yd-fb-field { margin-bottom: 16px; }
.yd-fb-label {
    display: block;
    font-size: 10px; font-weight: 800; color: rgba(255,255,255,.55);
    letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase;
}
.yd-fb-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.yd-fb-type {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.7); border-radius: 6px;
    padding: 12px 8px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-family: 'Inter', sans-serif; transition: all .15s;
}
.yd-fb-type:hover { background: rgba(243,160,42,.08); border-color: rgba(243,160,42,.3); }
.yd-fb-type.active {
    background: rgba(243,160,42,.15); border-color: #f3a02a; color: #fff;
    box-shadow: 0 0 0 1px rgba(243,160,42,.4) inset;
}
.yd-fb-type-icon { font-size: 22px; }
.yd-fb-type-label { font-size: 11px; font-weight: 700; }
.yd-fb-textarea {
    width: 100%; box-sizing: border-box;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1);
    color: #fff; font-family: 'Inter', sans-serif; font-size: 13px;
    padding: 12px 14px; border-radius: 6px;
    resize: vertical; line-height: 1.5;
}
.yd-fb-textarea:focus { outline: none; border-color: #f3a02a; background: rgba(0,0,0,.55); }
.yd-fb-counter { font-size: 10px; color: rgba(255,255,255,.4); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }
.yd-fb-checkbox {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px; padding: 12px 14px; cursor: pointer;
    transition: all .15s;
}
.yd-fb-checkbox:hover { background: rgba(255,255,255,.06); }
.yd-fb-checkbox input { margin-top: 2px; accent-color: #f3a02a; cursor: pointer; }
.yd-fb-cb-icon { font-size: 18px; }
.yd-fb-cb-text strong { display: block; color: #fff; font-size: 12px; font-weight: 700; }
.yd-fb-cb-text small { display: block; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.4; margin-top: 2px; }
.yd-fb-shot-preview { margin-top: 10px; }
.yd-fb-shot-preview img {
    max-width: 100%; max-height: 160px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.1);
}
.yd-fb-shot-preview .yd-fb-shot-loading { font-size: 11px; color: rgba(255,255,255,.5); font-style: italic; }
.yd-fb-footer {
    padding: 14px 24px;
    background: rgba(0,0,0,.3); border-top: 1px solid rgba(255,255,255,.06);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.yd-fb-status { font-size: 11px; color: rgba(255,255,255,.55); }
.yd-fb-status.error { color: #f87171; }
.yd-fb-status.success { color: #4ade80; }
.yd-fb-btn-primary {
    background: #f3a02a; color: #1a1a1f; border: none;
    padding: 10px 22px; border-radius: 6px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800;
    letter-spacing: .5px; cursor: pointer; transition: all .15s;
}
.yd-fb-btn-primary:hover { background: #e58e1a; }
.yd-fb-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.yd-fb-btn-secondary {
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.1);
    padding: 10px 18px; border-radius: 6px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer;
}
.yd-fb-btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Mobile */
@media(max-width:768px) {
    .yd-feedback-fab { bottom:16px; right:16px; }
}

.yd-navbar-dropdown:hover .yd-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown item */
.yd-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
    text-decoration: none;
    color: var(--text-body);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--light);
    cursor: pointer;
    transition: var(--transition);
}

.yd-dropdown-item:last-child {
    border-bottom: none;
}

.yd-dropdown-item:hover {
    background: var(--bg-focus);
    color: var(--text-dark);
}

.yd-dropdown-item.active {
    background: var(--yellow);
    color: var(--ink);
}

/* Dropdown icon */
.dd-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--ink);
    background: var(--card);
    flex-shrink: 0;
}

.dd-icon svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Dropdown content */
.dd-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dd-name {
    display: flex;
    align-items: center;
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dd-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
    line-height: 1.3;
}

/* Right side user menu */
.yd-navbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Config tool buttons (API Control, Logger) */
.yd-navbar-config-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: rgba(255,255,255,.4);
    border: 1px solid rgba(255,255,255,.1);
    background: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.yd-navbar-config-btn svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yd-navbar-config-btn:hover {
    color: var(--yellow);
    border-color: var(--yellow);
    background: rgba(0,0,0,.15);
}

.yd-navbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 12px;
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
    transition: var(--transition);
}

.yd-navbar-user:hover {
    background: rgba(0,0,0,.2);
    border-color: rgba(255,255,255,.4);
}

.yd-user-avatar {
    width: 28px;
    height: 28px;
    background: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.yd-navbar-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.yd-navbar-user-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.yd-navbar-user-email {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logout button */
.yd-navbar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(255,255,255,.5);
    background: none;
    border: 1px solid rgba(255,255,255,.15);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    padding: 0;
}

.yd-navbar-logout:hover {
    color: #fff;
    background: rgba(0,0,0,.2);
    border-color: rgba(255,255,255,.3);
}

.yd-navbar-logout svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 18px;
    height: 18px;
}

/* DNA Clientes CTA button */
.yd-dna-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--magenta);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .1s, box-shadow .1s;
    margin-left: 8px;
}
.yd-dna-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #000;
    color: #fff;
}
.yd-dna-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #000;
}
.yd-dna-btn svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Mobile hamburger toggle */
.yd-mobile-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding: 6px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yd-mobile-toggle:hover {
    color: var(--yellow);
    border-color: var(--yellow);
}

.yd-mobile-toggle svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Main Area --- */
/* Protected with !important to prevent module CSS `main {}` from overriding */
.yd-main {
    flex: 1;
    min-height: calc(100vh - var(--navbar-height));
    margin-top: var(--navbar-height);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* === STANDARD MODULE HEADER BAR === */
/* Neo-brutalist: black bg, yellow text, magenta accent */
.yd-module-bar {
    background: #FF00B1 !important;
    padding: 16px 28px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    box-shadow: none !important;
    border-bottom: 2px solid #CC008E !important;
}

.yd-module-bar-left {
    display: flex !important;
    align-items: baseline !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.yd-module-bar-name {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--yellow) !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-heading) !important;
}

.yd-module-bar-desc {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.5) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-heading) !important;
    font-style: normal !important;
}

.yd-module-bar-right {
    font-size: 11px !important;
    color: rgba(255,255,255,.4) !important;
    text-align: right !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   DESIGN SYSTEM ENFORCEMENT — Overrides para módulos legados
   Força o brutalist system em todos os módulos carregados no SPA
   ============================================================ */

/* Tipografia global */
.yd-main * {
    font-family: var(--font-family) !important;
}
.yd-main h1, .yd-main h2, .yd-main h3,
.yd-main .heading, .yd-main [class*="-title"],
.yd-main [class*="-heading"] {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
/* Nomes de módulos e títulos de cards — Paytone */
.yd-main .yd-card-title {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}
/* Stat cards da home — Paytone */
.yd-main .yd-stat-value,
.yd-main .yd-stat-label {
    font-family: var(--font-heading) !important;
}
/* Textos em destaque em módulos legados — Paytone */
.yd-main [class*="-client"],
.yd-main [class*="-label"]:not([class*="yd-"]):not([class*="badge"]):not(label),
.yd-main h4, .yd-main h5, .yd-main h6 {
    font-family: var(--font-heading) !important;
}

/* Remover border-radius de todos os elementos filhos */
.yd-main *:not(svg):not(circle):not(path):not(rect):not(ellipse) {
    border-radius: 0 !important;
}

/* Inputs, textareas e selects — padrão brutalist */
.yd-main input:not([type=checkbox]):not([type=radio]):not([type=range]),
.yd-main textarea:not(.ta-result-text),
.yd-main select {
    border: 2px solid var(--ink) !important;
    border-radius: 0 !important;
    background: var(--bg-white) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-sm) !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: box-shadow 0.1s !important;
}
.yd-main input:not([type=checkbox]):not([type=radio]):focus,
.yd-main textarea:not(.ta-result-text):focus,
.yd-main select:focus {
    box-shadow: 3px 3px 0 var(--magenta) !important;
}

/* Botões — padrão brutalist */
.yd-main button:not([class*="yd-"]):not(.yd-btn):not(.dd-close):not(.fav-heart):not(.cf-collapse-btn):not(.cf-pencil-btn):not(.cf-analysis-act-btn),
.yd-main [class*="-btn"]:not([class*="yd-"]):not(.cf-collapse-btn):not(.cf-pencil-btn):not(.cf-analysis-act-btn),
.yd-main [class*="-button"]:not([class*="yd-"]) {
    border-radius: 0 !important;
    font-family: var(--font-family) !important;
    font-weight: 700 !important;
    border: 2px solid var(--ink) !important;
    cursor: pointer !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
}
.yd-main button:not([class*="yd-"]):not(.dd-close):not(.fav-heart):not(.cf-analysis-act-btn):hover,
.yd-main [class*="-btn"]:not([class*="yd-"]):not(.cf-analysis-act-btn):hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--ink) !important;
}

/* Cards e containers — forçar apenas border-radius 0 (sem sobrescrever bordas próprias) */
.yd-main [class*="-card"]:not(.yd-card):not(.stat-card):not(.yd-card-title):not([class*="table"]):not([class*="form"]):not([class*="input"]),
.yd-main [class*="-box"]:not([class*="yd-"]):not([class*="table"]):not([class*="form"]):not([class*="input"]) {
    border-radius: 0 !important;
}

/* Remover gradients de backgrounds — permitir apenas cor sólida */
.yd-main [style*="linear-gradient"]:not(.yd-module-bar) {
    background-image: none !important;
}

/* === LinkedIn Generator — brutalist override === */
.yd-main .co {
    border-radius: 0 !important;
    border: 2px solid var(--ink) !important;
    box-shadow: none !important;
    transition: box-shadow 0.1s, transform 0.1s !important;
}
.yd-main .co.sel {
    border-color: var(--ink) !important;
    background: var(--yellow) !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
}
.yd-main .co:hover:not(.sel) {
    box-shadow: 3px 3px 0 var(--ink) !important;
    transform: translate(-1px, -1px) !important;
}
.yd-main .st {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    color: var(--text-dark) !important;
    text-transform: uppercase !important;
}
.yd-main .cl {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
}

/* === GLOBAL: Hide ALL module-internal headers, login gates, and password modals === */
.yd-main header {
    display: none !important;
}

.yd-main .login-overlay,
.yd-main .password-modal,
.yd-main #passwordGate,
.yd-main .login-box-wrapper {
    display: none !important;
}

/* Ensure dashboard/main content is visible */
.yd-main .dashboard {
    display: block !important;
}

.yd-main #mainContent {
    display: block !important;
}

/* --- Content Area --- */
.yd-content {
    flex: 1;
    padding: var(--space-xl) 44px;
    max-width: 1400px;
    width: 100%;
}

.yd-content-full {
    flex: 1;
    padding: 0;
    width: 100%;
}

/* === COMPONENTS — NEO-BRUTALIST === */

/* Cards */
.yd-card {
    background: var(--card);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: var(--transition);
}

.yd-card:hover {
    box-shadow: 8px 8px 0 var(--ink);
    transform: translate(-2px, -2px);
}

.yd-card-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 2px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: var(--font-sm);
    text-transform: uppercase;
}

.yd-card-body {
    padding: var(--space-lg);
}

.yd-card-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 2px solid var(--ink);
    background: var(--light);
}

/* Buttons — Brutalist */
.yd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 2px solid var(--ink);
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.yd-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.yd-btn-primary {
    background: var(--ink);
    color: var(--yellow);
    border-color: var(--ink);
    box-shadow: var(--shadow-magenta);
}
.yd-btn-primary:hover:not(:disabled) {
    background: var(--magenta);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}

.yd-btn-secondary {
    background: var(--card);
    color: var(--ink);
    border-color: var(--ink);
}
.yd-btn-secondary:hover:not(:disabled) {
    background: var(--yellow);
}

.yd-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--ink);
}
.yd-btn-ghost:hover:not(:disabled) {
    background: var(--bg-focus);
    color: var(--ink);
}

.yd-btn-dark {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.yd-btn-dark:hover:not(:disabled) {
    background: var(--magenta);
    color: var(--ink);
}

.yd-btn-success {
    background: var(--green);
    color: #fff;
    border-color: var(--ink);
}
.yd-btn-success:hover:not(:disabled) {
    background: var(--yellow);
    color: var(--ink);
}

.yd-btn-danger {
    background: var(--card);
    color: var(--danger);
    border-color: var(--danger);
}
.yd-btn-danger:hover:not(:disabled) {
    background: var(--danger);
    color: #fff;
}

.yd-btn-sm { padding: 6px 12px; font-size: 10.5px; }
.yd-btn-lg { padding: 14px 22px; font-size: 13px; }
.yd-btn-block { width: 100%; }

/* Badges — Brutalist */
.yd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-family);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1.5px solid var(--ink);
}

.yd-badge-primary { background: var(--magenta); color: #fff; }
.yd-badge-success { background: var(--green); color: #fff; }
.yd-badge-warning { background: var(--amber); color: var(--ink); }
.yd-badge-danger  { background: var(--danger); color: #fff; }
.yd-badge-info    { background: var(--cyan); color: var(--ink); }
.yd-badge-dark    { background: var(--ink); color: var(--yellow); }
.yd-badge-yellow  { background: var(--yellow); color: var(--ink); }
.yd-badge-green   { background: var(--green); color: #fff; }
.yd-badge-pending { background: var(--light); color: var(--ink); }
.yd-badge-sent    { background: var(--yellow); color: var(--ink); }

/* Forms — Brutalist */
.yd-input,
.yd-textarea,
.yd-select {
    width: 100%;
    border: 2px solid var(--ink);
    padding: 11px 14px;
    font-family: var(--font-family);
    font-size: var(--font-base);
    color: var(--text-dark);
    background: var(--card);
    transition: var(--transition);
}

.yd-input:focus,
.yd-textarea:focus,
.yd-select:focus {
    outline: none;
    background: var(--bg-focus);
    border-color: var(--ink);
    box-shadow: none;
}

.yd-input::placeholder,
.yd-textarea::placeholder {
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-style: italic;
}

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

.yd-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.yd-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 4px;
    font-family: var(--font-serif);
    font-style: italic;
}

.yd-form-group {
    margin-bottom: var(--space-lg);
}

/* Tables — Brutalist */
.yd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.yd-table th,
.yd-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--ink);
}

.yd-table th {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    background: var(--light);
    border-bottom: 2px solid var(--ink);
}

.yd-table tbody tr:hover {
    background: var(--bg-focus);
}

/* Modals — Brutalist */
.yd-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

.yd-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.yd-modal {
    background: var(--card);
    border: 3px solid var(--ink);
    box-shadow: var(--shadow-xl);
    max-width: 540px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px 30px;
    transform: translateY(12px);
    transition: transform .2s ease;
}

.yd-modal-overlay.active .yd-modal {
    transform: translateY(0);
}

.yd-modal-header {
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.yd-modal-header h3,
.yd-modal-header h2 {
    font-family: var(--font-heading);
    font-size: 26px;
    text-transform: uppercase;
}

.yd-modal-close {
    width: 32px;
    height: 32px;
    border: 2px solid var(--ink);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: var(--ink);
    transition: var(--transition);
}

.yd-modal-close:hover { background: var(--danger); color: #fff; }

.yd-modal-body { padding: 0; }
.yd-modal-footer {
    padding-top: 18px;
    margin-top: var(--space-md);
    border-top: 2px solid var(--ink);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* Stats / KPI Cards — Brutalist */
.yd-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    margin-bottom: var(--space-xl);
    border: 2px solid var(--ink);
    background: var(--ink);
}

.yd-stat-card {
    background: var(--card);
    padding: 20px 22px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Alternating KPI colors */
.yd-stat-card:nth-child(1) { background: var(--card); }
.yd-stat-card:nth-child(2) { background: var(--yellow); }
.yd-stat-card:nth-child(3) { background: var(--magenta); color: #fff; }
.yd-stat-card:nth-child(4) { background: var(--cyan); }

.yd-stat-card:nth-child(3) .yd-stat-label,
.yd-stat-card:nth-child(3) .yd-stat-value,
.yd-stat-card:nth-child(3) .yd-stat-change { color: #fff; }

.yd-stat-label {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-family);
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.yd-stat-value {
    font-size: 46px;
    font-weight: 400;
    font-family: var(--font-heading);
    color: var(--text-dark);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-top: 6px;
}

.yd-stat-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12.5px;
    opacity: 0.8;
    margin-top: 4px;
}

.yd-stat-change {
    font-size: var(--font-xs);
    font-weight: 700;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.yd-stat-change.up { color: var(--green); }
.yd-stat-change.down { color: var(--danger); }

/* Grid layout helpers */
.yd-grid { display: grid; gap: var(--space-md); }
.yd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.yd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.yd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.yd-flex { display: flex; }
.yd-flex-center { align-items: center; justify-content: center; }
.yd-flex-between { align-items: center; justify-content: space-between; }
.yd-gap-sm { gap: var(--space-sm); }
.yd-gap-md { gap: var(--space-md); }
.yd-gap-lg { gap: var(--space-lg); }

/* Tabs — Brutalist */
.yd-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--ink);
    margin-bottom: var(--space-lg);
}

.yd-tab {
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    border: 2px solid var(--ink);
    border-bottom: none;
    margin-bottom: -2px;
    background: var(--light);
    transition: var(--transition);
}

.yd-tab:hover { background: var(--bg-focus); color: var(--ink); }
.yd-tab.active {
    background: var(--card);
    color: var(--ink);
    border-bottom: 2px solid var(--card);
}

/* Loading */
.yd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
}

.yd-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--light);
    border-top-color: var(--magenta);
    animation: yd-spin .7s linear infinite;
}

@keyframes yd-spin { to { transform: rotate(360deg); } }

.yd-loading-text {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Toasts — Brutalist */
.yd-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.yd-toast {
    background: var(--ink);
    color: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--magenta);
    padding: 14px 20px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 280px;
    animation: yd-toast-in .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.yd-toast.success {
    background: var(--green);
    color: #fff;
    box-shadow: 6px 6px 0 var(--ink);
}
.yd-toast.error {
    background: var(--danger);
    color: #fff;
    box-shadow: 6px 6px 0 var(--ink);
}
.yd-toast.warning {
    background: var(--amber);
    color: var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
}

@keyframes yd-toast-in {
    from { opacity: 0; transform: translateY(80px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Empty states */
.yd-empty {
    text-align: center;
    padding: var(--space-2xl);
}

.yd-empty-icon {
    font-size: 48px;
    margin-bottom: var(--space-md);
    opacity: .4;
}

.yd-empty-text {
    font-size: var(--font-md);
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-style: italic;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--magenta); }

/* === MODULE-SPECIFIC OVERRIDES === */

/* Module content gets scoped inside .module-{name} */
.module-content {
    animation: yd-fade-in .35s ease;
}

@keyframes yd-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* For modules that use their own header gradient — now brutalist */
.yd-module-header {
    background: var(--ink);
    padding: var(--space-lg) var(--space-xl);
    color: var(--yellow);
    border-bottom: 2px solid var(--ink);
}

.yd-module-header h2 {
    color: var(--yellow);
    font-size: var(--font-xl);
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.yd-module-header p {
    color: rgba(255,255,255,.5);
    font-size: var(--font-sm);
    margin-top: 4px;
    font-family: var(--font-serif);
    font-style: italic;
}

/* Selection cards (reusable for linkedingenerator, etc) */
.yd-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.yd-option-card {
    border: 2px solid var(--ink);
    padding: 14px 16px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--card);
}

.yd-option-card:hover {
    background: var(--bg-focus);
    box-shadow: var(--shadow-sm);
}

.yd-option-card.selected {
    background: var(--yellow);
    box-shadow: var(--shadow-sm);
}

.yd-option-icon { font-size: 20px; margin-bottom: 4px; }
.yd-option-label { font-size: var(--font-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.yd-option-desc  { font-size: var(--font-xs); color: var(--text-muted); margin-top: 2px; line-height: 1.3; }

/* Chip/tag selector — Brutalist */
.yd-chip-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.yd-chip {
    padding: 8px 16px;
    border: 2px solid var(--ink);
    background: var(--card);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 5px;
}

.yd-chip:hover { background: var(--bg-focus); color: var(--ink); }
.yd-chip.active { background: var(--ink); border-color: var(--ink); color: var(--yellow); }

/* Post preview card (LinkedIn style) */
.yd-post-preview {
    background: var(--card);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.yd-post-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px solid var(--ink);
}

.yd-post-avatar {
    width: 48px;
    height: 48px;
    background: var(--magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    flex-shrink: 0;
    border: 2px solid var(--ink);
}

.yd-post-body {
    padding: 20px 24px;
    font-size: var(--font-base);
    line-height: 1.75;
    white-space: pre-wrap;
}

/* Kanban board — Brutalist */
.yd-kanban {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: var(--space-md);
    border: 2px solid var(--ink);
    background: var(--ink);
}

.yd-kanban-column {
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    background: var(--bg);
    padding: var(--space-md);
    border-right: 2px solid var(--ink);
}

.yd-kanban-column:last-child { border-right: none; }

.yd-kanban-title {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--ink);
}

.yd-kanban-card {
    background: var(--card);
    border: 2px solid var(--ink);
    padding: 14px;
    margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: var(--transition);
}

.yd-kanban-card:hover {
    box-shadow: var(--shadow-md);
    transform: translate(-2px, -2px);
}

.yd-kanban-card:active { cursor: grabbing; }

/* Progress Bar — Brutalist */
.yd-progress {
    height: 8px;
    background: var(--card);
    border: 2px solid var(--ink);
    overflow: hidden;
}

.yd-progress-fill {
    height: 100%;
    background: var(--magenta);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.yd-progress-label {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.yd-progress-time {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* === RESPONSIVE === */

/* --- Global mobile overflow prevention --- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 1024px) {
    .yd-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .yd-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* --- NAVBAR MOBILE --- */
    .yd-navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #FF00B1;
        flex-direction: column;
        border-bottom: 2px solid var(--ink);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .yd-navbar-menu.open {
        max-height: 500px;
    }

    .yd-mobile-toggle {
        display: flex;
    }

    .yd-navbar-right {
        display: none;
    }

    .yd-dropdown-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid rgba(255,255,255,.08);
        background: rgba(255,255,255,.04);
        min-width: 100%;
        max-width: none;
        margin-top: 0;
        margin-left: var(--space-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .yd-navbar-dropdown.open .yd-dropdown-panel {
        max-height: 500px;
    }

    /* --- LAYOUT MOBILE --- */
    .yd-main {
        margin-top: calc(var(--navbar-height) + 0px);
    }

    .yd-app {
        flex-direction: column;
    }

    .yd-grid-2, .yd-grid-3, .yd-grid-4 {
        grid-template-columns: 1fr;
    }

    .yd-option-grid { grid-template-columns: 1fr; }

    .yd-content { padding: var(--space-md); }

    .yd-kanban { flex-direction: column; }
    .yd-kanban-column { min-width: 100%; max-width: 100%; border-right: none; border-bottom: 2px solid var(--ink); }
    .yd-kanban-column:last-child { border-bottom: none; }

    /* --- MODULE BAR MOBILE --- */
    .yd-module-bar {
        padding: 12px 16px !important;
        min-height: 48px !important;
        flex-wrap: wrap !important;
    }
    .yd-module-bar-name {
        font-size: 16px !important;
    }
    .yd-module-bar-desc {
        font-size: 11px !important;
    }
    .yd-module-bar-right {
        display: none !important;
    }

    /* --- GLOBAL MODULE MOBILE OVERRIDES --- */
    .yd-main * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .yd-main img, .yd-main video, .yd-main canvas, .yd-main iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    .yd-main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .yd-main pre, .yd-main code {
        overflow-x: auto;
        max-width: 100%;
        word-break: break-word;
    }

    /* --- Module: Competitor Intel --- */
    .module-competitor .kpi-strip { flex-wrap: wrap; }
    .module-competitor .kpi { flex: 1 1 45%; min-width: 140px; }
    .module-competitor .charts-grid { grid-template-columns: 1fr !important; }
    .module-competitor .creative-grid { grid-template-columns: 1fr !important; }
    .module-competitor .section { padding: 20px 16px !important; }
    .module-competitor .download-bar { flex-direction: column; gap: 10px; padding: 14px 16px; }
    .module-competitor .chat-box { width: calc(100vw - 32px) !important; right: 16px !important; max-height: 70vh !important; }

    /* --- Module: Disaster Check --- */
    .module-disastercheck .header,
    .module-disastercheck [class*="header"] { padding: 16px 16px !important; }
    .module-disastercheck .search-section,
    .module-disastercheck .results-area,
    .module-disastercheck .history-section { padding-left: 16px !important; padding-right: 16px !important; }
    .module-disastercheck .brand-input { width: 100% !important; }
    .module-disastercheck .criteria-grid { grid-template-columns: 1fr !important; }
    .module-disastercheck .password-box { padding: 24px 16px !important; }
    .module-disastercheck .sentiment-topics .col,
    .module-disastercheck .brandfit-proscons .col { min-width: 100% !important; }

    /* --- Module: LinkedIn Generator --- */
    .module-linkedingenerator .hd,
    .module-linkedingenerator .steps { padding-left: 16px !important; padding-right: 16px !important; }
    .module-linkedingenerator .ct { padding: 12px 16px 40px !important; }
    .module-linkedingenerator .cg,
    .module-linkedingenerator .author-cards { grid-template-columns: 1fr !important; }

    /* --- Module: LinkedIn Strategist --- */
    .module-linkedinstrategist .sidebar { display: none !important; }
    .module-linkedinstrategist .main-area { margin-left: 0 !important; }
    .module-linkedinstrategist .hero { padding: 32px 16px !important; }
    .module-linkedinstrategist .chapter-header { padding: 28px 16px 24px !important; }
    .module-linkedinstrategist .section { padding: 24px 16px !important; }
    .module-linkedinstrategist .chat-panel { width: 100% !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 60vh !important; z-index: 9998 !important; }

    /* --- Module: New Business --- */
    .module-newbusiness .container { padding: 20px 16px !important; }
    .module-newbusiness .card { padding: 20px 16px !important; }
    .module-newbusiness .upload-area { padding: 24px 16px !important; }
    .module-newbusiness .score-section { padding: 20px 16px !important; }
    .module-newbusiness .assessment-grid,
    .module-newbusiness .score-bars,
    .module-newbusiness .input-row { grid-template-columns: 1fr !important; }
    .module-newbusiness .sim-viewport,
    .module-newbusiness .sim-timer-bar { max-width: 100% !important; width: 100% !important; }

    /* --- Module: OOH Check --- */
    .module-oohcheck .container { padding: 20px 16px !important; }
    .module-oohcheck .card { padding: 20px 16px !important; }
    .module-oohcheck .upload-area { padding: 24px 16px !important; }
    .module-oohcheck .score-section { padding: 20px 16px !important; }
    .module-oohcheck .assessment-grid,
    .module-oohcheck .score-bars,
    .module-oohcheck .input-row { grid-template-columns: 1fr !important; }
    .module-oohcheck .sim-viewport,
    .module-oohcheck .sim-timer-bar { max-width: 100% !important; width: 100% !important; }
    .module-oohcheck .empty-state { padding: 32px 16px !important; }

    /* --- Module: Analise Criativo --- */
    .module-analisecriativo [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .module-analisecriativo .container,
    .module-analisecriativo [class*="container"] { padding-left: 16px !important; padding-right: 16px !important; }

    /* --- Module: API Control --- */
    .module-apicontrol [class*="summary"] { grid-template-columns: 1fr 1fr !important; }
    .module-apicontrol .container { padding: 20px 16px !important; }

    /* --- Module: Agentes --- */
    .module-agentes .history-sidebar,
    .module-agentes .chat-sidebar { display: none !important; }
    .module-agentes .chat-main { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }

    /* --- Home module --- */
    .module-home [style*="grid-template-columns"],
    .module-home .module-grid { grid-template-columns: 1fr !important; }
}

/* --- Extra small screens (phones < 480px) --- */
@media (max-width: 480px) {
    .yd-module-bar-left {
        gap: 8px !important;
    }
    .yd-module-bar-name {
        font-size: 14px !important;
    }
    .yd-module-bar-desc {
        display: none !important;
    }

    .yd-content { padding: var(--space-sm); }

    .module-apicontrol [class*="summary"] { grid-template-columns: 1fr !important; }

    .module-competitor .kpi { flex: 1 1 100%; }
    .module-competitor .kpi .num { font-size: 22px; }

    .yd-stat-value { font-size: 36px; }
}

/* Utility classes */
.yd-mt-sm { margin-top: var(--space-sm); }
.yd-mt-md { margin-top: var(--space-md); }
.yd-mt-lg { margin-top: var(--space-lg); }
.yd-mt-xl { margin-top: var(--space-xl); }
.yd-mb-sm { margin-bottom: var(--space-sm); }
.yd-mb-md { margin-bottom: var(--space-md); }
.yd-mb-lg { margin-bottom: var(--space-lg); }
.yd-text-center { text-align: center; }
.yd-text-right { text-align: right; }
.yd-text-muted { color: var(--text-muted); }
.yd-text-sm { font-size: var(--font-sm); }
.yd-text-xs { font-size: var(--font-xs); }
.yd-font-bold { font-weight: 700; }
.yd-hidden { display: none !important; }
.yd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ════════════════════════════════════════════════════════════════
   ESCAPE HATCHES — opt-out do padrão brutalist
   ════════════════════════════════════════════════════════════════
   O sistema força borda preta 2px + box-shadow no hover em todos os
   botões/cards dentro de .yd-main que não tem classe yd-*. Use as
   classes abaixo pra escapar caso a caso.

   .yd-flat              → remove tudo (borda + shadow + transform). Botão "limpo".
   .yd-flat-border       → só remove a borda preta (mantém shadow se houver).
   .yd-flat-shadow       → só remove o box-shadow no hover (mantém borda).
   .yd-flat-hover        → remove transform + shadow no hover (visual estático).
   .yd-soft              → flat + adiciona border-radius 6px (visual moderno).

   Uso: <button class="cf-tb-btn yd-flat">MANUAL</button>
   ──────────────────────────────────────────────────────────────── */

.yd-main .yd-flat,
.yd-main .yd-flat:hover,
.yd-main .yd-flat:focus,
.yd-main .yd-flat:active {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.yd-main .yd-flat-border,
.yd-main .yd-flat-border:hover {
    border: 0 !important;
    border-color: transparent !important;
}

.yd-main .yd-flat-shadow,
.yd-main .yd-flat-shadow:hover {
    box-shadow: none !important;
    transform: none !important;
}

.yd-main .yd-flat-hover:hover,
.yd-main .yd-flat-hover:focus {
    transform: none !important;
    box-shadow: none !important;
}

.yd-main .yd-soft,
.yd-main .yd-soft:hover,
.yd-main .yd-soft:focus,
.yd-main .yd-soft:active {
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transform: none !important;
}