@import 'pygments.css';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-green-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-green);
}

code, pre {
    font-family: var(--font-mono);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--text-primary);
    color: var(--bg-page);
    border-color: var(--text-primary);
}

.btn-primary:hover {
    background: var(--text-primary);
    color: var(--bg-page);
    opacity: 0.86;
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--color-green);
    color: var(--color-green);
}

.btn-brand {
    background: var(--color-green);
    color: #fff;
    border-color: var(--color-green);
}

.btn-brand:hover {
    background: var(--color-green-link);
    border-color: var(--color-green-link);
    color: #fff;
}

.hero {
    padding: var(--space-16) var(--space-6);
    text-align: center;
}

.hero h1 {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: var(--space-4);
}

.hero .lead {
    color: var(--text-secondary);
    font-size: 20px;
    max-width: 620px;
    margin: 0 auto var(--space-8);
}

.brand-dot {
    color: var(--color-green);
}

/* Top nav */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-8);
    background: var(--bg-nav);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}
.nav-brand {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
}
.brand-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-green);
    border: none;
    border-radius: 8px;
    padding: 5px;
}
.brand-icon svg { width: 100%; height: 100%; display: block; }
.brand-icon .pin-head { fill: #fafafa; }
.brand-icon .pin-shaft { stroke: #fafafa; }
.brand-wordmark { height: 38px; width: auto; display: block; flex-shrink: 0; }
.nav-links {
    display: flex;
    gap: var(--space-6);
    align-items: center;
}
.nav-links a {
    color: var(--text-secondary);
    font-size: 14px;
}
.nav-links a:hover {
    color: var(--text-primary);
}
.nav-links a.btn-green-pill,
.nav-links a.btn-green-pill:hover { color: var(--color-near-black); }
.nav-collapsible {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    color: var(--text-primary);
    flex-shrink: 0;
    margin-left: auto;
}
.nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 180ms ease, opacity 180ms ease;
}
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sections */
section.block {
    padding: var(--space-16) var(--space-6);
}
.section-label {
    color: var(--section-label-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}
.section-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

/* Features grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}
@media (max-width: 900px) {
    .grid-3 { grid-template-columns: 1fr; }
}
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: border-color 120ms ease;
}
.card:hover {
    border-color: var(--border-color);
}
.card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.card p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Pricing */
.price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-8);
}
@media (max-width: 700px) {
    .price-row { grid-template-columns: 1fr; }
}
.price-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    position: relative;
}
.price-card.featured {
    border-color: var(--color-green);
    box-shadow: 0 0 0 2px var(--color-green-border), 0 12px 32px -16px rgba(225, 29, 72, 0.35);
    background: linear-gradient(180deg, var(--accent-wash) 0%, var(--bg-card) 140px);
}
.price-card__badge {
    position: absolute;
    top: -12px;
    left: var(--space-6);
    background: var(--color-green);
    color: var(--color-near-black);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    line-height: 1;
}
.price-card h3 {
    font-size: 20px;
    margin-bottom: var(--space-2);
}
.price-amount {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: var(--space-3) 0 var(--space-6);
}
.price-amount small {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: var(--space-2);
}
.price-list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}
.price-list li {
    padding: var(--space-2) 0;
    color: var(--text-secondary);
    font-size: 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.price-list li:last-child { border-bottom: 0; }
.price-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-list__check { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.price-list__check--brand { color: var(--color-green); }
.price-list__locked { color: var(--text-muted) !important; font-style: italic; }
.price-list__trial {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--color-green);
    background: var(--accent-wash);
    border: 1px solid var(--color-green-border);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.trial-callout {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-6);
    background: var(--accent-wash);
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-lg);
}
.trial-callout__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    color: var(--color-near-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.trial-callout__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.trial-callout__body strong { color: var(--text-primary); }
.trial-callout__body span { color: var(--text-secondary); }
.trial-callout__cta { flex-shrink: 0; width: auto !important; padding-left: var(--space-6); padding-right: var(--space-6); }
@media (max-width: 700px) {
    .trial-callout { flex-direction: column; align-items: flex-start; }
    .trial-callout__cta { width: 100% !important; }
}

/* Pricing page — denser layout to fit in one viewport */
section.block.pricing-page { padding: var(--space-8) var(--space-6); }
.pricing-page .section-title { font-size: 32px; margin-bottom: var(--space-3); }
.pricing-page__lead { color: var(--text-secondary); max-width: 620px; margin: 0; font-size: 14px; }
.pricing-page .trial-callout { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); }
.pricing-page .trial-callout__icon { width: 34px; height: 34px; font-size: 14px; }
.pricing-page .trial-callout__body { font-size: 13px; }
.pricing-page .price-row { margin-top: var(--space-6); gap: var(--space-4); }
.pricing-page .price-card { padding: var(--space-6); }
.pricing-page .price-card h3 { font-size: 18px; }
.pricing-page .price-amount { font-size: 36px; margin: var(--space-2) 0 var(--space-4); }
.pricing-page .price-list { margin-bottom: var(--space-4); }
.pricing-page .price-list li { padding: 6px 0; font-size: 13px; }
.pricing-page .price-card__badge { top: -10px; font-size: 10px; padding: 3px 9px; }
@media (max-width: 700px) {
    section.block.pricing-page { padding: var(--space-6) var(--space-4); }
    .pricing-page .section-title { font-size: 28px; }
    .pricing-page .price-card { padding: var(--space-4); }
}

/* Footer */
footer.site-footer {
    padding: var(--space-8) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.site-footer__links {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.site-footer__links a {
    color: var(--text-muted);
    text-decoration: none;
}
.site-footer__links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Auth forms (allauth) */
.auth-stage {
    position: relative;
    max-width: 460px;
    margin: 64px auto;
    padding: 20px;
    isolation: isolate;
}
.auth-stage::before {
    content: "";
    position: absolute;
    inset: -60px;
    background:
        radial-gradient(at 25% 25%, rgba(120,130,140,.22), transparent 55%),
        radial-gradient(at 75% 78%, rgba(100,110,125,.18), transparent 55%);
    filter: blur(60px);
    opacity: .9;
    z-index: -1;
    pointer-events: none;
}
[data-theme="dark"] .auth-stage::before,
:root:not([data-theme="light"]) .auth-stage::before {
    background:
        radial-gradient(at 25% 25%, rgba(180,190,200,.10), transparent 55%),
        radial-gradient(at 75% 78%, rgba(160,170,185,.08), transparent 55%);
    opacity: 1;
}
.auth-card {
    max-width: 420px;
    margin: var(--space-12) auto;
    padding: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.auth-stage .auth-card {
    margin: 0;
    max-width: none;
    padding: 36px 32px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 16px;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 1px 2px rgba(15,23,42,.04),
        0 8px 24px rgba(15,23,42,.06),
        0 30px 70px rgba(15,23,42,.10);
}
[data-theme="dark"] .auth-stage .auth-card,
:root:not([data-theme="light"]) .auth-stage .auth-card {
    background: rgba(20,20,20,.55);
    border-color: rgba(255,255,255,.08);
    box-shadow:
        0 1px 0 rgba(255,255,255,.06) inset,
        0 1px 2px rgba(0,0,0,.4),
        0 8px 24px rgba(0,0,0,.45),
        0 30px 70px rgba(0,0,0,.55);
}
.auth-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-green);
    border-radius: 12px;
    padding: 8px;
}
.auth-mark svg { width: 100%; height: 100%; display: block; }
.auth-mark .pin-head { fill: #fafafa; }
.auth-mark .pin-shaft { stroke: #fafafa; }
.auth-eyebrow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.auth-card h1 {
    font-size: 24px;
    letter-spacing: -0.5px;
    margin-bottom: var(--space-6);
}
.auth-stage .auth-card h1 {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 20px;
}
.auth-sub {
    text-align: center;
    color: var(--text-secondary);
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.5;
}
.btn-google {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    gap: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
}
[data-theme="dark"] .btn-google,
:root:not([data-theme="light"]) .btn-google {
    background: rgba(255,255,255,.06);
}
.btn-google:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.07);
}
.auth-privacy {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}
.auth-privacy svg { flex-shrink: 0; opacity: .7; }
.auth-card form p {
    margin-bottom: var(--space-4);
}
.auth-card label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text] {
    width: 100%;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: 14px;
}
.auth-card input:focus {
    outline: none;
    border-color: var(--color-green);
}
.auth-card .btn {
    width: 100%;
    padding: 12px;
    margin-top: var(--space-3);
}
.auth-card .aux {
    margin-top: var(--space-4);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.auth-card ul.errorlist {
    color: var(--color-crimson);
    font-size: 13px;
    list-style: none;
    margin-bottom: var(--space-3);
}
.auth-divider {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.8px;
    margin: var(--space-4) 0;
    position: relative;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--border-subtle);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.field-error { display: block; font-size: 12px; color: var(--color-crimson); margin-top: 3px; }

.oauth-scopes-label {
    margin-top: var(--space-4);
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
}
.oauth-scopes {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 var(--space-3);
    text-align: left;
}
.oauth-scopes li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--text-primary);
    font-size: 14px;
}
.oauth-scopes li i {
    color: var(--color-green);
    font-size: 11px;
}
.oauth-actions { margin-top: var(--space-3); }

.oauth-redirect {
    margin-top: var(--space-3);
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
    word-break: break-all;
}
.oauth-redirect i { margin-right: 6px; opacity: 0.7; }
.oauth-redirect strong { color: var(--text-primary); font-weight: 600; }

.oauth-warning {
    margin-top: var(--space-2);
    padding: 10px 12px;
    background: rgba(225, 29, 72, 0.08);
    border: 1px solid rgba(225, 29, 72, 0.32);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
    line-height: 1.45;
}
.oauth-warning i {
    color: var(--color-green);
    margin-right: 6px;
}

.theme-toggle {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    padding: 0;
}
.theme-toggle:hover { color: var(--color-green); border-color: var(--color-green-border); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 14px; height: 14px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.theme-toggle-fixed {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 100;
    background: var(--bg-card);
}

/* App shell (dashboard) */
.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: calc(100vh - 68px);
    opacity: 0;
}
.app-shell.is-ready {
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Skeleton */
@keyframes skel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.app-skeleton-sidebar {
    border-right: 1px solid var(--border-subtle);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.app-skeleton-main {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.skel-line {
    height: 12px;
    border-radius: 6px;
    background: var(--border-subtle);
    animation: skel-pulse 1.4s ease-in-out infinite;
    width: 100%;
}
.skel-line--wide  { width: 70%; }
.skel-line--med   { width: 50%; }
.skel-line--short { width: 35%; }
.skel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.skel-card {
    height: 120px;
    border-radius: 10px;
    background: var(--border-subtle);
    animation: skel-pulse 1.4s ease-in-out infinite;
}
.skel-card:nth-child(2) { animation-delay: 0.1s; }
.skel-card:nth-child(3) { animation-delay: 0.2s; }
.skel-card:nth-child(4) { animation-delay: 0.3s; }
.skel-card:nth-child(5) { animation-delay: 0.4s; }
.skel-card:nth-child(6) { animation-delay: 0.5s; }
@media (max-width: 768px) {
    .app-skeleton-sidebar { display: none; }
}
@media (max-width: 768px) {
    .app-shell { grid-template-columns: 1fr; }
    .nav-burger { display: flex; }
    .nav-collapsible {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        background: var(--bg-nav);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-subtle);
        padding: var(--space-4) var(--space-6);
        gap: var(--space-4);
    }
    .nav.is-open .nav-collapsible { display: flex; }
    .nav-collapsible .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
    }
    .nav-collapsible .nav-links a { font-size: 15px; }
    .nav-collapsible .btn-green-pill,
    .nav-collapsible .btn-outline-pill {
        width: auto;
        align-self: flex-start;
        padding: 8px 18px;
        font-size: 14px;
    }
    .nav-collapsible .btn-outline-pill {
        background: #fff;
        color: #000;
        border-color: #fff;
    }
    .nav-collapsible .btn-outline-pill:hover {
        background: #f0f0f0;
        color: #000;
    }
    [data-theme="light"] .nav-collapsible .btn-outline-pill {
        background: #000;
        color: #fff;
        border-color: #000;
    }
    [data-theme="light"] .nav-collapsible .btn-outline-pill:hover {
        background: #1a1a1a;
        color: #fff;
    }
}

.sidebar {
    border-right: 1px solid var(--border-subtle);
    padding: 0 var(--space-4) var(--space-4);
    background: var(--bg-card);
    overflow: hidden;
}
.sidebar-header {
    padding: var(--space-3) var(--space-2) var(--space-2);
    margin-bottom: var(--space-3);
}
/* Botão + da sidebar (dropdown) */
.sidebar-add-wrap {
    position: relative;
    width: 100%;
}
.sidebar-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: var(--color-green);
    color: #0f0f0f;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, opacity 120ms ease;
    line-height: 1;
}
/* Botão + Novo no header da view principal */
.btn-new-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-green);
    color: #0f0f0f;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 120ms ease;
    line-height: 1;
}
.btn-new-main:hover { opacity: 0.88; }
.sidebar-add-btn:hover { background: var(--color-green-link, var(--color-green)); opacity: 0.88; }
.sidebar-add-btn.is-open { opacity: 0.88; }
.sidebar-add-caret {
    transition: transform 180ms ease;
}
.sidebar-add-btn.is-open .sidebar-add-caret { transform: rotate(180deg); }

/* Dropdown de opções */
.sidebar-add-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-add-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease;
}
.sidebar-add-option:hover {
    background: var(--border-subtle);
    color: var(--color-green);
}
.btn-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 5px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color 120ms, background 120ms;
}
.btn-sidebar-toggle:hover {
    color: var(--text-primary);
    background: var(--border-subtle);
}

.tree { list-style: none; padding-left: 0; margin: 0; }
.tree .tree { padding-left: var(--space-4); }
/* Cap visual: a partir do 7º nível aninhado, zera o padding-left adicional.
   Pastas mais profundas continuam funcionais — só não viram escada infinita. */
.tree .tree .tree .tree .tree .tree .tree { padding-left: 0; }
.tree-node { margin-bottom: 2px; }
/* Suprime seleção de texto durante o drag iniciado pelo vuedraggable
   (sortablejs adiciona/remove classes durante o gesto, mas em touch o
   long-press pode disparar text selection antes). */
.tree-row {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.tree-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 2px;
    border-radius: var(--radius-sm);
    transition: background 120ms ease;
}
.tree-row:hover { background: var(--border-subtle); }
.tree-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 6px;
    color: var(--text-secondary);
    font-size: 14px;
    flex: 1;
    min-width: 0;
}
.tree-row:hover .tree-link { color: var(--text-primary); }
.tree-node.is-selected > .tree-row {
    background: var(--accent-wash, rgba(225, 29, 72, 0.12));
}
.tree-node.is-selected > .tree-row .tree-link,
.tree-node.is-selected > .tree-row .tree-toggle {
    color: var(--color-green);
}
.tree-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.tree-icon svg { width: 18px; height: 18px; display: block; }
.tree-icon-desk { color: var(--text-primary); }
.tree-icon-child { color: var(--text-primary); }
.tree-node.is-selected > .tree-row > .tree-link .tree-icon { color: var(--text-primary); }
.tree-toggle {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.tree-toggle:hover { color: var(--text-primary); }
.tree-toggle svg {
    width: 10px;
    height: 10px;
    display: block;
    transition: transform 0.15s ease;
}
.tree-node.is-collapsed > .tree-row > .tree-toggle svg { transform: rotate(-90deg); }
.tree-node.is-collapsed > .tree:not(.tree-items) { display: none; }
.tree-node.is-collapsed > .tree-dirs-bar { display: none; }

/* Sidebar items list */
.tree-items-bar,
.tree-dirs-bar {
    padding-left: var(--space-4);
    margin-top: var(--space-1);
}
.tree-items-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    width: 100%;
    text-align: left;
}
.tree-items-toggle:hover { color: var(--text-secondary); }
.tree-items-toggle svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.tree-items-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.tree-items { padding-left: 0; }
.tree-item-node .tree-row { padding-left: 0; }
.tree-item-link { gap: var(--space-2); }
.tree-item-icon {
    font-size: 15px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    font-style: normal;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
}
.tree-item-icon[data-type="txt"]          { color: var(--text-primary); }
.tree-item-icon[data-type="markdown"]     { color: #a371f7; }
.tree-item-icon[data-type="prompt"]       { color: #eab308; }
.tree-item-icon[data-type="checklist"]    { color: #e05555; }
.tree-item-icon[data-type="table"]        { color: #34a853; }
.tree-item-icon[data-type="code_snippet"] { color: #e8a04a; }
.tree-item-icon[data-type="sql"]          { color: #6b7280; }
.tree-item-icon[data-type="link"]         { color: #5ba4e8; }
.tree-item-icon[data-type="page"]         { color: var(--color-indigo); }
.tree-item-icon[data-type="diagram"]      { color: #ff3670; }
.tree-item-node .tree-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-item-node .tree-row:hover { background: transparent; }
.tree-item-node .tree-row:hover .tree-label { color: var(--text-primary); }
.tree-item-node.is-selected > .tree-row { background: transparent; }
.tree-item-node.is-selected > .tree-row .tree-label { color: var(--color-green); font-weight: 500; }

.main {
    padding: var(--space-6) var(--space-8);
    position: relative;
}
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
    flex-wrap: wrap;
}
.breadcrumbs {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: 14px;
    color: var(--text-muted);
}
.breadcrumbs .sep { color: var(--text-muted); }
.breadcrumbs .current {
    color: var(--color-green-link, var(--color-green));
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
/* Menu "…" que aparece quando o caminho passa de 4 níveis. */
.breadcrumb-ellipsis { position: relative; display: inline-flex; }
.breadcrumb-ellipsis-btn {
    background: transparent;
    border: 0;
    padding: 0 4px;
    cursor: pointer;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    transition: background 120ms ease, color 120ms ease;
}
.breadcrumb-ellipsis-btn:hover,
.breadcrumb-ellipsis-btn.is-open {
    background: var(--bg-input);
    color: var(--color-green);
}
.breadcrumb-ellipsis-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 160px;
    max-width: 260px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.breadcrumb-ellipsis-menu li a {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumb-ellipsis-menu li a:hover {
    background: var(--bg-input);
    color: var(--color-green);
}
.breadcrumb-home {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 16px;
    padding: 2px 8px 2px 0;
    margin-right: 4px;
    border-right: 1px solid var(--border-subtle);
    transition: color 120ms ease;
}
.breadcrumb-home:hover { color: var(--color-green); }

.back-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    background: var(--bg-page);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 120ms ease;
}
.back-link:hover { color: var(--text-primary); }
.back-sep { color: var(--border-color); }
.back-current { color: var(--text-secondary); }

/* ── Dir page header: título + subdirs em 2 colunas ── */
.dir-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}
.dir-page-header .main-header {
    margin-bottom: 0;
    flex-wrap: nowrap;
}
.dir-subdirs-aside {
    display: none;
}
.dir-subdirs-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.dir-subdirs-tree {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dir-subdirs-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background 100ms, color 100ms;
}
.dir-subdirs-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.dir-subdirs-link svg { flex-shrink: 0; color: var(--text-muted); }

/* ── Gear menu (configurações do diretório) ── */
.dir-menu-wrap {
    position: relative;
    flex-shrink: 0;
}
.dir-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.dir-menu-btn:hover,
.dir-menu-btn.is-open {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.dir-menu-btn.is-filter-active {
    border-color: var(--color-green-border);
    color: var(--color-green);
}
.dir-menu-btn.is-filter-active:hover,
.dir-menu-btn.is-filter-active.is-open {
    border-color: var(--color-green);
    background: var(--accent-wash);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.dir-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 150px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dir-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    transition: background 100ms, color 100ms;
    font-family: var(--font-primary);
}
.dir-menu-option:hover { background: var(--bg-hover); color: var(--text-primary); }
.dir-menu-option.is-danger:hover { color: var(--color-crimson); }
.dir-menu-option.is-active { color: var(--color-green); }
.dir-menu-option-icon { width: 13px; text-align: center; opacity: 0.7; margin-right: 2px; }
.dir-menu-sep { border: none; border-top: 1px solid var(--border-subtle); margin: 4px 0; }
.history-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--color-amber, #f59e0b);
    color: white;
    line-height: 1.4;
}

/* ── DirPicker ── */
.dir-picker { position: relative; }
.dir-picker-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-primary);
    padding: 4px 8px;
    cursor: pointer;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
}
.dir-picker-btn.is-open { border-color: var(--color-primary); color: var(--text-primary); }
.dir-picker-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dir-picker-chevron { flex-shrink: 0; opacity: .5; }
.modal-header .dir-picker-btn {
    padding: 9px 12px;
    font-size: 14px;
    max-width: 200px;
    color: var(--text-secondary);
}
.dir-picker-panel {
    min-width: 230px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
    overflow: hidden;
}
.dir-picker-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.dir-picker-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: var(--font-primary);
    color: var(--text-primary);
}
.dir-picker-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 3px 0;
}
.dir-picker-item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: none;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-primary);
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.dir-picker-item:hover { background: var(--bg-hover); }
.dir-picker-item.is-selected { background: var(--accent-bg); color: var(--color-primary); }
.dir-picker-toggle {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border-radius: 3px;
}
.dir-picker-toggle:hover { background: var(--border-color); }
.dir-picker-folder { width: 14px; height: 14px; flex-shrink: 0; }
.dir-picker-indent { width: 14px; flex-shrink: 0; }
.dir-picker-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dir-picker-empty { font-size: 12px; color: var(--text-secondary); padding: 8px 12px; margin: 0; }

.dir-menu-btn.is-pinned {
    color: var(--color-green);
    border-color: var(--color-green-border);
}

.dir-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.dir-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.dir-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.dir-toolbar-right .btn { padding: 6px 12px; font-size: 13px; }
.dir-toolbar-right .btn.danger:hover {
    border-color: var(--color-crimson);
    color: var(--color-crimson);
}
/* ── Filter dropdown (multi-select com checkbox) ── */
.fdd {
    position: relative;
}
.fdd-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 120ms, color 120ms;
}
.fdd-btn:hover,
.fdd-btn--open { border-color: var(--border-color); color: var(--text-primary); }
.fdd-btn--active {
    border-color: var(--color-green);
    color: var(--color-green);
}
.fdd-chevron {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform 150ms;
}
.fdd-btn--open .fdd-chevron { transform: rotate(180deg); }
.fdd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.fdd-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
    transition: background 100ms, color 100ms;
}
.fdd-option:hover { background: var(--bg-hover); color: var(--text-primary); }
.fdd-option--checked { color: var(--text-primary); }
.fdd-checkbox {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--color-green);
    cursor: pointer;
}
.fdd-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fdd-icon {
    font-size: 11px;
    flex-shrink: 0;
    color: var(--text-muted);
    min-width: 16px;
    text-align: center;
}
.fdd-option-label { flex: 1; }
.fdd-date-range {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 4px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 2px;
}
.fdd-date-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
}
.fdd-date-input:focus { outline: none; border-color: var(--color-green); }
.fdd-date-sep {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}

.dir-tree {
    list-style: none;
    padding: 0;
    margin: 0 0 0 4px;
}
.dir-tree-item {
    position: relative;
    padding-left: 20px;
}
.dir-tree-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    background: var(--border-color);
}
.dir-tree-item:not(:last-child)::before { bottom: 0; }
.dir-tree-item:last-child::before { height: 14px; }
.dir-tree-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 14px;
    height: 1px;
    background: var(--border-color);
}
.dir-tree-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.4;
    transition: color 120ms ease, background 120ms ease;
}
.dir-tree-link:hover {
    color: var(--text-primary);
    background: var(--border-subtle);
}
.dir-tree-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.empty {
    color: var(--text-muted);
    padding: var(--space-6);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 14px;
}

.empty-cta {
    cursor: pointer;
    border: 1.5px dashed var(--color-green-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-6);
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    user-select: none;
}
.empty-cta:hover, .empty-cta:focus-visible {
    background: var(--accent-wash);
    border-color: var(--color-green);
    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.07);
    outline: none;
}
.empty-cta-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(225, 29, 72, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-green);
    transition: background 180ms ease, transform 180ms ease;
    margin-bottom: var(--space-1);
}
.empty-cta:hover .empty-cta-icon-wrap {
    background: rgba(225, 29, 72, 0.22);
    transform: scale(1.08);
}
.empty-cta-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-green);
    letter-spacing: -0.01em;
}
.empty-cta-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Quick create modal */
.quick-create-modal {
    max-width: 380px;
}
.quick-create-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-2);
}
.qc-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    background: transparent;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}
.qc-btn-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(225, 29, 72, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-green);
    transition: background 160ms ease, transform 160ms ease;
}
.qc-btn-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.qc-btn:hover {
    border-color: var(--color-green);
    background: var(--accent-wash);
}
.qc-btn:hover .qc-btn-icon {
    background: rgba(225, 29, 72, 0.2);
    transform: scale(1.06);
}

.flash { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.flash li {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-wash, rgba(225, 29, 72, 0.12));
    color: var(--color-green);
    font-size: 13px;
    margin-bottom: var(--space-2);
}

select, .auth-card select {
    width: 100%;
    background-color: var(--bg-input);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 32px 10px 12px;
    font-family: var(--font-primary);
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 120ms;
}
select:focus, .auth-card select:focus { outline: none; border-color: var(--color-green-border); }

/* Main sections */
.main-section { margin-bottom: var(--space-8); }
.main-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.main-section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0;
}
.view-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.view-toggle-btn {
    background: transparent;
    border: none;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: background 120ms, color 120ms;
}
.view-toggle-btn svg { width: 15px; height: 15px; display: block; }
.view-toggle-btn:hover { color: var(--text-primary); }
.view-toggle-btn.is-active { background: var(--border-subtle); color: var(--text-primary); }

/* List view overrides */
.item-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.item-grid.view-list .item-card {
    flex-direction: row;
    align-items: center;
    min-height: unset;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
}
.item-grid.view-list .item-card-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 var(--space-3);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.item-grid.view-list .item-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.item-grid.view-list .item-card-type-row {
    min-width: 96px;
}
.item-grid.view-list .item-type-badge {
    width: auto;
    justify-self: start;
    justify-content: flex-start;
    overflow: hidden;
}
.item-grid.view-list .item-card-title {
    margin-bottom: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
    width: auto;
    min-width: 0;
    padding-right: 0;
}
.item-grid.view-list .item-card-top-actions { z-index: 1; }
.item-grid.view-list .item-card-preview {
    -webkit-line-clamp: 1;
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}
.item-grid.view-list .item-card-tags {
    margin-top: 0;
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    padding-left: 0;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
}
.item-grid.view-list .item-card-top-actions {
    position: static;
    flex-shrink: 0;
    margin-left: var(--space-2);
}

/* Items grid + cards */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}
.item-card {
    position: relative;
    background: var(--bg-card);
    /* Borda some — o destaque vem de sombra dupla: 1px outline (separa do
       fundo branco) + glow suave (dá profundidade). */
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 120ms ease;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 1px 3px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    min-height: 130px;
}
.item-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px var(--color-green-border),
        0 6px 16px rgba(15, 23, 42, 0.06),
        0 16px 36px rgba(15, 23, 42, 0.08);
}
.item-card.is-pinned {
    box-shadow:
        0 0 0 1px var(--color-green-border),
        0 1px 3px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.03);
}
.item-card.has-menu-open { z-index: 50; }
.item-card-main {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.item-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: var(--space-2);
}
.item-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.item-type-badge[data-type="txt"]          { color: var(--text-primary); }
.item-type-badge[data-type="markdown"]     { color: #a371f7; }
.item-type-badge[data-type="prompt"]       { color: #eab308; }
.item-type-badge[data-type="checklist"]    { color: #e05555; }
.item-type-badge[data-type="table"]        { color: #34a853; }
.item-type-badge[data-type="code_snippet"] { color: #e8a04a; }
.item-type-badge[data-type="sql"]          { color: #6b7280; }
.item-type-badge[data-type="link"]         { color: #5ba4e8; }
.item-type-badge[data-type="page"]         { color: var(--color-indigo); }
.item-type-badge[data-type="diagram"]      { color: #ff3670; }
.item-pin { display: none; }
.item-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.3;
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-card-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Card preview area (tipada por conteúdo) ── */
.item-card-preview-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-2);
    scroll-behavior: smooth;
}
.item-card:hover .item-card-preview-area {
    overflow-y: auto;
    scrollbar-width: none;
}
.item-card:hover .item-card-preview-area::-webkit-scrollbar {
    display: none;
}
/* Touch (Android/iOS): sem hover real → scroll sempre ligado.
   `touch-action: pan-y` é necessário pra Android Chrome reconhecer
   pan vertical dentro do <a> do RouterLink — sem isso, o anchor
   "engole" o touchmove e o scroll interno do card não engaja. */
@media (hover: none) {
    .item-card-preview-area {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-y;
    }
    .item-card-preview-area::-webkit-scrollbar { display: none; }
}
/* Cards de página têm conteúdo denso (vários blocos): scroll sempre ligado,
   independente de hover, pra funcionar em touch (iOS/Android) e no web sem
   exigir mouse-over. */
.item-card-preview-area--scrollable {
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.item-card-preview-area--scrollable::-webkit-scrollbar {
    display: none;
}
.item-grid:not(.view-list) .item-card-preview-area::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    transition: opacity 150ms ease;
}
.item-grid:not(.view-list) .item-card:hover .item-card-preview-area::after {
    opacity: 0;
}
.item-grid:not(.view-list) {
    grid-auto-rows: 220px;
}
.item-grid:not(.view-list) .item-card {
    height: 220px;
    max-height: 220px;
    overflow: hidden;
}
.item-grid:not(.view-list) .item-card-main {
    min-height: 0;
}
.card-preview-text {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
}
.card-preview-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 0;
}
.card-preview-locked i {
    color: var(--color-primary, #e11d48);
    opacity: 0.7;
}
.item-card-type-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.item-card-lock-icon {
    font-size: 12px;
    color: var(--color-primary, #e11d48);
    opacity: 0.95;
    flex-shrink: 0;
}
.vault-unlock-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: rgba(225, 29, 72, 0.06);
    border: 1px solid rgba(225, 29, 72, 0.18);
    border-radius: 6px;
    margin: var(--space-3, 12px) 0;
}
.vault-unlock-banner > i {
    color: var(--color-primary, #e11d48);
    font-size: 18px;
}
.vault-unlock-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.vault-unlock-banner-text strong {
    font-size: 14px;
    color: var(--text-primary);
}
.vault-unlock-banner-text span {
    font-size: 12.5px;
    color: var(--text-secondary);
}
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}
/* Cards de tipo Arquivos: thumb da primeira imagem ou lista compacta */
.card-preview-files-thumb {
    position: relative;
    width: 100%;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    /* Bg sutil tema-aware visível como respiro ao redor da imagem (contain). */
    background: var(--bg-secondary, var(--bg-input));
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-preview-files-thumb img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /* contain preserva proporção — não corta logos/portrait. */
    object-fit: contain;
    display: block;
    /* high-quality força algoritmo de downscale bicúbico no Chrome — sem
       serrilhado em imagens grandes encolhidas pra ~150px. */
    image-rendering: high-quality;
}
.card-preview-files-thumb.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #f3f4f6) 0%,
        var(--bg-tertiary, #e5e7eb) 50%,
        var(--bg-secondary, #f3f4f6) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.card-preview-files-count {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 8px;
    border-radius: 10px;
}
.card-preview-files-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-preview-files-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
}
.card-preview-files-list li i {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 11px;
    width: 14px;
    text-align: center;
}
.card-preview-files-name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card-preview-files-size {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 11px;
}
.card-preview-files-more {
    color: var(--text-muted);
    font-style: italic;
    font-size: 11px;
}
.card-preview-files-empty {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.card-preview-checklist {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.card-preview-checklist li {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
}
.card-preview-checklist li.is-checked { color: var(--text-muted); text-decoration: line-through; }
.card-check-box { flex-shrink: 0; font-size: 13px; color: var(--color-green); }
.card-preview-checklist li.is-checked .card-check-box { opacity: 0.45; }
.card-check-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-preview-table-wrap {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    width: 100%;
    max-width: 100%;
    scrollbar-width: thin;
    position: relative;
    background:
        linear-gradient(to right, var(--bg-card) 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), var(--bg-card) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--bg-card);
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}
.card-preview-table-wrap::-webkit-scrollbar { height: 6px; -webkit-appearance: none; }
.card-preview-table-wrap::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.card-preview-table-wrap::-webkit-scrollbar-track { background: transparent; }
.card-preview-table {
    border-collapse: collapse;
    font-size: 11px;
    width: max-content;
}
.card-preview-table th,
.card-preview-table td {
    min-width: 90px;
}
.card-preview-table th {
    background: var(--bg-hover);
    color: var(--text-muted);
    font-weight: 600;
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.card-preview-table thead tr:first-child th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.card-preview-table thead tr:first-child th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.card-preview-table td {
    padding: 3px 8px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.card-preview-table tr:last-child td { border-bottom: none; }
.card-preview-table tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-sm); }
.card-preview-table tr:last-child td:last-child  { border-radius: 0 0 var(--radius-sm) 0; }
.card-preview-code {
    font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}
.card-preview-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #5ba4e8;
    overflow: hidden;
}
.card-preview-link-icon { flex-shrink: 0; }
.card-preview-link-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-preview-markdown {
    font-size: 11.5px;
    line-height: 1.4;
    overflow: hidden;
    color: var(--text-secondary);
}
.card-preview-markdown.markdown-body h1,
.card-preview-markdown.markdown-body h2,
.card-preview-markdown.markdown-body h3 {
    font-size: 12px; margin: 0 0 3px; font-weight: 600;
}
.card-preview-markdown p { margin: 0 0 3px; }
.card-preview-page {
    font-size: 12px;
    overflow: hidden;
}
.card-preview-diagram {
    overflow: hidden;
    max-height: 120px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.card-preview-diagram svg {
    max-width: 100%;
    max-height: 120px;
    pointer-events: none;
}
.card-preview-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-preview-link-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #5ba4e8;
    overflow: hidden;
    padding: 3px 4px 3px 0;
}
.card-preview-link-thumb {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle, #f5f5f5);
    border: 1px solid var(--border-subtle);
}
.card-preview-link-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-preview-link-thumb-empty {
    color: var(--text-muted);
    font-size: 9px;
}
.card-preview-link-url-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
.card-preview-link-url-wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none;
}
.card-preview-link-url {
    display: block;
    white-space: nowrap;
    font-size: 12px;
    color: #5ba4e8;
    text-decoration: none;
}
.card-preview-link-title {
    font-weight: 500;
    color: var(--text-primary);
}
.card-preview-link-arrow { display: none; }
.card-preview-link-desc {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* List view: mostra só texto simples */
.item-grid.view-list .item-card-preview-area {
    display: none;
}
.item-grid.view-list .item-card-preview-area::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none;
}
.item-grid.view-list .card-preview-table-wrap,
.item-grid.view-list .card-preview-markdown { display: none; }
.item-grid.view-list .card-preview-code {
    padding: 0;
    background: transparent;
    border-radius: 0;
    white-space: nowrap;
}
.card-preview-md-raw { display: none; }
.item-grid.view-list .card-preview-md-raw {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.item-grid.view-list .card-preview-checklist {
    flex-direction: row; flex-wrap: nowrap; overflow: hidden;
    font-size: 12px; color: var(--text-muted);
}
.item-grid.view-list .card-preview-checklist li { white-space: nowrap; }
.item-grid.view-list .card-preview-text {
    font-size: 12px;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: clip;
}
.item-grid.view-list .card-preview-links {
    flex-direction: column;
    overflow: hidden;
    max-height: 36px;
    gap: 0;
}
.item-grid.view-list .card-preview-link-item {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5;
}
.item-grid.view-list .card-preview-link-item:nth-child(n+3) {
    display: none;
}
.item-grid.view-list .card-preview-page {
    display: block;
    overflow: hidden;
}
.item-grid.view-list .card-preview-diagram {
    display: none;
}
.item-card-top-actions {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}
.item-card-head { padding-right: 64px; }
.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    line-height: 1;
    transition: color 120ms ease;
}
.icon-btn:hover { color: var(--color-green); }
.icon-btn.is-active { color: var(--color-green); }
.icon-btn-danger:hover { color: var(--color-crimson) !important; }

/* ── Menu 3 pontos do card ── */
.card-menu-wrap {
    position: relative;
}
.card-menu-dropdown--fixed {
    position: fixed !important;
    top: var(--menu-top, 0);
    right: var(--menu-right, 0);
    z-index: 1000;
}
.card-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 140px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.card-menu-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease;
}
.card-menu-option:hover { background: var(--border-subtle); }
.card-menu-option-icon { width: 13px; text-align: center; flex-shrink: 0; }
.card-menu-option-danger:hover { color: var(--color-crimson); }

/* Popover de prévia rápida */
/* ── Modal peek (substituiu popover posicionado) ── */
.modal-peek-overlay {
    align-items: center;
    padding-top: 0;
}
.modal-peek {
    width: 600px;
    max-width: 94vw;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
}
.modal-peek-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-4);
    flex-shrink: 0;
}
.modal-peek-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}
.modal-peek-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
    max-width: 200px;
    padding-top: 2px;
}
.modal-peek-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--text-primary);
    word-break: break-word;
}
.modal-peek-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}
.modal-peek-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}
@media (max-width: 600px) {
    .modal-peek {
        max-height: 90vh;
        padding: var(--space-4);
    }
}
.item-peek {
    display: none; /* classe legada, não usada */
}
.item-peek-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: 13px;
}
.item-peek-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--color-green);
    border-radius: 50%;
    animation: peek-spin 0.7s linear infinite;
}
@keyframes peek-spin { to { transform: rotate(360deg); } }
.item-peek-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text-secondary);
}
.item-peek-code-header { margin-bottom: var(--space-2); }
.item-peek-markdown { font-size: 13px; }
.item-peek-links { display: flex; flex-direction: column; gap: var(--space-1); }
.item-peek-link-entry {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: #5ba4e8;
}
.item-peek-link-url-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
.item-peek-link-url-wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg-modal, var(--bg-card, #fff)));
    pointer-events: none;
}
.item-peek-link-url {
    display: block;
    white-space: nowrap;
    font-size: 13px;
    color: #5ba4e8;
}
.item-peek-link-title {
    font-weight: 500;
    color: var(--text-primary);
}
.item-peek-link-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.55;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 3px 5px;
    border-radius: 3px;
    transition: opacity 120ms, color 120ms, background 120ms;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}
.item-peek-link-arrow:hover { opacity: 1; color: var(--color-green); background: var(--bg-hover); }
.item-peek-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.item-peek-check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 13px;
}
.item-peek-check-box { flex-shrink: 0; color: var(--text-secondary); }
.item-peek-check-item.is-checked { color: var(--text-muted); }
.item-peek-check-item.is-checked > span:last-child { text-decoration: line-through; }
.item-peek-check-item.is-checked .item-peek-check-box { color: var(--color-green); }
.item-peek-table-wrap { overflow-x: auto; }
.item-peek-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.item-peek-table th,
.item-peek-table td {
    padding: 3px 8px;
    border: 1px solid var(--border-subtle);
    text-align: left;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-peek-table th { background: var(--border-subtle); font-weight: 600; }
.item-peek-empty { color: var(--text-muted); font-size: 12px; margin: 0; }
.item-peek-link-desc { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* Item detail */
.item-detail { max-width: none; }
.item-detail-header { max-width: none; }
.item-detail-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.item-detail-actions-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.item-detail-date {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.item-shared-icon {
    font-size: 10px;
    color: var(--color-green);
    opacity: 0.8;
}
.tree-shared-icon {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 4px;
}
.tree-locked-icon {
    font-size: 9px;
    color: var(--color-primary, #e11d48);
    opacity: 0.85;
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 4px;
}
/* Quando há ambos, o lock vem antes do shared e nenhum precisa margin-left:auto */
.tree-locked-icon + .tree-shared-icon {
    margin-left: 4px;
}
.markdown-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.btn-ai-format {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.btn-ai-format:hover:not(:disabled) {
    background: var(--border-subtle);
    color: var(--color-green);
    border-color: var(--color-green);
}
.btn-ai-format:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-ai-format i {
    font-size: 11px;
}
.item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.item-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.8px;
    margin-bottom: var(--space-3);
}
.item-sub {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: var(--space-3);
}
.code-block, .raw-content {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre-wrap;
    color: var(--text-primary);
}
.prompt-content {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid #eab308;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre-wrap;
    color: var(--text-primary);
}
.prompt-xml-tag { color: #569cd6; }

/* ── Inline editor ── */
.item-title--edit {
    outline: none;
    border-radius: var(--radius-sm);
    transition: background 120ms;
    cursor: text;
}
.item-title--edit:hover { background: var(--bg-hover); }
.item-title--edit:focus { background: var(--bg-hover); }
.item-title--edit:empty::before { content: 'Sem título'; color: var(--text-muted); }

.item-meta { position: relative; }

.ie-save-status {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
}
.ie-save-status--pending,
.ie-save-status--saving {
    background: var(--color-green);
    color: #0a2e1a;
}
.ie-save-status--saved {
    background: var(--color-green);
    color: #0a2e1a;
}

.ie-save-spinner {
    width: 12px; height: 12px;
    animation: ie-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes ie-spin { to { transform: rotate(360deg); } }

.ie-badge-enter-active, .ie-badge-leave-active { transition: opacity 150ms ease, transform 150ms ease; }
.ie-badge-enter-from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
.ie-badge-leave-to   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }

/* Status de salvamento dentro do header do item — centralizado horizontal,
   ancorado na borda inferior. Não ocupa fluxo (não cria espaço quando vazio). */
.item-detail-header { position: relative; }
.ie-save-status--in-header {
    position: absolute;
    left: 50%;
    bottom: 10px;
    top: auto;
    transform: translate(-50%, 50%);
    z-index: 2;
}
.ie-save-status--in-header.ie-badge-enter-from,
.ie-save-status--in-header.ie-badge-leave-to {
    opacity: 0;
    transform: translate(-50%, 50%) scale(0.8);
}

/* Textarea base */
.ie-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
    resize: none;
    outline: none;
    min-height: 120px;
    transition: border-color 120ms;
}
.ie-textarea:focus { border-color: var(--color-green-border); }
.ie-textarea--md { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; }

/* Markdown toolbar */
.ie-md-toolbar {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-2);
}
.multi-block-header .ie-md-toolbar { margin-bottom: 0; }
.ie-md-tab {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 120ms;
}
.ie-md-tab.active { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); }
.ie-md-tab--ai {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-purple);
}
.ie-md-tab--ai:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border); }
.ie-md-tab--ai:disabled { opacity: .5; cursor: not-allowed; }
.ie-md-tab--locked {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: .55;
    text-decoration: none;
    color: var(--color-purple);
}
.ie-md-tab--locked:hover { opacity: .75; }
.ie-md-toolbar-error {
    margin-left: var(--space-2);
    align-self: center;
    font-size: 12px;
    color: var(--color-crimson);
}
.ie-md-preview { min-height: 80px; }

.multi-block-ai-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--color-purple);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: background 120ms;
}
.multi-block-ai-btn:hover:not(:disabled) { background: var(--bg-hover); }
.multi-block-ai-btn:disabled { opacity: .4; cursor: not-allowed; }
.multi-block-ai-btn--locked {
    opacity: .5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.multi-block-ai-btn--locked:hover { opacity: .75; }

/* Overlay (prompt + code) */
.ie-overlay-wrap {
    position: relative;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 120ms;
}
.ie-overlay-wrap--prompt { border-left: 3px solid #eab308; }
.ie-overlay-wrap:focus-within { border-color: var(--color-green-border); }

/* ── Overlay (prompt + code) — alinhamento textarea↔<pre> ──
   Pra cursor/seleção do textarea (color: transparent) baterem com o texto
   visível do <pre> destacado, os DOIS layers precisam ter métricas de fonte
   IDÊNTICAS. Chrome aplica `font: -webkit-small-control` em <textarea> como
   "system font" — `font-family` sozinho não anula peso/feature/numeric, então
   forçamos tudo explicitamente. Mesma coisa pra ligaduras (Source Code Pro
   tem `calt/liga`) e tabular nums.
   font-size: 16px é GLOBAL (não responsivo) — iOS auto-zooma textarea com
   <16px mas o overlay <pre> não, e qualquer mismatch entre os dois quebra a
   posição visual do cursor. Mantém 16px em todo viewport pra eliminar essa
   classe de bug. */
.ie-highlight,
.ie-overlay-wrap .ie-textarea--prompt,
.ie-overlay-wrap .ie-textarea--code {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-stretch: normal;
    font-kerning: none;
    font-variant-ligatures: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "liga" 0, "calt" 0, "tnum" 1;
    line-height: 1.5;
    tab-size: 4;
    letter-spacing: 0;
    word-spacing: 0;
    text-indent: 0;
    text-transform: none;
    text-rendering: geometricPrecision;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ie-highlight {
    position: absolute;
    inset: 0;
    padding: var(--space-4);
    pointer-events: none;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    overflow: hidden;
    color: var(--text-primary);
}
.ie-highlight--prompt pre,
.ie-highlight--code pre {
    margin: 0;
    font: inherit;
    line-height: inherit;
    tab-size: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    font-feature-settings: inherit;
    font-variant-numeric: inherit;
    font-variant-ligatures: inherit;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
}
.ie-highlight--code code {
    font: inherit;
    background: none;
    padding: 0;
    letter-spacing: inherit;
    word-spacing: inherit;
    font-feature-settings: inherit;
    font-variant-numeric: inherit;
    font-variant-ligatures: inherit;
}

.ie-overlay-wrap .ie-textarea--prompt,
.ie-overlay-wrap .ie-textarea--code {
    position: relative;
    background: transparent;
    color: transparent;
    caret-color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-4);
    /* Mesmo wrap do overlay: palavras longas precisam quebrar no mesmo ponto. */
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    overflow-x: hidden;
    resize: none;
    outline: none;
    min-height: 120px;
    -webkit-appearance: none;
    appearance: none;
}
.ie-code-wrap { padding: 0; position: relative; }
.ie-code-wrap .code-lang { position: absolute; top: var(--space-2); right: var(--space-3); z-index: 2; }

/* Checklist inline input — textarea pra permitir wrap (item longo quebra
   linha em vez de varar o container). `field-sizing: content` cresce a altura
   pelo conteúdo (Chrome 123+, Safari 18.4+); rows=1 + min-height garante
   altura de uma linha quando vazio. */
.cl-item-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    padding: 0;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.checklist-item.is-checked .cl-item-input {
    color: var(--text-muted);
    text-decoration: line-through;
}

.card-preview-prompt {
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
    margin: 0;
    background: none;
    border: none;
    padding: 0;
}

/* Pygments container */
.code-block .highlight {
    background: transparent !important;
    padding: 0;
    margin: 0;
}
.code-block .highlight pre {
    background: transparent;
    margin: 0;
    padding: 0;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.code-lang {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Syntax highlight (hljs, classPrefix: '') — dark default ── */
.card-preview-code .keyword,
.code-block .keyword,
.ie-highlight--code .keyword                { color: #ff4d70; }
.card-preview-code .built_in,
.code-block .built_in,
.ie-highlight--code .built_in               { color: #3bc8e8; }
.card-preview-code .string,
.card-preview-code .regexp,
.code-block .string,
.code-block .regexp,
.ie-highlight--code .string,
.ie-highlight--code .regexp                 { color: #79c0ff; }
.card-preview-code .number,
.code-block .number,
.ie-highlight--code .number                 { color: #ff9944; }
.card-preview-code .comment,
.card-preview-code .doctag,
.code-block .comment,
.code-block .doctag,
.ie-highlight--code .comment,
.ie-highlight--code .doctag                 { color: #6dbf67; font-style: italic; }
.card-preview-code .title,
.card-preview-code .title.function_,
.code-block .title,
.code-block .title.function_,
.ie-highlight--code .title,
.ie-highlight--code .title.function_        { color: #7cc8ff; }
.card-preview-code .attr,
.card-preview-code .attribute,
.code-block .attr,
.code-block .attribute,
.ie-highlight--code .attr,
.ie-highlight--code .attribute              { color: #56d364; }
.card-preview-code .type,
.code-block .type,
.ie-highlight--code .type                   { color: #d670e0; }
.card-preview-code .operator,
.card-preview-code .punctuation,
.code-block .operator,
.code-block .punctuation,
.ie-highlight--code .operator,
.ie-highlight--code .punctuation            { color: var(--text-secondary); }
.card-preview-code .variable,
.card-preview-code .params,
.code-block .variable,
.code-block .params,
.ie-highlight--code .variable,
.ie-highlight--code .params                 { color: #c9a0ff; }
.card-preview-code .literal,
.code-block .literal,
.ie-highlight--code .literal                { color: #ff9944; }
.card-preview-code .meta,
.code-block .meta,
.ie-highlight--code .meta                   { color: #7cc8ff; }

/* ── Syntax highlight — light theme overrides ── */
[data-theme="light"] .card-preview-code .keyword,
[data-theme="light"] .code-block .keyword,
[data-theme="light"] .ie-highlight--code .keyword   { color: #c4002a; }
[data-theme="light"] .card-preview-code .built_in,
[data-theme="light"] .code-block .built_in,
[data-theme="light"] .ie-highlight--code .built_in  { color: #0070b3; }
[data-theme="light"] .card-preview-code .string,
[data-theme="light"] .card-preview-code .regexp,
[data-theme="light"] .code-block .string,
[data-theme="light"] .code-block .regexp,
[data-theme="light"] .ie-highlight--code .string,
[data-theme="light"] .ie-highlight--code .regexp     { color: #0050cc; }
[data-theme="light"] .card-preview-code .number,
[data-theme="light"] .code-block .number,
[data-theme="light"] .ie-highlight--code .number     { color: #b35000; }
[data-theme="light"] .card-preview-code .comment,
[data-theme="light"] .card-preview-code .doctag,
[data-theme="light"] .code-block .comment,
[data-theme="light"] .code-block .doctag,
[data-theme="light"] .ie-highlight--code .comment,
[data-theme="light"] .ie-highlight--code .doctag     { color: #1a7a20; font-style: italic; }
[data-theme="light"] .card-preview-code .title,
[data-theme="light"] .card-preview-code .title.function_,
[data-theme="light"] .code-block .title,
[data-theme="light"] .code-block .title.function_,
[data-theme="light"] .ie-highlight--code .title,
[data-theme="light"] .ie-highlight--code .title.function_ { color: #0050cc; }
[data-theme="light"] .card-preview-code .attr,
[data-theme="light"] .card-preview-code .attribute,
[data-theme="light"] .code-block .attr,
[data-theme="light"] .code-block .attribute,
[data-theme="light"] .ie-highlight--code .attr,
[data-theme="light"] .ie-highlight--code .attribute  { color: #1a7a20; }
[data-theme="light"] .card-preview-code .type,
[data-theme="light"] .code-block .type,
[data-theme="light"] .ie-highlight--code .type       { color: #8800cc; }
[data-theme="light"] .card-preview-code .meta,
[data-theme="light"] .code-block .meta,
[data-theme="light"] .ie-highlight--code .meta       { color: #0050cc; }
[data-theme="light"] .card-preview-code .literal,
[data-theme="light"] .code-block .literal,
[data-theme="light"] .ie-highlight--code .literal    { color: #b35000; }
[data-theme="light"] .card-preview-code .variable,
[data-theme="light"] .card-preview-code .params,
[data-theme="light"] .code-block .variable,
[data-theme="light"] .code-block .params,
[data-theme="light"] .ie-highlight--code .variable,
[data-theme="light"] .ie-highlight--code .params     { color: #7600cc; }

/* Mermaid diagram */
.mermaid-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mermaid-diagram {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    overflow-x: auto;
    text-align: center;
}
.mermaid-diagram svg {
    max-width: 100%;
    height: auto;
}
.drawio-editor {
    width: 100%;
    min-height: 480px;
}
.drawio-editor--page {
    margin-left: calc(-1 * var(--space-8) + var(--space-2));
    width: calc(100% + 2 * var(--space-8) - 2 * var(--space-2));
    padding-bottom: var(--space-2);
}
.drawio-iframe {
    width: 100%;
    height: 480px;
    border: none;
    border-top: 1px solid var(--border-subtle);
    display: block;
}
.drawio-iframe--page {
    height: calc(100vh - 195px);
}
.item-detail--diagram {
    max-width: 100%;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}
/* zera padding lateral/inferior do main para diagrama; o item-detail devolve o padding p/ título/meta */
.main:has(.item-detail--diagram) {
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.diagram-code-section { margin-top: var(--space-4); }
.diagram-code-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    transition: color 120ms;
}
.diagram-code-toggle:hover { color: var(--text-primary); }
.diagram-source {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.diagram-source-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.diagram-source-toggle::-webkit-details-marker { display: none; }
.diagram-source-toggle::before {
    content: '▶';
    font-size: 9px;
    transition: transform 120ms ease;
}
.diagram-source[open] .diagram-source-toggle::before {
    transform: rotate(90deg);
}
.diagram-source-toggle:hover { color: var(--text-secondary); }
.diagram-source-inner {
    position: relative;
    border-top: 1px solid var(--border-subtle);
}
.diagram-code {
    background: var(--bg-input);
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.diagram-copy-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 3px 10px;
    font-size: 11px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.diagram-copy-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Markdown rendered */
.markdown-body { line-height: 1.65; color: var(--text-primary); max-width: 72ch; overflow-wrap: anywhere; }

/* Inline ==highlight== */
.markdown-body mark,
mark {
    background: rgba(250, 204, 21, 0.45);
    color: inherit;
    padding: 0 0.15em;
    border-radius: 2px;
}
[data-theme="dark"] .markdown-body mark,
[data-theme="dark"] mark {
    background: rgba(250, 204, 21, 0.25);
    color: inherit;
}

/* Block callouts: > [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION] */
.markdown-body .callout {
    border-left: 4px solid;
    padding: 0.7em 1em;
    margin: var(--space-4) 0;
    border-radius: 0 6px 6px 0;
    background: rgba(127, 127, 127, 0.06);
}
.markdown-body .callout > .callout-title {
    font-weight: 600;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4em;
    opacity: 0.85;
}
.markdown-body .callout > :last-child { margin-bottom: 0; }
.markdown-body .callout-note      { border-color: #3b82f6; }
.markdown-body .callout-tip       { border-color: #10b981; }
.markdown-body .callout-important { border-color: #8b5cf6; }
.markdown-body .callout-warning   { border-color: #f59e0b; }
.markdown-body .callout-caution   { border-color: #ef4444; }
.markdown-body .callout-note      > .callout-title { color: #3b82f6; }
.markdown-body .callout-tip       > .callout-title { color: #10b981; }
.markdown-body .callout-important > .callout-title { color: #8b5cf6; }
.markdown-body .callout-warning   > .callout-title { color: #f59e0b; }
.markdown-body .callout-caution   > .callout-title { color: #ef4444; }

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    margin: var(--space-6) 0 var(--space-3);
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.markdown-body h1 { font-size: 28px; }
.markdown-body h2 { font-size: 22px; }
.markdown-body h3 { font-size: 18px; }
.markdown-body p { margin-bottom: var(--space-3); }
.markdown-body ul,
.markdown-body ol { margin: 0 0 var(--space-3) var(--space-6); }
.markdown-body li { margin-bottom: var(--space-1); }
.markdown-body code {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 0.9em;
}
.markdown-body pre {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    margin-bottom: var(--space-4);
}
.markdown-body .code-block {
    margin-bottom: var(--space-4);
    white-space: normal;
}
.markdown-body .code-block pre {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    margin: 0;
}
.markdown-body pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 13px;
}
.markdown-body blockquote {
    margin: var(--space-3) 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--border-color);
    color: var(--text-secondary);
}
.markdown-body a { color: var(--color-green-link); }
.markdown-body hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-4);
    font-size: 14px;
}
.markdown-body th, .markdown-body td {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

/* ── Datatable toolbar ── */
.dt-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.dt-search {
    flex: 1;
    max-width: 280px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 10px 6px 30px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 9px center;
}
.dt-search:focus { outline: none; border-color: var(--color-green-border); }
.dt-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Tabela renderizada (visualização) ── */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.data-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.data-table th {
    padding: 0;
    position: relative;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0a2e1c;
    background: rgba(225, 29, 72, 0.55);
    border-bottom: 2px solid rgba(225, 29, 72, 0.75);
    border-right: 1px solid rgba(0,0,0,0.1);
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s;
}
.data-table th:last-child { border-right: none; }
.data-table th[data-sort],
.data-table th.dt-sorted {
    background: #1a9e65 !important;
    color: #fff !important;
    border-bottom: 2px solid #0d7a4a !important;
}
.dt-th-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 9px var(--space-2) 9px var(--space-3);
}
.dt-col-label {
    flex: 1;
    cursor: pointer;
}
.dt-col-label::after {
    content: ' ⇅';
    font-size: 9px;
    opacity: 0.45;
    letter-spacing: 0;
}
[data-sort="asc"]  .dt-col-label::after,
.dt-sorted[data-sort="asc"]  .dt-col-label::after { content: ' ↑'; opacity: 1; }
[data-sort="desc"] .dt-col-label::after,
.dt-sorted[data-sort="desc"] .dt-col-label::after { content: ' ↓'; opacity: 1; }
.dt-col-label:hover { opacity: 0.75; }

/* Filter button */
.dt-filter-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: rgba(0,0,0,0.45);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dt-filter-btn:hover {
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.15);
    color: #0a2e1c;
}
.dt-filter-btn.is-active {
    background: rgba(225, 29, 72,0.18);
    background: rgba(0,0,0,0.15);
    border-color: rgba(0,0,0,0.3);
    color: #0a2e1c;
}

/* Resize handle */
.dt-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    border-right: 2px solid transparent;
    transition: border-color 0.15s;
}
.dt-resize-handle:hover,
.dt-resize-handle.is-resizing { border-right-color: var(--color-green); }

/* Table body */
.data-table td {
    padding: 8px var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: top;
}
.data-table td:last-child { border-right: none; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.dt-even td { background: var(--surface-subtle); }
.data-table tbody tr:hover td { background: var(--accent-wash) !important; }
.data-table td.is-num,
.data-table td.dt-cell-number,
.card-preview-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th.dt-th-number .dt-th-inner { justify-content: flex-end; }

/* ── Tabela editável (detail view) ── */
.dt-tool-btn {
    padding: 5px 10px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.dt-tool-btn:hover:not(:disabled) { border-color: var(--color-green); color: var(--text-primary); }
.dt-tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dt-col-name-input {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    padding: 2px 4px;
    width: 100%;
    min-width: 60px;
    border-radius: 3px;
}
.dt-col-name-input:focus { outline: 1px solid var(--color-green-border); background: var(--bg-input); }
.dt-coltype-btn,
.dt-sort-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}
.dt-coltype-btn:hover,
.dt-sort-btn:hover { background: var(--accent-wash); color: var(--text-primary); }
.dt-sort-btn.is-active { color: var(--color-green); }
.dt-coltype-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    min-width: 140px;
}
.dt-coltype-menu li {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
}
.dt-coltype-menu li:hover { background: var(--accent-wash); color: var(--text-primary); }
.dt-coltype-menu li.is-active { color: var(--color-green); font-weight: 600; }
.dt-coltype-divider { padding: 0 !important; margin: 4px 0 !important; border-top: 1px solid var(--border-subtle); height: 0; cursor: default !important; pointer-events: none; }
.dt-coltype-delete { color: var(--color-red, #e05555) !important; }
.dt-coltype-delete:hover { background: var(--color-red, #e05555) !important; color: #fff !important; }
.data-table-editable td.dt-cell { cursor: text; position: relative; }
.data-table-editable td.dt-cell-checkbox { text-align: center; cursor: default; }
.data-table-editable td.is-editing { padding: 0; }
.data-table-editable td.is-editing input {
    width: 100%;
    height: 100%;
    padding: 8px var(--space-3);
    border: 2px solid var(--color-green);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    border-radius: 0;
    box-sizing: border-box;
}
.data-table-editable td.is-editing input:focus { outline: none; }
.dt-col-del {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}
.dt-col-del:hover { color: var(--color-red, #e05555); background: var(--accent-wash); }
.dt-row-actions-head { width: 32px; padding: 0; background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); }
.dt-row-actions { width: 32px; text-align: center; padding: 0 !important; }
.dt-row-del {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 3px;
    line-height: 1;
}
.dt-row-del:hover { color: var(--color-red, #e05555); background: var(--accent-wash); }

/* ── Mobile: scroll horizontal + primeira coluna sticky ── */
@media (max-width: 720px) {
    .table-wrapper { -webkit-overflow-scrolling: touch; }
    .data-table th.dt-th-first,
    .data-table td.dt-cell-first {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bg-card);
        box-shadow: 1px 0 0 var(--border-subtle);
    }
    .data-table tbody tr.dt-even td.dt-cell-first { background: var(--surface-subtle); }
    .data-table tbody tr:hover td.dt-cell-first { background: var(--accent-wash); }
}

/* ── Dropdown de filtro de coluna ── */
.dt-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    width: 224px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dt-dd-header {
    padding: var(--space-2) var(--space-2) 0;
}
.dt-dd-search {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: 12px;
    color: var(--text-primary);
    font-family: var(--font-primary);
}
.dt-dd-search:focus { outline: none; border-color: var(--color-green-border); }
.dt-dd-all-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px var(--space-3);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.dt-dd-all-label:hover { background: var(--surface-subtle); }
.dt-dd-divider { border-top: 1px solid var(--border-subtle); margin: 0; }
.dt-dd-list {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--space-1) 0;
}
.dt-dd-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-3);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.3;
}
.dt-dd-item:hover { background: var(--surface-subtle); }
.dt-dd-item input[type=checkbox] { flex-shrink: 0; accent-color: var(--color-green); }
.dt-dd-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
}
.dt-dd-clear {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0;
}
.dt-dd-clear:hover { color: var(--text-primary); }
.dt-dd-apply {
    background: var(--color-green);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
}
.dt-dd-apply:hover { opacity: 0.9; }

/* Link card (OG preview) */
/* ── Multi-link builder (form) ── */
.link-entry {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}
.link-entry-url { flex: 2; }
.link-entry-label { flex: 1; }
.btn-remove-link {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.12s, color 0.12s;
}
.btn-remove-link:hover { border-color: var(--color-crimson); color: var(--color-crimson); }

.link-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    padding: 10px var(--space-3);
    margin-bottom: var(--space-2);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease;
}
.link-card:hover { border-color: var(--color-green-border); }
.link-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 16px;
    padding-top: 2px;
    flex-shrink: 0;
    user-select: none;
}
.link-drag-handle:active { cursor: grabbing; }
.link-card-img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.link-card-body { flex: 1; min-width: 0; }
.link-card-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}
.link-card-globe {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.link-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.link-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.link-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
}
.link-card-url {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.link-card-url-link { color: #5ba4e8; text-decoration: none; }
.link-card-url-link:hover { text-decoration: underline; }
.link-card-open, .link-card-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 16px;
    text-decoration: none;
    transition: color 120ms ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}
.link-card-open:hover, .link-card-copy:hover { color: var(--color-green); }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    z-index: 200;
    animation: fadeIn 120ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 760px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--space-6);
}
.modal-wide {
    width: 920px;
    max-width: 96vw;
}

/* ── Diagram split-pane editor ── */
.diagram-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: start;
}
.diagram-editor-code {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.diagram-editor-code textarea {
    min-height: 260px;
    font-family: var(--font-mono);
    font-size: 13px;
    resize: vertical;
}
.diagram-editor-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.diagram-preview-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.diagram-live-preview {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: var(--space-3);
}
.diagram-live-preview svg { max-width: 100%; height: auto; }
.markdown-split { align-items: stretch; }
.markdown-split .diagram-editor-code { display: flex; flex-direction: column; }
.markdown-split .diagram-editor-code textarea { flex: 1; min-height: 260px; }
.markdown-split .diagram-live-preview { align-items: flex-start; justify-content: flex-start; }
.diagram-live-preview.markdown-body h1,
.diagram-live-preview.markdown-body h2,
.diagram-live-preview.markdown-body h3 { margin-top: 0; }
.diagram-preview-empty { color: var(--text-muted); font-size: 13px; }
.diagram-preview-error { color: #e57373; font-size: 13px; }
@media (max-width: 700px) {
    .diagram-editor { grid-template-columns: 1fr; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
}
.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 0 var(--space-2);
}
.modal-close:hover { color: var(--text-primary); }
.simple-blocks { display: flex; flex-direction: column; gap: var(--space-3); }
.simple-block { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); }
.simple-block:focus-within { border-color: var(--color-green-border); }
.simple-block-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.simple-block .simple-block-textarea {
    border: none;
    background: transparent;
    padding: 0;
    resize: none;
    overflow-y: auto;
    min-height: 96px;
    max-height: 320px;
    scrollbar-width: thin;
}
.simple-block-hl-wrap {
    position: relative;
    min-height: 96px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
}
/* Simple-block highlight (ItemForm modal) — overrida size/line-height padrão
   do .ie-highlight (12.5px/1.4) com 13px/1.5; o resto das métricas de fonte
   herda do bloco compartilhado lá em cima. */
.simple-block-hl-wrap .ie-highlight,
.simple-block .simple-block-textarea--hl {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-stretch: normal;
    font-kerning: none;
    font-variant-ligatures: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "liga" 0, "calt" 0, "tnum" 1;
    line-height: 1.5;
    tab-size: 4;
    letter-spacing: 0;
    word-spacing: 0;
    text-indent: 0;
    text-transform: none;
    text-rendering: geometricPrecision;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.simple-block-hl-wrap .ie-highlight { padding: 0; }
.simple-block-hl-wrap .ie-highlight--prompt pre,
.simple-block-hl-wrap .ie-highlight--code pre {
    font: inherit;
    line-height: inherit;
    tab-size: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    font-feature-settings: inherit;
    font-variant-numeric: inherit;
    font-variant-ligatures: inherit;
}
.simple-block .simple-block-textarea--hl {
    position: relative;
    color: transparent;
    caret-color: var(--text-primary);
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    overflow-x: hidden;
    -webkit-appearance: none;
    appearance: none;
}
.block-num { font-size: 12px; color: var(--text-muted); font-weight: 600; flex: 1; }
/* ── AppSelect custom dropdown ── */
.app-select { position: relative; flex: 0 0 auto; }
.app-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 120ms;
    line-height: 1.4;
}
.app-select-trigger:hover { border-color: var(--border-color); }
.app-select--open .app-select-trigger { border-color: var(--color-green-border); }
.app-select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
}
.app-select-arrow { color: var(--text-muted); flex-shrink: 0; transition: transform 150ms; }
.app-select--open .app-select-arrow { transform: rotate(180deg); }

.app-select-list {
    min-width: 130px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    padding: 4px;
    list-style: none;
}

.app-select-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 80ms, background 80ms, color 80ms;
}
.app-select-option:hover {
    border-color: var(--color-green);
    color: var(--text-primary);
}
.app-select-option.is-selected { color: var(--color-green); font-weight: 500; }
.app-select-check { width: 12px; flex-shrink: 0; color: var(--color-green); }
.app-select-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
}
.app-select-option.is-selected .app-select-option-icon { color: var(--color-green); }

/* transition */
.app-select-pop-enter-active, .app-select-pop-leave-active { transition: opacity 100ms, transform 100ms; }
.app-select-pop-enter-from, .app-select-pop-leave-to { opacity: 0; transform: translateY(-4px); }

/* small variant (para single-block-header) */
.app-select--small .app-select-trigger { font-size: 11px; padding: 2px 6px; }
.block-label-input {
    flex: 2;
    font-size: 12px;
    padding: 3px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    min-width: 0;
}
.block-label-input::placeholder { color: var(--text-muted); }
.block-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-1);
}
.multi-block-edit { padding: var(--space-3); background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.multi-block-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.multi-block-drag { cursor: grab; color: var(--text-muted); font-size: 16px; padding: 0 2px; user-select: none; flex-shrink: 0; width: 22px; }
.multi-block-drag:active { cursor: grabbing; }
/* textarea dentro de multi-block: sem borda/bg próprio (já é do container), altura livre */
.multi-block-edit > .ie-textarea {
    border: none;
    background: transparent;
    padding: 0;
}
.multi-block-edit .ie-textarea,
.multi-block-edit .ie-overlay-wrap {
    min-height: 180px;
    max-height: 600px;
}
.multi-block-edit .ie-textarea {
    overflow-y: auto;
    scrollbar-width: thin;
}
.multi-block-edit .ie-overlay-wrap {
    overflow: hidden;
}
.multi-block-edit .ie-overlay-wrap .ie-textarea {
    min-height: 180px;
    max-height: 600px;
}
/* overlay dentro de multi-block: sem borda extra (container já tem) */
.multi-block-edit .ie-overlay-wrap { border: none; border-radius: 0; background: transparent; }
.multi-block-edit .ie-overlay-wrap:focus-within { border-color: transparent; }
.multi-block-edit:focus-within { border-color: var(--color-green-border); }
/* preview markdown abaixo do textarea no multi-block */
.multi-block-md-preview { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.single-block-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.block-label-toggle {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    transition: border-color 120ms, color 120ms;
}
.block-label-toggle:hover { border-color: var(--color-green); color: var(--color-green); }
.modal-header .dir-picker {
    margin-left: auto;
    margin-right: var(--space-2);
}
.modal-dir-select {
    margin-left: auto;
    margin-right: var(--space-2);
    position: relative;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    max-width: 150px;
    cursor: pointer;
}
.modal-dir-select:focus { outline: none; border-color: var(--color-primary); }
/* Type selector collapsed */
.type-selector {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
.type-selector-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--font-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 120ms;
}
.type-selector-btn:hover,
.type-selector-btn.is-open { border-color: var(--color-green); }
.type-selector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    flex-shrink: 0;
}
.type-selector-label { flex: 1; text-align: left; font-weight: 500; }
.type-selector-chevron { flex-shrink: 0; opacity: .5; }
/* icon colors on the selector button */
.type-selector-btn[data-type="txt"]          .type-selector-icon { color: var(--text-primary); }
.type-selector-btn[data-type="markdown"]     .type-selector-icon { color: #a371f7; }
.type-selector-btn[data-type="prompt"]       .type-selector-icon { color: #eab308; }
.type-selector-btn[data-type="checklist"]    .type-selector-icon { color: #e05555; }
.type-selector-btn[data-type="table"]        .type-selector-icon { color: #34a853; }
.type-selector-btn[data-type="code_snippet"] .type-selector-icon { color: #e8a04a; }
.type-selector-btn[data-type="sql"]          .type-selector-icon { color: #6b7280; }
.type-selector-btn[data-type="link"]         .type-selector-icon { color: #5ba4e8; }
.type-selector-btn[data-type="page"]         .type-selector-icon { color: var(--color-indigo); }
.type-selector-btn[data-type="diagram"]      .type-selector-icon { color: #ff3670; }

.type-picker-panel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
    padding-top: var(--space-3);
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--space-3) var(--space-2);
    min-height: 56px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-primary);
}
.type-card-icon {
    font-size: 16px;
    line-height: 1;
    font-family: var(--font-mono);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.type-card-label {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
}
.type-card:hover {
    border-color: var(--color-green);
    background: var(--accent-wash);
    color: var(--text-primary);
}
.type-card.is-active {
    border-color: var(--color-green);
    box-shadow: 0 0 0 1px var(--color-green);
    background: var(--accent-wash);
    color: var(--text-primary);
}
.type-card[data-type="txt"]          .type-card-icon { color: var(--text-primary); }
.type-card[data-type="markdown"]     .type-card-icon { color: #a371f7; }
.type-card[data-type="prompt"]       .type-card-icon { color: #eab308; }
.type-card[data-type="checklist"]    .type-card-icon { color: #e05555; }
.type-card[data-type="table"]        .type-card-icon { color: #34a853; }
.type-card[data-type="code_snippet"] .type-card-icon { color: #e8a04a; }
.type-card[data-type="sql"]          .type-card-icon { color: #6b7280; }
.type-card[data-type="link"]         .type-card-icon { color: #5ba4e8; }
.type-card[data-type="page"]         .type-card-icon { color: var(--color-indigo); }
.type-card[data-type="diagram"]      .type-card-icon { color: #ff3670; }
.type-card { position: relative; }
.type-card-beta {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--color-green);
    color: #fff;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.file-ext-badge {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}
.type-card-icon .file-ext-badge {
    font-size: 12px;
}
.tree-item-icon .file-ext-badge {
    font-size: 9px;
}
.type-card-locked {
    opacity: 0.45;
    cursor: default;
}
.type-card-locked:hover {
    border-color: var(--border-subtle);
    color: var(--text-secondary);
    opacity: 0.6;
}
@media (max-width: 700px) {
    .type-grid { grid-template-columns: repeat(3, 1fr); }
}
.text-subtype-picker {
    display: flex;
    gap: var(--space-1);
    margin-top: calc(var(--space-3) * -1);
    margin-bottom: var(--space-4);
}
.subtype-pill {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.subtype-pill:hover {
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}
.subtype-pill.is-active {
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ── Checklist builder ── */
.checklist-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.cb-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-top: 2px solid transparent;
    transition: border-color 80ms ease;
}
.cb-row.cb-drop-target { border-top-color: var(--color-green); }
.cb-handle {
    flex-shrink: 0;
    cursor: grab;
    color: var(--text-muted);
    opacity: 0.35;
    display: flex;
    align-items: center;
    padding: 0 2px;
    user-select: none;
}
.cb-handle:hover { opacity: 0.7; }
.cb-row:active .cb-handle { cursor: grabbing; }
.cb-row input[type=checkbox] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--color-green);
}
.cb-text {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-primary);
}
.cb-text:focus { outline: none; border-color: var(--color-green-border); }
.cb-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
}
.cb-remove:hover { color: var(--text-primary); }

/* ── Checklist renderizado (visualização) ── */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.checklist-item {
    display: flex;
    /* flex-start: com itens longos que quebram em várias linhas, a checkbox
       fica no topo (primeira linha), não no centro do bloco multi-linha. */
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 15px;
    line-height: 1.5;
    min-width: 0;
}
.checklist-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 16px;
    user-select: none;
    opacity: 0;
    transition: opacity 120ms ease;
}
.checklist-item:hover .checklist-drag-handle { opacity: 1; }
.checklist-drag-handle:active { cursor: grabbing; }
.checklist-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: var(--color-green);
    cursor: pointer;
}
.checklist-item.is-checked span {
    color: var(--text-muted);
    text-decoration: line-through;
}
.checklist-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
}
.checklist-item:hover .checklist-remove { opacity: 0.7; }
.checklist-remove:hover { color: var(--color-red, #e57373); opacity: 1; }

.builder-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-primary);
}
.builder-add-btn:hover { border-color: var(--color-green-border); color: var(--color-green); }

/* ── Table visual editor ── */
.table-editor-controls {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}
.table-editor-controls button {
    padding: 3px 10px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-primary);
}
.table-editor-controls button:hover { border-color: var(--border-color); color: var(--text-primary); }
.table-editor-wrap { overflow-x: auto; }
.table-editor { border-collapse: collapse; width: 100%; }
.table-editor th, .table-editor td { padding: 2px; border: 1px solid var(--border-subtle); }
.table-editor th input,
.table-editor td input {
    width: 100%;
    min-width: 80px;
    background: var(--bg-input);
    border: none;
    padding: 5px 7px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-primary);
}
.table-editor th input { font-weight: 600; background: var(--bg-card); }
.table-editor th input:focus,
.table-editor td input:focus { outline: 1px solid var(--color-green-border); }
.table-editor th input[type="checkbox"],
.table-editor td input[type="checkbox"] { width: auto; min-width: 0; margin: 0 auto; display: block; }
.tcol-head { padding: 0; position: relative; }
.tcol-head-inner { display: flex; align-items: center; gap: 2px; padding-right: 2px; }
.tcol-head-inner .tcol-name { flex: 1; }
.tcol-type-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}
.tcol-type-btn:hover { color: var(--text-primary); border-color: var(--border-color); }
.tcol-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
}
.tcol-remove:hover { color: var(--color-red, #e05555); }
.tcol-type-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 120px;
}
.tcol-type-menu li {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
}
.tcol-type-menu li:hover { background: var(--accent-wash); color: var(--text-primary); }
.tcol-type-menu li.is-active { color: var(--color-green); font-weight: 600; }
.tcol-actions-head { width: 28px; padding: 0; border: none; background: transparent; }
.trow-actions { width: 28px; padding: 0 !important; border: none !important; background: transparent !important; }

/* ── Page block editor (ItemForm) ── */
.page-blocks-editor { display: flex; flex-direction: column; gap: var(--space-3); }
.page-block-editor {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.block-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.block-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 16px;
    padding: 2px 4px;
    user-select: none;
    flex-shrink: 0;
}
.block-drag-handle:active { cursor: grabbing; }
.block-type-select {
    flex: 0 0 auto;
    font-size: 13px;
    font-family: var(--font-primary);
    padding: 4px 24px 4px 8px;
    background-color: var(--bg-input);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 120ms;
}
.block-type-select:focus { outline: none; border-color: var(--color-green-border); }
.block-header .block-label-input { flex: 1; }
.block-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.block-remove-btn:hover { color: var(--color-crimson); }
.page-block-editor textarea {
    width: 100%;
    resize: vertical;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ── Seções de conteúdo multi-bloco (txt, prompt, markdown, code, sql) ── */
.content-section {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.content-section:last-child { margin-bottom: 0; }
.content-section .raw-content,
.content-section .prompt-content { margin: 0; }
.content-section .code-block { margin: 0; }

/* ── Page block view (ItemDetailView) ── */
.page-blocks-view { display: flex; flex-direction: column; gap: var(--space-4); }
.page-block-view {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.page-block-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 16px;
    padding: 4px;
    user-select: none;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
    margin-top: 2px;
}
.page-block-view:hover .page-block-handle { opacity: 1; }
.page-block-handle:active { cursor: grabbing; }
.page-block-content { flex: 1; min-width: 0; }
.page-blocks-loading { color: var(--text-muted); font-size: 14px; padding: var(--space-4) 0; }

/* ── Upload zone ── */
.upload-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
    text-align: center;
    margin-bottom: var(--space-3);
}
.upload-zone:hover { border-color: var(--color-green-border); color: var(--color-green); }

.modal-form .field {
    margin-bottom: var(--space-4);
}
.modal-form label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.modal-form input[type=text],
.modal-form input[type=email],
.modal-form input[type=url],
.modal-form textarea,
.modal-form select {
    width: 100%;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: 14px;
}
.modal-form textarea {
    font-family: var(--font-mono);
    font-size: 13px;
    min-height: 140px;
    resize: vertical;
}
.modal-form input.form-title-input {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    padding: 12px 14px;
    background: transparent;
    border-color: var(--border-subtle);
}
.modal-form input.form-title-input::placeholder {
    font-weight: 500;
    color: var(--text-muted);
}
@media (max-width: 768px) {
    .modal-form input.form-title-input {
        font-size: 22px;
    }
}
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus {
    outline: none;
    border-color: var(--color-green);
}
.modal-form .input-error { border-color: var(--color-crimson, #e53e3e) !important; }
.modal-form .field-error {
    font-size: 12px;
    color: var(--color-crimson, #e53e3e);
    margin-top: 4px;
}
.tag-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 148px;
    overflow-y: auto;
    padding: 2px 0;
}
.tag-check-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid color-mix(in srgb, var(--tag-color) 45%, transparent);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: color-mix(in srgb, var(--tag-color) 70%, var(--text-secondary));
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
    user-select: none;
}
.tag-check-item:has(input:checked) {
    background: color-mix(in srgb, var(--tag-color) 75%, transparent);
    border-color: var(--tag-color);
    color: #0f0f0f;
}
.tag-check-item input[type=checkbox] { display: none; }
.tag-empty { font-size: 13px; color: var(--text-muted); }

/* Tags toggle */
.tags-field { margin-bottom: var(--space-4); }
.tags-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--font-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 120ms, color 120ms;
}
.tags-toggle-btn:hover { border-color: var(--color-green); color: var(--text-primary); }
.tags-toggle-label { display: flex; align-items: center; gap: 6px; }
.tags-selected-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-green);
    color: #0f0f0f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.tags-toggle-icon { font-size: 16px; color: var(--text-muted); line-height: 1; }
.tag-dropdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--space-3) 0 var(--space-2);
    max-height: 160px;
    overflow-y: auto;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* Estrutura padrão body/footer dos modais (mover, etc) */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* DirPicker dentro do body do modal — full-width, padrão da tela do item */
.modal-body .dir-picker { width: 100%; }
.modal-body .dir-picker-btn {
    width: 100%;
    max-width: none;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-secondary);
    gap: var(--space-2);
}
.modal-body .dir-picker-btn:hover { border-color: var(--border-color); color: var(--text-primary); }
.modal-body .dir-picker-btn.is-open { border-color: var(--color-green); color: var(--text-primary); }

/* Labels do modal "Mover item" */
.move-field-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 6px;
}
.move-field-group { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── Bottom sheet no mobile ── */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 600px) {
    .modal-overlay {
        align-items: flex-end;
        padding-top: 0;
    }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        padding: var(--space-4) 20px calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
        animation: slideUp 240ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    .modal::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-color);
        margin: 0 auto var(--space-4);
    }

    /* Header */
    .modal-header {
        margin-bottom: var(--space-6);
    }
    .modal-header h2 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.4px;
    }

    /* DirPicker no header do modal */
    .modal-header .dir-picker-btn {
        font-size: 17px;
        padding: 12px 16px;
        max-width: 260px;
        border-radius: 10px;
    }

    /* DirPicker dropdown no mobile — sem forçar width/right; o inline style
       definido no DirPicker.vue (width = botão) é a fonte da verdade. */
    .dir-picker-panel {
        max-height: 44vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .dir-picker-search {
        padding: 12px 16px;
        gap: 10px;
    }
    .dir-picker-search input {
        font-size: 16px;
    }
    .dir-picker-list {
        max-height: 300px;
        padding: 4px 0;
    }
    .dir-picker-item {
        font-size: 16px;
        padding: 13px 16px;
        gap: 10px;
    }
    .dir-picker-folder {
        width: 18px;
        height: 18px;
    }
    .dir-picker-toggle {
        width: 20px;
        height: 20px;
    }

    /* Campos do form */
    .modal-form .field {
        margin-bottom: var(--space-6);
    }
    .modal-form input[type=text],
    .modal-form input[type=email],
    .modal-form input[type=url],
    .modal-form select {
        padding: 15px 16px;
        font-size: 16px;
        border-radius: 10px;
    }

    /* iOS auto-zooma ao focar input/textarea com font-size < 16px.
       Força ≥ 16px em todos os campos de texto dentro de modais. */
    .modal-overlay input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
    .modal-overlay textarea,
    .modal-overlay select,
    .modal-overlay .cb-text,
    .modal-overlay .ai-convert-textarea,
    .modal-overlay .share-modal-input,
    .modal-overlay .sections-name-input,
    .modal-overlay .block-label-input,
    .modal-overlay .table-editor th input,
    .modal-overlay .table-editor td input,
    .modal-overlay .simple-block .simple-block-textarea--hl,
    .modal-overlay .ie-overlay-wrap .ie-textarea--prompt,
    .modal-overlay .ie-overlay-wrap .ie-textarea--code {
        font-size: 16px;
    }
    /* Mantém alinhamento do overlay de syntax highlighting (textarea + <pre> precisam casar) */
    .modal-overlay .ie-highlight,
    .modal-overlay .ie-highlight pre,
    .modal-overlay .ie-highlight code,
    .modal-overlay .simple-block-hl-wrap .ie-highlight {
        font-size: 16px;
        line-height: 1.5;
    }
    .modal-overlay .ie-overlay-wrap .ie-textarea--prompt,
    .modal-overlay .ie-overlay-wrap .ie-textarea--code,
    .modal-overlay .simple-block .simple-block-textarea--hl {
        line-height: 1.5;
    }

    /* Campo de cor */
    .dir-color-field {
        gap: var(--space-3);
        margin-bottom: var(--space-6);
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        background: var(--bg-input);
    }
    .dir-color-hint {
        font-size: 15px;
    }
    .tag-color-input {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    /* Ações */
    .modal-actions,
    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }
    .modal-actions .btn,
    .modal-footer .btn {
        width: 100%;
        justify-content: center;
        min-height: 52px;
        font-size: 16px;
        border-radius: 12px;
    }

    /* DirPicker dentro do body do modal: touch-friendly */
    .modal-body .dir-picker-btn {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 10px;
    }

    /* Quick create */
    .quick-create-modal .modal-header {
        margin-bottom: var(--space-2);
    }
    .quick-create-options {
        gap: var(--space-4);
        padding: var(--space-3) 0 0;
    }
    .qc-btn {
        padding: var(--space-6) var(--space-4);
        gap: var(--space-3);
        border-radius: 14px;
    }
    .qc-btn-icon {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }
    .qc-btn-label {
        font-size: 16px;
        font-weight: 600;
    }

    /* Item form: diretório select */
    .modal-dir-select {
        font-size: 15px;
        padding: 10px 14px;
        max-width: 200px;
        border-radius: 10px;
        height: auto;
    }

    /* Item form: grid de tipos */
    .type-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        margin-bottom: var(--space-4);
    }
    .type-card {
        padding: var(--space-2) var(--space-1);
        min-height: 58px;
        gap: 3px;
    }
    .type-card-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .type-card-label {
        font-size: 10px;
    }

    /* Item form: tags */
    .tags-toggle-btn {
        font-size: 15px;
        padding: 12px 14px;
        border-radius: 10px;
    }
    .tag-dropdown {
        padding: var(--space-4) 0 var(--space-2);
        gap: 8px;
    }
    .tag-check-item {
        padding: 7px 14px;
        font-size: 14px;
    }
}

/* Tag chips */
.item-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--space-2);
}

/* Data de criação no modal de edição */
.item-form-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-right: auto;
    align-self: center;
}

/* Drag-to-reorder na grid de itens */
.item-drag-wrap {
    display: flex;
    flex-direction: column;
    cursor: grab;
    position: relative;
}
.item-drag-wrap[draggable="false"] { cursor: default; }
.item-drag-wrap > .item-card { flex: 1; }
.item-drag-wrap.is-dragging { opacity: 0.35; }

.item-drag-wrap.drop-before::before,
.item-drag-wrap.drop-after::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--color-green);
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
}
.item-drag-wrap.drop-before::before { top: -1px; }
.item-drag-wrap.drop-after::after   { bottom: -1px; }

/* Drag target na sidebar (diretório recebendo drop).
   Como cada tree-row é um draggable (drop-zone), o ghost do vuedraggable é
   appendado dentro quando o user está prestes a soltar — destacamos a row. */
.tree-row.drag-target,
.tree-row:has(> .drag-ghost) {
    background: color-mix(in srgb, var(--color-green) 16%, transparent);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1.5px var(--color-green-border);
}

/* Indicador de posição before/after para reorder de irmãos */
.tree-node.drop-before > .tree-row {
    box-shadow: 0 -2px 0 0 var(--color-green);
    border-radius: 0;
}
.tree-node.drop-after > .tree-row {
    box-shadow: 0 2px 0 0 var(--color-green);
    border-radius: 0;
}
.tag-chip {
    display: inline-block;
    padding: 1px 8px;
    background: color-mix(in srgb, var(--tag-color, var(--border-subtle)) 14%, transparent);
    color: color-mix(in srgb, var(--tag-color, var(--text-secondary)) 85%, var(--text-secondary));
    font-size: 11px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.2px;
}

/* Search */
.search-form {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.search-input {
    flex: 1;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-primary);
    font-size: 14px;
}
.search-input:focus {
    outline: none;
    border-color: var(--color-green);
}
mark {
    background: rgba(225, 29, 72, 0.25);
    color: var(--color-green);
    padding: 0 2px;
    border-radius: 3px;
}

/* Upgrade banner + locked pill */
.upgrade-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-md);
    background: var(--accent-wash, rgba(225, 29, 72, 0.08));
    margin-bottom: var(--space-4);
    font-size: 13px;
    color: var(--text-secondary);
}

/* === App nav (in-app) === */
.app-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}
.app-nav .nav-brand {
    flex-shrink: 0;
}
.app-nav .nav-actions {
    justify-self: end;
}

/* Nav: slot da sidebar (toggle + brand) */
.nav-sidebar-slot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: calc(260px - var(--space-4));
    flex-shrink: 0;
}
.nav-search {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 5px 12px;
    transition: border-color 120ms ease;
}
.nav-search:focus-within { border-color: var(--color-green); }
.nav-search-icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    display: inline-flex;
}
.nav-search-icon svg { width: 100%; height: 100%; display: block; }
.nav-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    padding: 0;
}
.nav-search input::placeholder { color: var(--text-muted); }
.nav-search input::-webkit-search-decoration,
.nav-search input::-webkit-search-cancel-button,
.nav-search input::-webkit-search-results-button,
.nav-search input::-webkit-search-results-decoration { display: none; }
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Estilo do item "Cor" no menu de 3 pontinhos do diretório.
   Input color é escondido — clique no label abre o picker nativo. */
.dir-menu-option--color { position: relative; }
.dir-menu-color-swatch {
    margin-left: auto;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.dir-menu-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
    border: 0;
    padding: 0;
}
.btn-nav-pasta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    min-width: 104px;
    padding: 0 22px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 150ms ease, transform 150ms ease;
}
.btn-nav-pasta:hover { opacity: 0.85; }
.btn-nav-pasta:active { transform: scale(0.95); }
.btn-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    min-width: 104px;
    padding: 0 22px;
    background: var(--color-green);
    color: var(--color-near-black);
    border: 0;
    border-radius: var(--radius-lg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 150ms ease, transform 150ms ease;
}
.btn-nav-item:hover { opacity: 0.85; }
.btn-nav-item:active { transform: scale(0.95); opacity: 1; }

/* === Sidebar: estrutura em coluna com rodapé (user) === */
.sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sidebar-tree {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: var(--space-2);
}
/* ── Sidebar upgrade banner ── */
.sidebar-upgrade {
    flex-shrink: 0;
    margin: 0 var(--space-2) var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.sidebar-upgrade-usage {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-upgrade-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}
.sidebar-upgrade-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 500;
}
.sidebar-upgrade-bar {
    height: 3px;
    background: var(--border-subtle);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}
.sidebar-upgrade-bar-fill {
    height: 100%;
    background: var(--color-green);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.sidebar-upgrade-bar-fill.is-full { background: var(--color-crimson); }
.sidebar-upgrade-cta {
    display: block;
    text-align: center;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-green);
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.sidebar-upgrade-cta:hover {
    background: var(--color-green);
    color: #0f0f0f;
}

.sidebar-user-desktop { flex-shrink: 0; }

/* Conversor IA → Markdown (atalho global no sidebar) */
.sidebar-ai-tool {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: calc(100% - var(--space-3) * 2);
    margin: var(--space-2) var(--space-3) 0;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}
.sidebar-ai-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
}
.sidebar-ai-tool-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-ai-tool-lock {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Anual: gradiente sutil + brilho ao hover (roxo do markdown) */
.sidebar-ai-tool--unlocked {
    background: linear-gradient(135deg, color-mix(in srgb, #a371f7 10%, transparent), color-mix(in srgb, #a371f7 4%, transparent));
    border-color: color-mix(in srgb, #a371f7 25%, transparent);
    color: var(--text-primary);
}
.sidebar-ai-tool--unlocked .sidebar-ai-tool-icon {
    background: color-mix(in srgb, #a371f7 18%, transparent);
    color: #a371f7;
}
.sidebar-ai-tool--unlocked:hover {
    background: linear-gradient(135deg, color-mix(in srgb, #a371f7 18%, transparent), color-mix(in srgb, #a371f7 8%, transparent));
    border-color: color-mix(in srgb, #a371f7 45%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, #a371f7 18%, transparent);
}

/* Anual: variante verde do WhatsApp */
.sidebar-ai-tool--whatsapp {
    background: linear-gradient(135deg, color-mix(in srgb, #25D366 10%, transparent), color-mix(in srgb, #25D366 4%, transparent));
    border-color: color-mix(in srgb, #25D366 25%, transparent);
    color: var(--text-primary);
}
.sidebar-ai-tool--whatsapp .sidebar-ai-tool-icon {
    background: color-mix(in srgb, #25D366 18%, transparent);
    color: #25D366;
}
.sidebar-ai-tool--whatsapp:hover {
    background: linear-gradient(135deg, color-mix(in srgb, #25D366 18%, transparent), color-mix(in srgb, #25D366 8%, transparent));
    border-color: color-mix(in srgb, #25D366 45%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, #25D366 18%, transparent);
}

/* Free: fosco com cadeado */
.sidebar-ai-tool--locked {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
    opacity: 0.85;
}
.sidebar-ai-tool--locked .sidebar-ai-tool-icon {
    background: var(--border-subtle);
    color: var(--text-muted);
}
.sidebar-ai-tool--locked:hover {
    background: var(--border-subtle);
    color: var(--text-secondary);
    opacity: 1;
}

/* Modal Conversor IA */
.ai-convert-modal { max-width: 980px; }
.ai-convert-icon { color: var(--color-green); margin-right: 6px; }
.ai-convert-body { padding: var(--space-3) var(--space-4); }
.ai-convert-hint {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 var(--space-3);
}
.ai-convert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.ai-convert-grid.is-single { grid-template-columns: 1fr; }
.ai-convert-col { display: flex; flex-direction: column; min-width: 0; }
.ai-convert-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ai-convert-label-side {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-green);
    font-size: 11px;
}
.ai-convert-textarea {
    width: 100%;
    min-height: 280px;
    resize: vertical;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-elevated, var(--bg-subtle));
    color: var(--text-primary);
}
.ai-convert-output {
    min-height: 280px;
    max-height: 480px;
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-elevated, var(--bg-subtle));
}
.ai-convert-placeholder {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-convert-actions {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 768px) {
    .ai-convert-grid { grid-template-columns: 1fr; }
    .ai-convert-textarea, .ai-convert-output { min-height: 200px; }
}
/* (removido) .sidebar-sync — agora vive dentro de .sidebar-user-text como sublinha do nome */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2) var(--space-2);
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}
.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background 120ms ease;
}
.sidebar-user-info:hover { background: var(--border-subtle); color: inherit; }
.sidebar-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-green);
    color: var(--color-near-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar-user-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-user-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Linha separada do status do Drive, centralizada abaixo do bloco do user. */
.sidebar-user-sync {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding: 0 var(--space-2);
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1;
}
.sidebar-user-sync i { opacity: 0.7; font-size: 11px; }
.sidebar-logout {
    padding: 0 8px;
    height: 28px;
    font-size: 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.sidebar-logout:hover {
    color: var(--color-green);
    border-color: var(--color-green-border);
    background: transparent;
}

/* Overlay é sempre oculto no desktop; fica fixo apenas no mobile quando ativo */
.sidebar-overlay { display: none; }

/* === Fixes de overflow e tipografia responsiva === */
html, body { overflow-x: hidden; }
.app-shell {
    grid-template-columns: 260px minmax(0, 1fr);
    max-width: 100vw;
    transition: grid-template-columns 0.22s ease;
}
.main { min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.sidebar { min-width: 0; transition: padding 0.22s ease; }

/* === Sidebar colapsável (desktop) === */
body.sidebar-collapsed .app-shell {
    grid-template-columns: 0 minmax(0, 1fr);
}
body.sidebar-collapsed .sidebar {
    padding: 0;
    overflow: hidden;
    border-right: none;
}
.main-header { flex-wrap: wrap; gap: var(--space-3); }
.breadcrumbs { flex-wrap: wrap; min-width: 0; }
.breadcrumbs .current { overflow-wrap: anywhere; }
.item-title, .item-card-title, .search-result-title {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.code-block, .raw-content, pre, .markdown-body pre {
    max-width: 100%;
    overflow-x: auto;
}

/* === Tags === */
.tag-create-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}
.tag-color-input {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    background: transparent;
    flex-shrink: 0;
}
.tag-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.tag-color-input::-webkit-color-swatch { border: none; border-radius: 6px; }
.dir-no-color {
    opacity: 0.7;
}
.dir-color-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-4);
}
.dir-color-hint {
    font-size: 12px;
    color: var(--text-secondary);
}
.dir-color-clear-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.6;
}
.dir-color-clear-btn:hover { opacity: 1; }
.dir-color-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}
.tag-name-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 4px 0;
}
.tag-name-input::placeholder { color: var(--text-muted); }

.tags-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.tag-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background 120ms;
}
.tag-row:hover { background: var(--bg-card); }
.tag-row:hover .tag-row-actions { opacity: 1; }
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--tag-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color) 30%, transparent);
    border-radius: 999px;
    padding: 3px 10px 3px 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.tag-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tag-color);
    flex-shrink: 0;
}
.tag-pill__name { line-height: 1.4; }
.tag-row-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity 120ms;
}

/* === Mobile (<= 768px) === */
@media (max-width: 768px) {
    :root { --nav-mobile-h: 70px; }
    .app-nav {
        padding: 14px var(--space-3);
        gap: var(--space-2);
    }
    .app-nav .nav-brand .brand-icon { width: 44px; height: 44px; padding: 6px; }
    .app-nav .nav-brand { font-size: 24px; gap: 10px; }
    .btn-sidebar-toggle { padding: 12px; font-size: 18px; }
    .nav-sidebar-slot { width: auto; gap: var(--space-2); justify-content: flex-start; min-width: 0; }
    .nav-actions { gap: 6px; }
    .btn-nav-label { display: none; }
    .btn-nav-pasta { width: 76px; min-width: 0; height: 46px; padding: 0; font-size: 20px; flex-shrink: 0; }
    .btn-nav-item  { width: 76px; min-width: 0; height: 46px; padding: 0; font-size: 20px; flex-shrink: 0; }

    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    /* Sidebar: drawer off-canvas — colado no topbar (sem gap superior) */
    .sidebar {
        position: fixed;
        top: var(--nav-mobile-h, 70px);
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 88vw;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        border-right: 1px solid var(--border-subtle);
        border-bottom: none;
        overflow-y: auto;
        background: var(--bg-card);
        padding: 0 var(--space-3) var(--space-3);
    }
    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.25);
    }

    /* Sidebar tree: app-like touch targets */
    .sidebar-tree { padding-top: var(--space-3); }
    .tree-node { margin-bottom: 3px; }
    .tree-row {
        padding: 4px 8px 4px 4px;
        border-radius: 10px;
    }
    .tree-link {
        font-size: 16px;
        padding: 8px 6px;
        gap: 12px;
    }
    .tree-icon { width: 26px; height: 26px; }
    .tree-icon svg { width: 22px; height: 22px; }
    .tree-toggle { width: 40px; height: 40px; }
    .tree-toggle svg { width: 17px; height: 17px; }
    .tree-label { font-size: 16px; }

    /* Sidebar add btn */
    .sidebar-add-btn {
        padding: 13px 16px;
        font-size: 15px;
        border-radius: 10px;
    }

    /* User section */
    .sidebar-user {
        padding: var(--space-4) var(--space-2) var(--space-3);
        gap: var(--space-3);
    }
    .sidebar-user-avatar { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 199;
        cursor: pointer;
        display: none;
    }
    .sidebar-overlay.is-visible { display: block; }

    .main { padding: var(--space-6) var(--space-4); }
    .main-header { flex-direction: column; align-items: flex-start; }
    .item-detail-header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
    .item-detail-header .breadcrumbs { overflow: hidden; min-width: 0; flex-shrink: 1; }
    .item-detail-header .breadcrumbs .current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dir-page-header { gap: var(--space-2); }
    .dir-page-header .main-header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
    .dir-subdirs-aside { display: none; }
    .dir-menu-panel { right: 0; left: auto; min-width: 230px; padding: 8px; gap: 2px; }
    .dir-menu-option { font-size: 18px; padding: 16px 16px; gap: 12px; border-radius: 10px; }
    .dir-menu-option-icon { width: 20px; font-size: 17px; }
    .dir-menu-sep { margin: 8px 0; }
    .dir-menu-btn { width: 40px; height: 40px; }
    .header-actions { gap: var(--space-3); }
    .breadcrumbs { font-size: 17px; }
    .item-card-title { font-size: 16px; }
    .item-type-badge { font-size: 13px; padding: 5px 10px; gap: 5px; }
    .icon-btn { font-size: 20px; padding: 6px 10px; }
    /* Previne zoom automático do iOS ao focar inputs com font-size < 16px */
    input, textarea, select { font-size: 16px; }
    .dir-toolbar { flex-direction: column; align-items: stretch; }
    .dir-toolbar-left { width: 100%; }
    .dir-toolbar-right { width: 100%; flex-wrap: wrap; }
    .dir-toolbar-right .btn { flex: 1; font-size: 12px; padding: 8px 10px; }
    .filter-select { flex: 1; }

    .main {
        padding-bottom: var(--space-6);
    }

    .item-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .item-grid.view-list .item-card-preview-area { display: none; }
    .item-grid.view-list .item-card {
        padding: 12px var(--space-3);
        min-height: 56px;
    }
    .item-grid.view-list .item-card-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-2);
        flex: 1 1 auto;
        min-width: 0;
    }
    .item-grid.view-list .item-type-badge { font-size: 11px; padding: 3px 8px; }
    .item-grid.view-list .item-card-title {
        width: auto;
        min-width: 0;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .card-menu-dropdown { min-width: 180px; }
    .card-menu-option { font-size: 16px; padding: 12px 14px; gap: 10px; }
    .card-menu-option-icon { width: 18px; font-size: 15px; }
    .item-grid.view-list .item-card-tags { padding-left: 0; }

    /* card view mobile — altura suficiente pra 3-4 linhas de preview além do título */
    .item-grid:not(.view-list) { grid-auto-rows: 240px; }
    .item-grid:not(.view-list) .item-card { height: 240px; max-height: 240px; }
    .item-card-title { font-size: 17px; }
    .item-card-preview { font-size: 14px; }
    .card-preview-text { font-size: 14px; }
    .upgrade-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .upgrade-banner .btn { width: 100%; }
    .link-card-img { width: 80px; height: 60px; }
}

/* === Mobile pequeno (<= 420px) === */
@media (max-width: 420px) {
    :root { --nav-mobile-h: 60px; }
    .app-nav { gap: 6px; padding: 12px var(--space-2); }
    .app-nav .nav-brand .brand-icon { width: 46px; height: 46px; padding: 6px; }
    .app-nav .nav-brand { font-size: 23px; gap: 10px; }
    .btn-sidebar-toggle { padding: 10px; font-size: 16px; }
    .nav-actions { gap: 6px; }
    .btn-nav-pasta { width: 64px; height: 46px; font-size: 19px; }
    .btn-nav-item  { width: 64px; height: 46px; font-size: 19px; }
}

/* === Mobile bem pequeno (<= 360px — S23 padrão e similares) === */
@media (max-width: 360px) {
    :root { --nav-mobile-h: 54px; }
    .app-nav { gap: 4px; padding: 10px 8px; }
    .app-nav .nav-brand .brand-icon { width: 32px; height: 32px; padding: 4px; }
    .app-nav .nav-brand { font-size: 17px; gap: 6px; }
    .btn-sidebar-toggle { padding: 8px; font-size: 15px; }
    .nav-actions { gap: 4px; }
    .btn-nav-pasta { width: 56px; height: 44px; font-size: 17px; }
    .btn-nav-item  { width: 56px; height: 44px; font-size: 17px; }
}


/* Sidebar user: sempre dentro da sidebar; mobile-bar não é mais usada */
.sidebar-user-mobile-bar { display: none; }

/* Account page */
.account-page { padding-top: var(--space-8); }
.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}
.account-grid .card { padding: var(--space-6); }
.danger-card { border-color: rgba(231, 67, 81, 0.35); }
.btn.danger {
    color: var(--color-crimson);
    border-color: rgba(231, 67, 81, 0.35);
}
.btn.danger:hover { background: rgba(231, 67, 81, 0.08); }

/* Pull-to-refresh — indicador discreto (PWA standalone não tem PTR nativo) */
.ptr-indicator {
    position: fixed;
    top: 72px;
    left: 50%;
    translate: -50% 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.7;
    pointer-events: none;
    z-index: 10;
}
.ptr-spinner {
    width: 18px;
    height: 18px;
    color: currentColor;
    stroke: currentColor;
}
.ptr-refreshing .ptr-spinner {
    animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

/* ── ShareModal component ───────────────────────────────── */
.share-modal-loading {
    display: flex;
    justify-content: center;
    padding: var(--space-8) 0;
}
.share-modal-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-green);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
.share-modal-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}
.share-modal-section { display: flex; flex-direction: column; gap: var(--space-2); }
/* Respiro entre seções consecutivas (ex: lista de convidados → bloco do LINK) */
.share-modal-section + .share-modal-section { margin-top: var(--space-4); }
.share-modal-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.share-modal-link-row { display: flex; gap: var(--space-2); }
.share-modal-email-row { display: flex; gap: var(--space-2); }
.share-modal-input {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-family: var(--font-mono, monospace);
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--text-primary);
}
.share-modal-input[type=email] { font-family: inherit; }
.share-modal-copy { white-space: nowrap; }
.share-modal-revoke-row { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.share-modal-snapshot-hint { font-size: 12px; color: var(--text-muted); margin: var(--space-2) 0 0; }

/* Ações do snapshot — base compacta (usada pelo Convidar). */
.share-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.2;
}
/* Republicar / Revogar / Convidar — altura alinhada com inputs do modal
   (~40px). Convidar também herda stretch da .share-invite-row. */
.share-action-btn--republish,
.share-action-btn--revoke,
.share-action-btn--invite,
.share-action-btn--confirm,
.share-action-btn--cancel {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.2;
    gap: 6px;
    justify-content: center;
    font-family: var(--font-primary);
    min-height: 40px;
}
.share-action-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.share-action-btn--republish {
    background: var(--text-primary);
    color: var(--bg-page);
    border-color: var(--text-primary);
}
.share-action-btn--republish:hover:not(:disabled) { opacity: 0.86; }
.share-action-btn--revoke,
.share-action-btn--confirm {
    background: transparent;
    color: var(--color-crimson);
    border-color: var(--color-crimson-border);
}
.share-action-btn--revoke:hover:not(:disabled),
.share-action-btn--confirm:hover:not(:disabled) {
    background: var(--color-crimson-soft);
    border-color: var(--color-crimson);
}
.share-action-btn--confirm {
    background: var(--color-crimson);
    color: #fff;
    border-color: var(--color-crimson);
}
.share-action-btn--confirm:hover:not(:disabled) {
    background: var(--color-crimson);
    opacity: 0.88;
    color: #fff;
}
.share-modal-revoke-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.share-modal-revoke-confirm-msg { font-size: 13px; color: var(--text-muted); }
.share-modal-revoke-confirm-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.share-action-btn--cancel {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}
.share-action-btn--cancel:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}
.share-modal-divider { height: 1px; background: var(--border-subtle); margin: var(--space-4) 0; }
.share-modal-feedback { font-size: 13px; margin: 0; }
.share-modal-feedback--ok { color: var(--color-green, #34a853); }
.share-modal-feedback--err { color: var(--color-red, #e05555); }
.share-modal-feedback--warn { color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 8px 10px; border-radius: var(--radius-sm); }
[data-theme="dark"] .share-modal-feedback--warn,
:root:not([data-theme="light"]) .share-modal-feedback--warn { color: #fbbf24; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); }
.btn-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--color-green-link); text-decoration: underline; }
.btn-link--muted { color: var(--text-muted); }
.btn-link--muted:hover { color: var(--color-red, #e05555); }

/* ── Share public pages ─────────────────────────────────── */
.share-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: var(--bg-nav);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    z-index: 10;
}
.share-nav-brand { display: flex; align-items: center; }
.share-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.share-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--color-green);
    color: #0f0f0f;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
    box-shadow: 0 1px 2px rgba(225, 29, 72, 0.18), 0 3px 8px rgba(225, 29, 72, 0.12);
}
.share-nav-cta:hover {
    color: #0f0f0f;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(225, 29, 72, 0.22), 0 6px 14px rgba(225, 29, 72, 0.18);
}
@media (max-width: 520px) {
    .share-nav-cta { display: none; }
}

.share-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6);
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.share-page--not-found {
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 70vh;
}

.share-header { padding-bottom: var(--space-2); }
.share-header-inner { display: flex; flex-direction: column; gap: var(--space-3); }
.share-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.share-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    flex-wrap: wrap;
}
.share-breadcrumb-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 120ms ease;
}
.share-breadcrumb-link:hover { color: var(--text-primary); }
.share-breadcrumb-sep {
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 calc(var(--space-2) * -1);
}
/* Folder card no share: badge dourado, sem preview area */
.item-card--folder .item-type-badge[data-type="folder"] {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}
:root[data-theme="dark"] .item-card--folder .item-type-badge[data-type="folder"] {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}
.share-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.share-item-title-h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.share-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.share-body { flex: 1; }

/* Quando o item-grid é renderizado num <ul> (share SSR), tira o bullet padrão.
   No dashboard o item-grid é num <div>, então essa regra é no-op lá. */
.share-body ul.item-grid {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.share-body ul.item-grid > li { list-style: none; }

/* Em viewports estreitos (mobile + desktop com DevTools) vira flex column simples:
   foge do grid-auto-rows: 220px do dash, que reservava 220px de slot mesmo se
   o card crescesse pra 280px, fazendo o próximo card "subir" pra dentro do anterior.
   Também força overflow:hidden no card e no preview-area pra cortar conteúdo
   markdown/code que extrapole a altura. */
@media (max-width: 768px) {
    .share-page { padding: var(--space-8) var(--space-4); }
    .share-body .item-grid:not(.view-list) {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        grid-auto-rows: auto;
    }
    .share-body .item-grid:not(.view-list) .item-card {
        height: 260px;
        max-height: 260px;
        width: 100%;
        overflow: hidden;
    }
    /* Mobile não tem hover real — deixa scroll touch sempre habilitado
       pro user conseguir ver o conteúdo extra (mesmo padrão do iOS Safari). */
    .share-body .item-grid:not(.view-list) .item-card-preview-area {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Toggle lista/cards no header do share */
.share-view-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    flex-shrink: 0;
}
.share-view-toggle:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.share-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--color-green-link, var(--color-green));
    text-decoration: none;
    margin-bottom: var(--space-3);
    transition: opacity 0.12s;
}
.share-back:hover {
    color: var(--color-green-link, var(--color-green));
    opacity: 0.78;
}

/* Card central pra páginas "locked" / not_found / access_denied */
.share-locked-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
[data-theme="dark"] .share-locked-card {
    box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.25);
}
.share-locked-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--color-green);
}
.share-locked-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.share-locked-desc {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2);
    line-height: 1.55;
}
.share-locked-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 var(--space-6);
}
.share-locked-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.share-cta-secondary {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.share-cta-secondary:hover { color: var(--text-primary); }

.share-content { line-height: 1.7; }
.share-cl-check { accent-color: var(--color-green); pointer-events: none; cursor: default; }
.share-content pre {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    font-size: 13px;
}
.share-content code { font-family: var(--font-mono, monospace); font-size: 13px; }
.share-content h1,.share-content h2,.share-content h3 { margin-top: var(--space-6); }
.share-content p { margin-bottom: var(--space-3); }
.share-content a { color: var(--color-green-link); }
.share-content blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: var(--space-4);
    color: var(--text-muted);
    margin-left: 0;
}
.share-pre {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.6;
    font-family: inherit;
}
.share-og-img { max-width: 100%; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.share-og-title { display: block; font-size: 16px; font-weight: 600; margin-bottom: var(--space-1); }
.share-og-desc { color: var(--text-secondary); margin-bottom: var(--space-2); }
.share-og-url { font-size: 13px; color: var(--text-muted); word-break: break-all; }

.share-empty, .share-notice { color: var(--text-muted); font-size: 14px; }

.share-notfound-title { font-size: 24px; font-weight: 700; margin-bottom: var(--space-2); }

.share-cta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 12px 24px;
    background: var(--color-green);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 0 2px 4px rgba(225, 29, 72, 0.2), 0 6px 14px rgba(225, 29, 72, 0.14);
}
.share-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(225, 29, 72, 0.26), 0 10px 22px rgba(225, 29, 72, 0.2);
}

/* ── Divisores / Sections (minimalista) ── */
.sections-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
/* Modo card vira kanban horizontal — colunas lado-a-lado, sem caixa */
.sections-board:not(.view-list) {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
}
.section-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-radius: var(--radius-sm);
    padding: 2px 0;
    transition: background 120ms ease;
}
.sections-board:not(.view-list) .section-group {
    width: 300px;
    flex-shrink: 0;
}
.section-group.drop-target {
    background: var(--bg-hover);
}
.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: border-color 120ms ease, background 120ms ease;
}
.section-header:hover {
    border-color: var(--color-green);
}
.section-header:focus-visible {
    outline: 1px solid var(--color-green-border);
    outline-offset: 2px;
}
.section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.section-dot.is-empty {
    background: var(--border-color);
}
.section-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.section-chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 150ms ease;
    margin-left: var(--space-1);
}
.section-chevron.is-collapsed {
    transform: rotate(-90deg);
}
/* Modo kanban (card): items empilhados verticalmente dentro de cada coluna */
.sections-board:not(.view-list) .section-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    grid-template-columns: none;
    grid-auto-rows: auto;
    min-height: 80px;
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1);
    border-radius: var(--radius-md);
    transition: background 120ms ease, border-color 120ms ease;
    border: 1px dashed transparent;
}
.sections-board:not(.view-list) .section-body.is-empty {
    border-color: var(--border-subtle);
    min-height: 130px;
    justify-content: center;
    margin: 0;
    padding: 0;
}
/* Drag-wrap não pode encolher dentro do flex column da section */
.sections-board:not(.view-list) .item-drag-wrap {
    flex-shrink: 0;
    width: 100%;
}
.section-empty {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0;
    padding: 0;
    grid-column: 1 / -1;
    text-align: center;
    pointer-events: none;
}

/* ── Classes do vuedraggable / SortableJS ── */
.drag-ghost {
    opacity: 0.4;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
}
.drag-ghost > .item-card {
    border-style: dashed;
    border-color: var(--color-green-border);
}
.drag-chosen {
    cursor: grabbing;
}
.drag-active {
    opacity: 0.9;
    transform: rotate(1deg);
}
.item-drag-wrap { cursor: grab; }
.item-drag-wrap.is-pinned { cursor: default; }

/* Highlight da seção-alvo durante drag */
.sections-board:not(.view-list) .section-body.sortable-drag-over,
.sections-board:not(.view-list) .section-body:has(> .drag-ghost) {
    background: color-mix(in srgb, var(--color-green) 6%, transparent);
    border-color: var(--color-green-border);
}

@media (max-width: 768px) {
    /* Wrapper relativo pra ancorar o fade-indicator de scroll */
    .sections-board-wrap:not(.view-list) {
        position: relative;
        margin-left: calc(var(--space-3) * -1);
        margin-right: calc(var(--space-3) * -1);
    }
    /* Fade sutil na borda direita indicando que há mais conteúdo */
    .sections-board-wrap:not(.view-list)::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: var(--space-2);
        width: 28px;
        background: linear-gradient(to right, transparent, var(--bg-page) 85%);
        pointer-events: none;
        z-index: 1;
    }
    /* Kanban real no mobile: colunas lado-a-lado com scroll horizontal e snap */
    .sections-board:not(.view-list) {
        flex-direction: row;
        gap: var(--space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--space-3);
        -webkit-overflow-scrolling: touch;
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    .sections-board:not(.view-list) .section-group {
        width: 90vw;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    /* Fluxo vertical natural dentro da coluna (sem scroll interno) */
    .sections-board:not(.view-list) .section-body {
        min-height: 60px;
        max-height: none;
        overflow: visible;
    }
    /* Card no kanban mobile: altura fixa pra mostrar 3-4 linhas de preview.
       `flex: 0 0 auto` é essencial: a regra global `.item-drag-wrap > .item-card { flex: 1 }`
       coloca flex-basis:0, o que no Safari iOS colapsa o card pra min-content
       (resultava em cards de ~140px com 1 linha só). Aqui restauramos basis=auto
       pra `height` valer. */
    .sections-board:not(.view-list) .item-drag-wrap > .item-card {
        height: 240px;
        max-height: 240px;
        flex: 0 0 auto;
    }
}

/* ── Modal: mover item para diretório/divisor ── */
.move-item-sections {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.move-item-section {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.move-item-section:hover {
    border-color: var(--color-green-border);
}
.move-item-section.is-selected {
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    border-color: var(--color-green-border);
    color: var(--text-primary);
}

/* ── Modal de gestão de divisores ── */
.sections-manager {
    padding: var(--space-4) var(--space-5);
}
.sections-manager-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
}
.sections-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.sections-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    position: relative;
}
.sections-row.is-dragging { opacity: 0.4; }
.sections-row.drop-before::before,
.sections-row.drop-after::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--color-green);
}
.sections-row.drop-before::before { top: -2px; }
.sections-row.drop-after::after { bottom: -2px; }
.sections-grip {
    cursor: grab;
    color: var(--text-muted);
    font-size: 12px;
    user-select: none;
}
.sections-grip:active { cursor: grabbing; }
.sections-color-chip {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.sections-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}
.sections-name-input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 13px;
}
.sections-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.sections-action:hover { color: var(--text-primary); background: var(--bg-hover); }
.sections-action.is-danger:hover { color: var(--color-crimson); }
.sections-empty {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    margin: 0 0 var(--space-4);
}
.sections-add {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}
.sections-add input[type="text"] {
    flex: 1;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 13px;
}
.btn.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* ── Mobile: gestor de divisores quebra em duas linhas no modo edição ── */
@media (max-width: 600px) {
    .sections-row {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }
    .sections-row .sections-name-input {
        flex: 1 1 100%;
        min-width: 0;
        order: -1;
    }
    .sections-add {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }
    .sections-add input[type="text"] {
        flex: 1 1 100%;
    }
}

/* ── Mobile: sem zoom-in automático ao focar campos ──
   iOS dá zoom quando um input/textarea/select tem fonte < 16px. Forçar 16px nos
   campos no mobile elimina esse zoom indesejado. A pinça do usuário segue normal
   (não mexemos no maximum-scale do viewport). */
@media (max-width: 768px) {
    input,
    textarea,
    select,
    [contenteditable="true"] {
        font-size: 16px !important;
    }
}

/* ── Share editor (Fase 2): editor inline pro share público com role=editor ── */
.share-role-chip {
    display: inline-block; padding: 2px 8px;
    background: var(--accent-wash, #fef3c7);
    color: var(--color-amber, #92400e);
    border-radius: 8px; font-size: 11px; font-weight: 600;
}
.share-save-status { margin-left: 8px; font-size: 12px; color: var(--text-muted); }
.share-save-status[data-state="saving"] { color: var(--color-amber, #92400e); }
.share-save-status[data-state="saved"]   { color: var(--color-green, #16a34a); }
.share-save-status[data-state="conflict"],
.share-save-status[data-state="err"]     { color: var(--color-crimson, #dc2626); }

.share-item-title-input {
    font-size: 28px; font-weight: 700;
    background: transparent;
    border: 1px dashed transparent; border-radius: 6px;
    padding: 4px 8px; color: var(--text-primary);
    width: 100%; max-width: 100%;
}
.share-item-title-input:focus,
.share-item-title-input:hover {
    border-color: var(--border-color);
    background: var(--bg-input); outline: none;
}

.share-edit-wrap { margin-top: var(--space-4, 16px); }
.share-edit-textarea {
    width: 100%; min-height: 240px; padding: 12px 14px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 14px; line-height: 1.6;
    color: var(--text-primary); background: var(--bg-input);
    border: 1px solid var(--border-color); border-radius: 8px;
    resize: vertical;
}
.share-edit-textarea:focus {
    outline: none; border-color: var(--color-green-border);
}
.share-edit-actions {
    display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.share-edit-save-btn {
    padding: 8px 18px; font-size: 13px; font-weight: 600;
    color: #fff; background: var(--color-crimson, #dc2626);
    border: none; border-radius: 6px; cursor: pointer;
    transition: opacity 120ms;
}
.share-edit-save-btn:hover:not(:disabled) { opacity: 0.9; }
.share-edit-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.share-edit-save-btn--secondary {
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.share-edit-hint { font-size: 12px; color: var(--text-muted); }
.share-edit-hint[data-kind="err"] { color: var(--color-crimson, #dc2626); }

.share-attachment-delete {
    margin-left: auto; background: transparent; border: none;
    color: var(--text-muted); font-size: 18px; line-height: 1;
    cursor: pointer; padding: 0 6px;
}
.share-attachment-delete:hover { color: var(--color-crimson, #dc2626); }

.share-attachments-upload {
    margin-top: 12px; display: flex; align-items: center; gap: 12px;
}

.share-modal-sublabel {
    display: block;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 4px;
}
/* ── Convite estilo Google Drive (input + role + notify + lista) ───────── */
.share-invite-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.share-invite-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
    flex-wrap: nowrap;
}
.share-invite-email {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 10px;
}

/* Dropdown custom de role (estilo Fixei, não <select> nativo) */
.share-role-dropdown {
    position: relative;
    flex: 0 0 auto;
}
.share-role-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* Padding/font alinhados com .modal-form input pra invite-row ficar uniforme */
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font-primary);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-width: 110px;
    justify-content: space-between;
    transition: border-color 0.12s, background 0.12s;
    line-height: 1.3;
}
.share-role-trigger:hover:not(:disabled) { border-color: var(--text-muted); }
.share-role-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.share-role-dropdown[data-open] .share-role-trigger { border-color: var(--color-green); }
.share-role-caret {
    font-size: 9px;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.share-role-dropdown[data-open] .share-role-caret { transform: rotate(180deg); }
.share-role-trigger--inline {
    background: transparent;
    border-color: transparent;
    padding: 4px 8px;
    min-width: 78px;
    font-size: 12px;
    color: var(--text-secondary);
}
.share-role-trigger--inline:hover:not(:disabled) {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.share-role-menu {
    min-width: 140px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
    padding: 4px;
    display: flex;
    flex-direction: column;
}
/* Variante teleportada pro body: posicionada via JS pra escapar do
   overflow:hidden da lista de pessoas e do próprio modal. */
.share-role-menu--fixed {
    position: fixed;
    z-index: 10000;
}
[data-theme="dark"] .share-role-menu {
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
}
.share-role-option {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    text-align: left;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
    width: 100%;
}
.share-role-option:hover { background: var(--bg-hover); }
.share-role-option.is-active { color: var(--color-green); font-weight: 600; }
.share-role-check {
    font-size: 11px;
    color: var(--color-green);
    width: 12px;
    flex-shrink: 0;
}
.share-action-btn--invite {
    background: var(--color-green);
    color: #fff;
    border-color: var(--color-green);
}
.share-action-btn--invite:hover:not(:disabled) {
    background: var(--color-green-link, var(--color-green));
    border-color: var(--color-green-link, var(--color-green));
    color: #fff;
    opacity: 1;
}
/* Especificidade aumentada pra ganhar de .modal-form label { display: block } */
.modal-form label.share-invite-notify {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    margin: 6px 0 0;
    padding-left: 2px;
}
.share-invite-notify input[type=checkbox] {
    margin: 0 0 0 0;
    width: 15px;
    height: 15px;
    accent-color: var(--color-green);
    cursor: pointer;
    flex-shrink: 0;
}

/* Toggle de acesso (radios "Qualquer um" / "Apenas convidados") */
.share-access-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.modal-form label.share-access-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.share-access-option input[type=radio] {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--color-green);
    cursor: pointer;
    flex-shrink: 0;
}

/* Responsivo: em mobile, empilha email / role / botão */
@media (max-width: 520px) {
    .share-invite-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .share-invite-email {
        flex: 1 1 100%;
        order: 1;
    }
    .share-role-dropdown {
        flex: 1 1 auto;
        order: 2;
    }
    .share-role-trigger {
        width: 100%;
        min-width: 0;
    }
    .share-action-btn--invite {
        flex: 0 0 auto;
        order: 3;
    }
    .share-role-menu { left: 0; right: auto; }
    .share-person-row { padding: 8px; gap: 6px; }
    .share-person-email { font-size: 12.5px; }
}

/* Lista de pessoas com acesso */
.share-people-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.share-person-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.share-person-row:last-child { border-bottom: none; }
.share-person-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-person-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--color-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}
.share-person-email {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-person-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.12s, color 0.12s;
}
.share-person-remove:hover:not(:disabled) {
    background: var(--color-crimson-soft);
    color: var(--color-crimson);
}
.share-person-remove:disabled { opacity: 0.5; cursor: not-allowed; }
.share-magic-list {
    list-style: none; padding: 0; margin: 6px 0 0;
    display: flex; flex-direction: column; gap: 6px;
}
.share-magic-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px;
    background: var(--bg-input); border: 1px solid var(--border-color);
    border-radius: 6px;
}
.share-magic-email {
    flex: 1; font-size: 13px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-magic-role {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
}
.share-magic-btn { padding: 4px 10px; font-size: 12px; }