:root {
    --brand: #235c45;
    --brand-dark: #173d2e;
    --brand-soft: #e5efe9;
    --ink: #18231f;
    --ink-2: #34413b;
    --muted: #748079;
    --muted-2: #9aa39e;
    --line: #e2e5e1;
    --line-strong: #d3d8d3;
    --canvas: #f4f5f1;
    --surface: #ffffff;
    --success: #2f7a58;
    --success-soft: #e5f2ea;
    --warning: #b8752d;
    --warning-soft: #fbefdc;
    --danger: #b85349;
    --danger-soft: #f9e7e4;
    --neutral-soft: #edf0ed;
    --shadow-sm: 0 1px 2px rgba(24, 35, 31, .04), 0 5px 18px rgba(24, 35, 31, .025);
    --shadow-md: 0 18px 45px rgba(28, 38, 33, .09);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --sidebar-width: 248px;
    --ease: cubic-bezier(.22, .8, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
input, select, textarea { min-width: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
    outline-offset: 2px;
}

::selection { color: #fff; background: var(--brand); }

.icon { flex: 0 0 auto; }
.desktop-only { display: initial; }

/* App shell */
.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    padding: 25px 17px 18px;
    color: #dce6e1;
    background:
        radial-gradient(circle at 20% 0%, rgba(104, 158, 131, .14), transparent 34%),
        linear-gradient(180deg, #14261f 0%, #102019 100%);
    border-right: 1px solid rgba(255,255,255,.04);
}

.sidebar::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.12));
}

.sidebar__top { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 26px; }
.sidebar__close { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__logo { display: block; height: 30px; width: auto; }
.brand__logo--visual { height: 34px; }

.office-pill {
    display: grid;
    grid-template-columns: 33px 1fr 16px;
    align-items: center;
    gap: 10px;
    margin: 0 2px 22px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}
.office-pill__mark {
    width: 33px; height: 33px; display: grid; place-items: center;
    color: #234a39; background: #dbe9e1; border-radius: 9px;
    font-size: 10px; font-weight: 800; letter-spacing: .5px;
}
.office-pill__mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.office-pill__content { min-width: 0; display: flex; flex-direction: column; }
.office-pill__content strong { overflow: hidden; color: #f3f7f5; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.office-pill__content small { color: #8fa49a; font-size: 10px; }
.office-pill__chevron { color: #84998f; }

.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    color: #94a79e;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 540;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
.nav-item.is-active { color: #fff; background: rgba(255,255,255,.095); }
.nav-item.is-active::before {
    content: "";
    position: absolute;
    left: -17px;
    width: 3px;
    height: 22px;
    border-radius: 0 6px 6px 0;
    background: #85b89f;
}
.nav-item__icon { width: 22px; display: grid; place-items: center; }
.sidebar__spacer { flex: 1; min-height: 32px; }

.sidebar-profile {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 36px 1fr 32px;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 14px 8px 2px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-profile__copy { min-width: 0; display: flex; flex-direction: column; }
.sidebar-profile__copy strong, .sidebar-profile__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile__copy strong { color: #edf3f0; font-size: 11px; font-weight: 650; }
.sidebar-profile__copy small { color: #81968c; font-size: 9px; }

.sidebar .icon-button { color: #80948a; }
.sidebar .icon-button:hover { color: #fff; background: rgba(255,255,255,.08); }

.main-shell { min-height: 100vh; margin-left: var(--sidebar-width); }
.page-container { width: min(100%, 1500px); margin: 0 auto; padding: 36px clamp(24px, 3.2vw, 52px) 54px; }
.mobile-header, .mobile-dock { display: none; }
.mobile-header__spacer, .project-hero__nav-spacer { width: 36px; height: 36px; display: block; }
.sidebar-overlay { display: none; }

/* Shared elements */
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-header h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 3vw, 41px); font-weight: 500; line-height: 1.08; letter-spacing: -1.1px; }
.page-header--dashboard h1 { font-size: clamp(32px, 3.2vw, 44px); }
.page-kicker, .eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}
.page-actions, .page-header__back { display: flex; align-items: center; gap: 11px; }
.page-header__back { gap: 17px; }

.button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 680;
    letter-spacing: .05px;
    transition: transform .18s var(--ease), box-shadow .18s ease, background .18s ease, border .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(.985); }
.button--primary { color: #fff; background: var(--brand); box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 24%, transparent); }
.button--primary:hover { background: color-mix(in srgb, var(--brand) 88%, black); box-shadow: 0 10px 25px color-mix(in srgb, var(--brand) 28%, transparent); }
.button--soft { color: var(--brand-dark); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 10%, white); }
.button--ghost { color: var(--ink-2); background: transparent; border-color: var(--line); }
.button--ghost:hover { background: #f6f7f4; border-color: var(--line-strong); }
.button--wide { width: 100%; }
.button--lg { min-height: 50px; border-radius: 12px; }
.button--sm { min-height: 34px; padding: 0 12px; font-size: 11px; border-radius: 9px; }
.button.is-loading { pointer-events: none; opacity: .72; }
.button.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .75s linear infinite; }
.button.is-loading .icon { display: none; }

.icon-button {
    position: relative;
    width: 36px; height: 36px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.icon-button:hover { color: var(--ink); background: #f1f3ef; }
.icon-button:active { transform: scale(.95); }
.icon-button--border { color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.icon-button--on-dark { color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.icon-button--on-dark:hover { color: #fff; background: rgba(255,255,255,.15); }

.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; background: #d77668; border: 1.5px solid var(--surface); border-radius: 50%; }

.avatar {
    width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto;
    color: #fff; background: var(--brand); border-radius: 50%;
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
}
.avatar--soft { color: #244739; background: #d9e8df; }
.avatar--xs { width: 23px; height: 23px; font-size: 7px; }
.avatar--lg { width: 49px; height: 49px; font-size: 12px; }
.avatar--xl { width: 58px; height: 58px; font-size: 14px; }
.avatar--client { border-radius: 12px; }
.avatar--tone-1 { color: #594234; background: #eadbcf; }
.avatar--tone-2 { color: #2d5146; background: #d9e9e2; }
.avatar--tone-3 { color: #44526d; background: #dee4f0; }
.avatar--tone-4 { color: #65465a; background: #ecdee7; }

.status-badge {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 0 9px;
    color: var(--ink-2);
    background: var(--neutral-soft);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 720;
    white-space: nowrap;
}
.status-badge > i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.status-badge--success { color: #286746; background: var(--success-soft); }
.status-badge--warning { color: #9b6428; background: var(--warning-soft); }
.status-badge--danger { color: #a2463d; background: var(--danger-soft); }
.status-badge--neutral { color: #68736d; background: var(--neutral-soft); }

.progress-track { height: 4px; display: block; overflow: hidden; background: #e7eae6; border-radius: 999px; }
.progress-track i { height: 100%; display: block; background: var(--brand); border-radius: inherit; transition: width .65s var(--ease); }
.progress-track--lg { height: 5px; }

.section-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 22px 17px; }
.section-header > div { display: flex; align-items: baseline; gap: 10px; }
.section-header h2 { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; letter-spacing: -.25px; }
.section-header span { color: var(--muted-2); font-size: 10px; }
.section-header--compact { padding-bottom: 8px; }
.section-link { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-size: 10px; font-weight: 700; }
.section-link:hover .icon { transform: translateX(2px); }

/* Dashboard */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.metric-card {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    padding: 17px 18px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease), box-shadow .22s ease;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(28,38,33,.07); }
.metric-card--dark { color: #fff; background: linear-gradient(145deg, #183229, #12241e); border-color: #183229; box-shadow: 0 12px 26px rgba(17,39,30,.16); }
.metric-card__top, .metric-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric-card__top > span:first-child { color: var(--muted); font-size: 10px; font-weight: 650; }
.metric-card--dark .metric-card__top > span:first-child { color: #9ab0a6; }
.metric-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.metric-icon--danger { color: #ca655a; background: rgba(206,99,87,.12); }
.metric-card--dark .metric-icon--danger { color: #ec9187; background: rgba(222,110,98,.14); }
.metric-icon--warning { color: var(--warning); background: var(--warning-soft); }
.metric-icon--success { color: var(--success); background: var(--success-soft); }
.metric-icon--brand { color: var(--brand); background: var(--brand-soft); }
.metric-card__value { margin: 9px 0 6px; font-family: Georgia, serif; font-size: 37px; line-height: 1; letter-spacing: -1.4px; }
.metric-card__value small { margin-left: 2px; font-family: inherit; font-size: 17px; }
.metric-card__meta { margin-top: auto; color: var(--muted-2); font-size: 9px; }
.metric-card--dark .metric-card__meta { color: #8fa59a; }
.trend { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; transform: rotate(-45deg); }
.trend--down { color: #ec9187; background: rgba(222,110,98,.12); }
.mini-dots { display: flex; gap: 3px; }
.mini-dots i { width: 3px; height: 3px; background: #c5a56e; border-radius: 50%; }
.metric-spark { height: 22px; display: flex; align-items: flex-end; gap: 2px; }
.metric-spark i { width: 3px; background: #7faf94; border-radius: 3px; }
.progress-mini { width: 48px; height: 3px; overflow: hidden; background: #e4e7e3; border-radius: 9px; }
.progress-mini i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .68fr); gap: 16px; }
.portfolio-card { min-width: 0; overflow: hidden; }
.project-list { padding: 0 11px 10px; }
.project-row {
    min-height: 76px;
    display: grid;
    grid-template-columns: 46px minmax(130px, 1.25fr) minmax(100px, .75fr) minmax(100px, .7fr) auto 24px;
    align-items: center;
    gap: 13px;
    padding: 9px 9px;
    border-top: 1px solid #edf0ec;
    border-radius: 10px;
    transition: background .18s ease, transform .18s ease;
}
.project-row:hover { background: #f7f8f5; transform: translateX(2px); }
.project-thumb { position: relative; width: 46px; height: 49px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.project-thumb::before, .project-card__visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 40%, rgba(255,255,255,.23)); }
.project-thumb::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.4); border-right: 0; border-bottom: 0; }
.project-thumb span { position: relative; z-index: 1; color: rgba(255,255,255,.92); font-family: Georgia, serif; font-size: 11px; }
.project-thumb--1 { background: linear-gradient(135deg, #7c9787, #476456); }
.project-thumb--2 { background: linear-gradient(135deg, #aa8a73, #775e4c); }
.project-thumb--3 { background: linear-gradient(135deg, #778a9c, #495c6d); }
.project-thumb--4 { background: linear-gradient(135deg, #a38f91, #6d585b); }
.project-thumb--5 { background: linear-gradient(135deg, #918d77, #625f4e); }
.project-row__identity, .project-row__phase { min-width: 0; display: flex; flex-direction: column; }
.project-row__identity strong { overflow: hidden; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.project-row__identity small, .project-row__phase small { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-row__phase strong { overflow: hidden; margin-top: 2px; color: var(--ink-2); font-size: 10px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.project-row__progress { display: flex; flex-direction: column; gap: 6px; }
.project-row__progress > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.project-row__progress small { color: var(--muted-2); font-size: 8px; }
.project-row__progress strong { font-size: 9px; }
.project-row__arrow { color: #abb3ae; }

.dashboard-aside { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.health-card, .activity-card { overflow: hidden; }
.health-chart { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 16px; padding: 9px 22px 23px; }
.radial-progress {
    --value: 0;
    width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%;
    background: conic-gradient(var(--brand) calc(var(--value) * 1%), #e8ebe7 0);
    position: relative;
}
.radial-progress::before { content: ""; position: absolute; inset: 8px; background: var(--surface); border-radius: inherit; }
.radial-progress > div { position: relative; display: flex; flex-direction: column; align-items: center; }
.radial-progress strong { font-family: Georgia, serif; font-size: 24px; font-weight: 500; line-height: 1; }
.radial-progress span { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.health-legend { display: flex; flex-direction: column; gap: 11px; }
.health-legend > div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; }
.health-legend span { color: var(--muted); font-size: 9px; }
.health-legend strong { font-size: 10px; }
.dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; }
.dot--success { background: #5d9d78; }
.dot--warning { background: #d29a54; }
.dot--danger { background: #c7655b; }
.dot--neutral { background: #9aa39e; }

.activity-list { padding: 5px 20px 15px; }
.activity-item { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 10px; padding: 9px 0; }
.activity-item + .activity-item { border-top: 1px solid #f0f2ef; }
.activity-item__icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 9px; }
.activity-item__copy { min-width: 0; display: flex; flex-direction: column; }
.activity-item__copy strong { overflow: hidden; font-size: 9px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.activity-item__copy small { color: var(--muted-2); font-size: 8px; }
.activity-empty { padding: 22px; color: var(--muted-2); font-size: 10px; text-align: center; }

/* Toolbar and listings */
.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.surface--toolbar { min-height: 60px; padding: 9px 10px 9px 16px; border-radius: 14px; }
.search-control { min-width: 210px; max-width: 330px; flex: 1; display: flex; align-items: center; gap: 9px; color: var(--muted-2); }
.search-control input { width: 100%; height: 36px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 11px; }
.search-control input::placeholder { color: #a6aea9; }
.filter-pills { display: flex; align-items: center; gap: 5px; padding: 3px; background: #f3f4f1; border-radius: 10px; }
.filter-pill { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 650; white-space: nowrap; }
.filter-pill span { min-width: 18px; height: 18px; display: grid; place-items: center; background: rgba(0,0,0,.05); border-radius: 999px; font-size: 8px; }
.filter-pill.is-active { color: var(--ink); background: var(--surface); box-shadow: 0 2px 8px rgba(28,38,33,.07); }
.toolbar__count { margin-left: auto; display: flex; align-items: baseline; gap: 5px; padding-right: 10px; }
.toolbar__count strong { font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.toolbar__count span { color: var(--muted-2); font-size: 9px; }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.project-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-sm); transition: transform .24s var(--ease), box-shadow .24s ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,38,33,.1); }
.project-card__visual { position: relative; height: 142px; overflow: hidden; }
.project-card__visual::after {
    content: "";
    position: absolute;
    width: 170px; height: 112px;
    right: -12px; bottom: -33px;
    border: 1px solid rgba(255,255,255,.28);
    transform: skewX(-18deg) rotate(-7deg);
}
.project-card__visual-line { position: absolute; left: 31px; bottom: -25px; width: 115px; height: 115px; border: 1px solid rgba(255,255,255,.22); transform: rotate(35deg); }
.project-card__code { position: absolute; top: 15px; left: 16px; z-index: 2; color: rgba(255,255,255,.8); font-size: 8px; font-weight: 750; letter-spacing: .8px; }
.status-badge--floating { position: absolute; z-index: 2; top: 12px; right: 12px; }
.project-card__monogram { position: absolute; z-index: 1; left: 18px; bottom: 13px; color: rgba(255,255,255,.9); font-family: Georgia, serif; font-size: 27px; letter-spacing: -1px; }
.project-card__body { padding: 16px 17px 15px; }
.project-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-card__heading > div { min-width: 0; }
.project-card__heading h2 { overflow: hidden; font-family: Georgia, serif; font-size: 18px; font-weight: 500; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.project-card__heading span { display: block; overflow: hidden; margin-top: 2px; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.round-arrow { width: 29px; height: 29px; display: grid !important; place-items: center; flex: 0 0 auto; margin: 0 !important; color: var(--muted); background: #f2f4f1; border-radius: 50%; transition: color .2s, background .2s, transform .2s; }
.project-card:hover .round-arrow { color: #fff; background: var(--brand); transform: rotate(-25deg); }
.project-card__phase { display: flex; align-items: center; justify-content: space-between; margin: 17px 0 7px; color: var(--muted); font-size: 9px; }
.project-card__phase strong { color: var(--ink); font-size: 10px; }
.project-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.project-card__footer > span:first-child { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.card-count { min-width: 25px; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 7px; border-radius: 8px; font-size: 8px; font-weight: 700; }
.card-count--danger { color: var(--danger); background: var(--danger-soft); }
.card-count--warning { color: var(--warning); background: var(--warning-soft); }
.card-count--success { color: var(--success); background: var(--success-soft); }

.data-surface { overflow: hidden; }
.data-table__head, .data-table__row { display: grid; align-items: center; column-gap: 18px; }
.data-table--clients .data-table__head, .data-table--clients .data-table__row { grid-template-columns: 1.3fr 1.1fr .42fr .5fr 36px; }
.data-table__head { min-height: 45px; padding: 0 18px; color: var(--muted-2); background: #f8f9f7; border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 750; letter-spacing: .55px; text-transform: uppercase; }
.data-table__row { min-height: 74px; padding: 9px 18px; border-bottom: 1px solid #edf0ec; transition: background .18s; }
.data-table__row:last-child { border-bottom: 0; }
.data-table__row:hover { background: #fafbf9; }
.entity-cell { min-width: 0; display: flex; align-items: center; gap: 11px; }
.entity-cell > div, .contact-cell { min-width: 0; display: flex; flex-direction: column; }
.entity-cell strong, .contact-cell span { overflow: hidden; font-size: 10px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.entity-cell small, .contact-cell small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.project-count { display: flex; align-items: baseline; gap: 4px; }
.project-count strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.project-count span { color: var(--muted-2); font-size: 8px; }
.row-action { display: flex; justify-content: flex-end; }
.no-results { grid-column: 1 / -1; padding: 50px; color: var(--muted); text-align: center; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.team-card { padding: 17px; transition: transform .22s var(--ease), box-shadow .22s ease; }
.team-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(28,38,33,.08); }
.team-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.team-card__identity { margin: 12px 0; }
.team-card__identity h2 { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.team-card__identity span { color: var(--muted-2); font-size: 9px; }
.team-card__tags { min-height: 25px; display: flex; flex-wrap: wrap; gap: 6px; }
.role-tag, .permission-tag { min-height: 23px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 7px; font-size: 8px; font-weight: 680; }
.role-tag { color: var(--ink-2); background: #f0f2ef; }
.permission-tag { color: var(--brand); background: var(--brand-soft); }
.team-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 13px; color: var(--muted); border-top: 1px solid #edf0ec; font-size: 8px; }
.team-card__footer strong { color: var(--ink); font-size: 11px; }
.status-dot-label { display: inline-flex; align-items: center; gap: 5px; }

/* Forms */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 17px; }
.form-layout--narrow { max-width: 820px; grid-template-columns: 1fr; }
.form-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form-aside { position: sticky; top: 20px; }
.form-section { padding: 22px; scroll-margin-top: 20px; }
.form-section__header { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.form-section__header h2 { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.form-section__index { width: 27px; height: 27px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 8px; font-size: 8px; font-weight: 800; }
.form-grid { display: grid; gap: 17px 15px; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { display: inline-block; margin-bottom: 7px; color: var(--ink-2); font-size: 9px; font-weight: 700; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; }
.field-control {
    position: relative;
    min-height: 43px;
    display: flex;
    align-items: center;
    background: #fbfcfa;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field-control:focus-within { background: #fff; border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 9%, transparent); }
.field-control input, .field-control select, .field-control textarea {
    width: 100%; min-height: 41px; padding: 0 12px; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 11px;
}
.field-control textarea { min-height: 85px; padding-top: 10px; resize: vertical; }
.field-control select { appearance: none; padding-right: 36px; cursor: pointer; }
.field-control--icon { padding-left: 12px; }
.field-control--icon > .icon { color: var(--muted-2); }
.field-control--icon input { padding-left: 9px; }
.field-control--select > .icon { position: absolute; right: 11px; color: var(--muted-2); pointer-events: none; }
.field-control--password { padding-right: 39px; }
.field-control--password input { padding-right: 0; }
.password-toggle { position: absolute; right: 4px; width: 33px; height: 33px; display: grid; place-items: center; color: var(--muted-2); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.password-toggle:hover { color: var(--ink); background: #f0f2ef; }
.field-control--suffix input { padding-right: 48px; }
.field-control--suffix > span { position: absolute; right: 12px; color: var(--muted-2); font-size: 9px; }
.field.has-error .field-control { border-color: #d98278; box-shadow: 0 0 0 3px rgba(185,76,66,.06); }
.field-error { display: block; margin-top: 5px; color: var(--danger); font-size: 8px; }
.text-button { padding: 0; color: var(--brand); background: none; border: 0; cursor: pointer; font-size: 9px; font-weight: 680; }

.form-summary { padding: 21px; }
.form-summary__mark { width: 42px; height: 42px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 12px; }
.form-summary h2 { margin: 15px 0 17px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.summary-list { margin-bottom: 18px; border-top: 1px solid var(--line); }
.summary-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf0ec; }
.summary-list span { color: var(--muted); font-size: 8px; }
.summary-list strong { font-size: 9px; font-weight: 680; }
.form-summary .button + .button { margin-top: 6px; }
.form-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 3px 0 18px; }
.form-footer--sticky { position: sticky; bottom: 12px; z-index: 4; padding: 12px; background: rgba(244,245,241,.87); border: 1px solid rgba(220,224,220,.8); border-radius: 14px; backdrop-filter: blur(14px); }

.toggle-card { min-height: 64px; display: grid !important; grid-template-columns: 37px 1fr auto auto; align-items: center; gap: 10px; margin: 0 !important; padding: 11px 13px; background: #f8faf7; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.toggle-card__icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 10px; }
.toggle-card__copy { display: flex; flex-direction: column; }
.toggle-card__copy strong { font-size: 10px; }
.toggle-card__copy small { color: var(--muted-2); font-size: 8px; }
.toggle-card input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 36px; height: 21px; display: block; padding: 3px; background: #d8ddda; border-radius: 999px; transition: background .2s; }
.switch i { width: 15px; height: 15px; display: block; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.16); transition: transform .2s var(--ease); }
.toggle-card input:checked + .switch { background: var(--brand); }
.toggle-card input:checked + .switch i { transform: translateX(15px); }

/* Project detail */
.project-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 17px 21px 0;
    color: #fff;
    background:
        linear-gradient(125deg, rgba(32,77,59,.96), rgba(19,43,34,.98)),
        var(--brand);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(23,58,44,.16);
}
.project-hero::before { content: ""; position: absolute; width: 270px; height: 270px; right: 6%; top: -150px; border: 1px solid rgba(255,255,255,.1); transform: rotate(35deg); }
.project-hero::after { content: ""; position: absolute; width: 250px; height: 80px; left: 34%; bottom: 0; border: 1px solid rgba(255,255,255,.07); transform: skewX(-30deg); }
.project-hero__nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.project-hero__code { color: rgba(255,255,255,.54); font-size: 9px; font-weight: 730; letter-spacing: 1px; }
.project-hero__content { position: relative; z-index: 1; min-height: 167px; display: flex; align-items: center; justify-content: space-between; padding: 12px 23px 17px; }
.project-hero__content h1 { margin-top: 10px; font-family: Georgia, serif; font-size: clamp(32px, 4vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -1.2px; }
.project-hero__content p { margin-top: 7px; color: rgba(255,255,255,.58); font-size: 10px; }
.status-badge--hero { color: #244e3b; background: rgba(235,245,239,.92); }
.radial-progress--light { width: 104px; height: 104px; background: conic-gradient(#dbeadf calc(var(--value) * 1%), rgba(255,255,255,.12) 0); }
.radial-progress--light::before { background: #214838; }
.radial-progress--light span { color: rgba(255,255,255,.54); }
.project-hero__line { position: relative; z-index: 2; height: 4px; margin: 0 -21px; background: rgba(255,255,255,.09); }
.project-hero__line i { display: block; height: 100%; background: #a8cbb8; }

.project-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 15px; padding: 7px; overflow-x: auto; border-radius: 13px; }
.project-tabs a, .project-tabs span { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; font-size: 9px; font-weight: 650; white-space: nowrap; }
.project-tabs a.is-active { color: #fff; background: var(--brand); }
.project-tabs span { color: #a3aaa6; cursor: default; }
.project-overview { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, .55fr); gap: 15px; }
.project-overview__main, .project-overview__aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.project-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.compact-stat { display: flex; align-items: center; gap: 11px; padding: 13px; }
.compact-stat__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
.compact-stat__icon--success { color: var(--success); background: var(--success-soft); }
.compact-stat__icon--warning { color: var(--warning); background: var(--warning-soft); }
.compact-stat__icon--danger { color: var(--danger); background: var(--danger-soft); }
.compact-stat > div { display: flex; flex-direction: column; }
.compact-stat strong { font-family: Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1; }
.compact-stat span { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.detail-card { overflow: hidden; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 0 15px 15px; }
.detail-item { display: flex; align-items: center; gap: 10px; padding: 14px 8px; border-top: 1px solid #edf0ec; }
.detail-item__icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 9px; }
.detail-item > div { display: flex; flex-direction: column; }
.detail-item small { color: var(--muted-2); font-size: 8px; }
.detail-item strong { font-size: 10px; font-weight: 650; }
.mini-timeline { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: start; padding: 10px 24px 24px; }
.mini-timeline__item { display: grid; grid-template-columns: 20px auto; gap: 7px; align-items: start; }
.mini-timeline__item i { width: 20px; height: 20px; display: grid; place-items: center; background: #ecefec; border: 4px solid #f6f7f5; border-radius: 50%; }
.mini-timeline__item.is-done i { color: #fff; background: var(--brand); border-width: 0; }
.mini-timeline__item.is-current i { background: var(--warning); box-shadow: 0 0 0 5px var(--warning-soft); }
.mini-timeline__item > div { display: flex; flex-direction: column; white-space: nowrap; }
.mini-timeline__item strong { font-size: 9px; }
.mini-timeline__item span { color: var(--muted-2); font-size: 8px; }
.mini-timeline__line { height: 2px; margin: 9px 8px 0; background: #e5e8e4; }
.mini-timeline__line.is-done { background: var(--brand); }
.owner-card { display: grid; grid-template-columns: 49px 1fr; align-items: center; gap: 10px; padding: 16px; }
.owner-card > div { min-width: 0; display: flex; flex-direction: column; }
.owner-card small { color: var(--muted-2); font-size: 8px; }
.owner-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-side-list { padding: 7px 15px; }
.project-side-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf0ec; }
.project-side-list > div:last-child { border: 0; }
.project-side-list span { color: var(--muted-2); font-size: 8px; }
.project-side-list strong { max-width: 57%; overflow: hidden; font-size: 9px; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.address-card { display: flex; align-items: center; gap: 11px; padding: 15px; }
.address-card > span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 10px; }
.address-card > div { display: flex; flex-direction: column; }
.address-card small { color: var(--muted-2); font-size: 8px; }
.address-card strong { font-size: 9px; font-weight: 620; }

/* Settings */
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 770px); align-items: start; gap: 16px; }
.settings-nav { position: sticky; top: 20px; display: flex; flex-direction: column; padding: 7px; }
.settings-nav a { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px; color: var(--muted); border-radius: 9px; font-size: 9px; font-weight: 650; }
.settings-nav a:hover { color: var(--ink); background: #f4f6f3; }
.settings-nav a.is-active { color: var(--brand); background: var(--brand-soft); }
.settings-content { display: flex; flex-direction: column; gap: 15px; }
.brand-upload { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.brand-upload__preview { width: 68px; height: 68px; display: grid; place-items: center; color: #fff; background: var(--office-color); border-radius: 18px; font-family: Georgia, serif; font-size: 18px; box-shadow: 0 8px 20px color-mix(in srgb, var(--office-color) 22%, transparent); }
.brand-upload__preview img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.brand-upload__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.brand-upload__actions span { color: var(--muted-2); font-size: 8px; }
.color-control { display: grid; grid-template-columns: 42px 1fr; }
.color-control input[type="color"] { width: 32px; height: 30px; align-self: center; margin-left: 5px; padding: 0; overflow: hidden; border: 0; border-radius: 7px; cursor: pointer; }

/* Empty and errors */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 210px; color: var(--muted); }
.empty-state--compact { min-height: 250px; }
.empty-state--grid { grid-column: 1 / -1; }
.empty-state__icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 14px; }
.empty-state strong { color: var(--ink-2); font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.error-page { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.error-page h1 { font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.error-page p { color: var(--muted); }
.error-page__icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); border-radius: 18px; }
.error-code { color: var(--brand); font-family: Georgia, serif; font-size: 74px; line-height: 1; }
.debug-trace { max-width: min(900px, 90vw); max-height: 240px; overflow: auto; padding: 15px; color: #e8eeeb; background: #17231f; border-radius: 10px; font-size: 10px; text-align: left; white-space: pre-wrap; }

/* Auth */
.auth-body { min-height: 100vh; background: #f5f6f2; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1.06fr) minmax(410px, .94fr); }
.auth-visual {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 36px clamp(34px, 5vw, 72px);
    color: #f2f7f4;
    background:
        radial-gradient(circle at 80% 20%, rgba(124,173,148,.18), transparent 32%),
        linear-gradient(145deg, #173329, #10241d 72%);
}
.auth-visual::before { content: ""; position: absolute; right: -120px; top: -60px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.06); transform: rotate(28deg); }
.auth-visual::after { content: ""; position: absolute; left: -90px; bottom: 70px; width: 280px; height: 150px; border: 1px solid rgba(255,255,255,.055); transform: skewX(-30deg) rotate(15deg); }
.auth-visual__grid { position: absolute; inset: 0; opacity: .035; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 42px 42px; }
.auth-visual__brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; font-family: Georgia, serif; font-size: 20px; }
.auth-visual__composition { position: relative; z-index: 2; width: min(100%, 550px); margin: clamp(80px, 13vh, 140px) auto 0; }
.visual-kicker { margin-bottom: 13px; color: #90aa9e; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.auth-visual__composition h2 { font-family: Georgia, serif; font-size: clamp(34px, 3.6vw, 50px); font-weight: 400; line-height: 1.02; letter-spacing: -1.6px; }
.auth-visual__composition h2 em { color: #c9b68a; font-style: normal; }
.visual-dashboard { width: min(100%, 470px); margin-top: 37px; padding: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 28px 50px rgba(0,0,0,.12); backdrop-filter: blur(10px); transform: perspective(900px) rotateY(-4deg) rotateX(2deg); }
.visual-dashboard__head { display: flex; align-items: center; justify-content: space-between; color: #dbe7e1; font-size: 10px; font-weight: 650; }
.visual-status { display: flex; align-items: center; gap: 5px; color: #95aea2; font-size: 7px; }
.visual-status i { width: 5px; height: 5px; background: #83c19d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(131,193,157,.09); }
.visual-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 0 12px; }
.visual-metrics > div { display: flex; flex-direction: column; padding: 10px; background: rgba(255,255,255,.055); border-radius: 9px; }
.visual-metrics strong { font-family: Georgia, serif; font-size: 19px; font-weight: 400; }
.visual-metrics span { color: #849e92; font-size: 7px; }
.visual-project { display: grid; grid-template-columns: 31px 1fr 72px 26px; align-items: center; gap: 9px; padding: 9px 4px; border-top: 1px solid rgba(255,255,255,.07); }
.visual-project__image { width: 31px; height: 31px; background: linear-gradient(135deg, #a09279, #5f6658); border-radius: 7px; }
.visual-project__image--two { background: linear-gradient(135deg, #758e86, #405b50); }
.visual-project__copy { display: flex; flex-direction: column; }
.visual-project__copy strong { font-size: 8px; }
.visual-project__copy small { color: #7f9b8e; font-size: 6px; }
.visual-project__progress { height: 3px; overflow: hidden; background: rgba(255,255,255,.1); border-radius: 5px; }
.visual-project__progress i { display: block; height: 100%; background: #a4c9b5; border-radius: inherit; }
.visual-project b { font-size: 7px; font-weight: 650; }
.auth-visual__footer { position: absolute; z-index: 2; left: clamp(34px, 5vw, 72px); bottom: 31px; color: #718b7f; font-size: 8px; letter-spacing: .55px; text-transform: uppercase; }

.auth-panel { display: grid; place-items: center; min-height: 100vh; padding: 38px clamp(28px, 5vw, 72px); }
.auth-panel__inner { width: min(100%, 370px); }
.auth-brand { display: none; margin-bottom: 60px; }
.auth-heading { margin-bottom: 30px; }
.auth-heading h1 { font-family: Georgia, serif; font-size: 35px; font-weight: 500; letter-spacing: -.8px; }
.auth-form { display: flex; flex-direction: column; gap: 17px; }
.auth-form .field label { font-size: 10px; }
.auth-form .field-control { min-height: 48px; background: #fff; }
.check-control { display: flex; align-items: center; gap: 8px; width: max-content; color: var(--muted); cursor: pointer; font-size: 9px; }
.check-control input { position: absolute; opacity: 0; }
.check-control__box { width: 17px; height: 17px; display: grid; place-items: center; color: transparent; background: #fff; border: 1px solid var(--line-strong); border-radius: 5px; transition: .18s; }
.check-control input:checked + .check-control__box { color: #fff; background: var(--brand); border-color: var(--brand); }
.auth-security { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 26px; color: var(--muted-2); font-size: 8px; }
.auth-link { width: max-content; display: flex; align-items: center; gap: 5px; margin: 20px auto 0; color: var(--brand); font-size: 10px; font-weight: 700; }
.auth-link:hover { color: var(--brand-dark); }
.reset-link-card { display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; gap: 10px; margin: -7px 0 20px; padding: 12px; color: #fff; background: linear-gradient(135deg, #214c3b, #17362a); border-radius: 13px; box-shadow: 0 12px 30px rgba(23,54,42,.16); }
.reset-link-card > span { width: 38px; height: 38px; display: grid; place-items: center; color: #a9cbb9; background: rgba(255,255,255,.08); border-radius: 10px; }
.reset-link-card strong { font-size: 11px; }
.invalid-reset { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 15px; color: var(--danger); background: var(--danger-soft); border-radius: 12px; }
.invalid-reset strong { font-family: Georgia, serif; font-size: 17px; font-weight: 500; }

/* Platform */
.platform-pill .office-pill__mark { color: #dcebe3; background: rgba(255,255,255,.08); }
.platform-metrics { margin-bottom: 18px; }
.office-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.office-card { padding: 17px; transition: transform .22s var(--ease), box-shadow .22s ease; }
.office-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(28,38,33,.08); }
.office-card__top { display: flex; align-items: center; justify-content: space-between; }
.office-logo-mini { width: 43px; height: 43px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #315f50, #1e4034); border-radius: 12px; font-size: 11px; font-weight: 800; letter-spacing: .4px; }
.office-card__identity { display: flex; flex-direction: column; margin: 14px 0 17px; }
.office-card__identity > span { color: var(--brand); font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.office-card__identity h2 { margin-top: 3px; overflow: hidden; font-family: Georgia, serif; font-size: 19px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.office-card__identity small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.office-card__usage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.office-card__usage > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 10px; background: #f6f7f4; border-radius: 10px; }
.office-card__usage span { color: var(--muted); font-size: 8px; }
.office-card__usage strong { font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.office-card__usage strong small { color: var(--muted-2); font-size: 9px; }
.office-card__usage i { grid-column: 1 / -1; height: 3px; overflow: hidden; background: #e2e6e1; border-radius: 5px; }
.office-card__usage b { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.office-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 13px; color: var(--muted-2); border-top: 1px solid #edf0ec; font-size: 8px; }
.form-stack { display: flex; flex-direction: column; gap: 13px; margin: 17px 0; }
.limit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Operational core */
.project-tabs--operational { scrollbar-width: none; }
.project-tabs--operational::-webkit-scrollbar { display: none; }
.project-quick-actions { display: flex; gap: 8px; margin: -3px 0 15px; overflow-x: auto; scrollbar-width: none; }
.quick-action { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm); white-space: nowrap; transition: .18s; }
.quick-action:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); transform: translateY(-1px); }
.quick-action > span { color: var(--brand); }
.quick-action strong { font-size: 9px; }
.quick-action--primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.quick-action--primary > span { color: #fff; }

.operational-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 15px; }
.operational-metric { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 14px; }
.operational-metric__icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.operational-metric__icon--brand { color: var(--brand); background: var(--brand-soft); }
.operational-metric__icon--success { color: var(--success); background: var(--success-soft); }
.operational-metric__icon--warning { color: var(--warning); background: var(--warning-soft); }
.operational-metric__icon--danger { color: var(--danger); background: var(--danger-soft); }
.operational-metric > div { display: flex; flex-direction: column; }
.operational-metric strong { font-family: Georgia, serif; font-size: 23px; font-weight: 500; line-height: 1; }
.operational-metric strong small { color: var(--muted-2); font-size: 12px; }
.operational-metric span { margin-top: 4px; color: var(--muted-2); font-size: 8px; }

.responsible-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.responsible-card { padding: 16px; transition: transform .2s var(--ease), box-shadow .2s; }
.responsible-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.responsible-card.is-inactive { opacity: .63; }
.responsible-card__top, .responsible-card__footer { display: flex; align-items: center; justify-content: space-between; }
.party-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; }
.party-mark--office, .party-avatar--office { color: #25513f; background: #dcebe3; }
.party-mark--client, .party-avatar--client { color: #4b496c; background: #e4e4f1; }
.party-mark--external, .party-avatar--external { color: #74552f; background: #f2e5d3; }
.party-mark--unassigned, .party-avatar--unassigned { color: #68716c; background: #ecefec; }
.responsible-card__identity { display: flex; flex-direction: column; margin: 14px 0 12px; }
.responsible-card__identity > span { color: var(--brand); font-size: 7px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.responsible-card__identity h2 { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.responsible-card__identity small { color: var(--muted-2); font-size: 8px; }
.responsible-card__contact { min-height: 32px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 8px; }
.responsible-card__contact span { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.responsible-card__footer { margin-top: 12px; padding-top: 11px; color: var(--muted-2); border-top: 1px solid #edf0ec; font-size: 8px; }
.responsible-card__footer strong { color: var(--ink); font-size: 11px; }

.schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; gap: 14px; }
.schedule-phases { overflow: hidden; }
.progress-mini--wide { width: 80px; }
.phase-list { padding: 0 12px 12px; }
.phase-row { min-height: 89px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: stretch; gap: 8px; padding: 0 8px; border-top: 1px solid #edf0ec; border-radius: 11px; transition: background .18s; }
.phase-row:hover { background: #f8f9f7; }
.phase-row__rail { position: relative; display: flex; justify-content: center; }
.phase-row__rail b { position: absolute; top: 47px; bottom: -44px; width: 1px; background: #e2e6e2; }
.phase-row:last-child .phase-row__rail b, .phase-group:last-child > .phase-row .phase-row__rail b, .phase-group[open] > .phase-row .phase-row__rail b { display: none; }
.phase-dot { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; align-self: center; color: var(--muted); background: #edf0ed; border: 4px solid #fff; border-radius: 50%; font-size: 7px; font-style: normal; font-weight: 800; box-shadow: 0 0 0 1px #e5e9e5; }
.phase-dot--success { color: #fff; background: var(--success); border-width: 0; }
.phase-dot--warning { color: var(--warning); background: var(--warning-soft); }
.phase-dot--danger { color: var(--danger); background: var(--danger-soft); }
.phase-row__body { min-width: 0; align-self: center; }
.phase-row__heading, .phase-row__dates { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.phase-row__heading > span:first-child { min-width: 0; display: flex; flex-direction: column; }
.phase-row__heading strong { overflow: hidden; font-family: Georgia, serif; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.phase-row__heading small { color: var(--muted-2); font-size: 7px; }
.phase-row__dates { justify-content: flex-start; margin-top: 8px; color: var(--muted); font-size: 8px; }
.phase-row__dates > i { width: 16px; height: 1px; background: var(--line-strong); }
.phase-row__dates > b { margin-left: auto; }
.phase-row__arrow { display: grid; place-items: center; color: var(--muted-2); }
.due-text { font-size: 7px; font-weight: 700; font-style: normal; white-space: nowrap; }
.due-text--success { color: var(--success); }
.due-text--warning { color: var(--warning); }
.due-text--danger { color: var(--danger); }
.due-text--neutral { color: var(--muted-2); }
.schedule-aside { display: flex; flex-direction: column; gap: 13px; }
.milestone-panel { overflow: hidden; }
.milestone-list { padding: 0 13px 12px; }
.milestone-item { min-height: 68px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 8px 5px; border-top: 1px solid #edf0ec; }
.milestone-item__icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; }
.milestone-item__icon--success { color: var(--success); background: var(--success-soft); }
.milestone-item__icon--warning { color: var(--warning); background: var(--warning-soft); }
.milestone-item__icon--danger { color: var(--danger); background: var(--danger-soft); }
.milestone-item__icon--neutral { color: var(--muted); background: var(--neutral-soft); }
.milestone-item > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.milestone-item strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.milestone-item small { color: var(--muted-2); font-size: 7px; }
.milestone-item time { color: var(--muted); font-family: Georgia, serif; font-size: 12px; }
.milestone-list__more { padding: 9px 5px 2px; color: var(--muted-2); font-size: 7px; border-top: 1px solid #edf0ec; }

.phase-group { border-top: 1px solid #edf0ec; }
.phase-group > .phase-row { border-top: 0; border-radius: 11px; cursor: pointer; list-style: none; }
.phase-group > .phase-row::-webkit-details-marker { display: none; }
.phase-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; align-self: center; }
.phase-row__actions .icon-button { width: 30px; height: 30px; opacity: 0; transition: opacity .18s; }
.phase-row:hover .phase-row__actions .icon-button, .phase-row__actions .icon-button:focus-visible { opacity: 1; }
.phase-row__toggle { display: grid; place-items: center; width: 22px; color: var(--muted-2); transition: transform .22s var(--ease); }
.phase-group[open] > .phase-row .phase-row__toggle { transform: rotate(180deg); }
.phase-milestones { margin: 0 8px 12px 25px; padding: 2px 0 2px 15px; border-left: 1px solid #e2e6e2; }
.phase-milestone { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px; border-radius: 9px; transition: background .18s; }
.phase-milestone:hover { background: #f8f9f7; }
.phase-milestone__icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; }
.phase-milestone__icon--success { color: var(--success); background: var(--success-soft); }
.phase-milestone__icon--warning { color: var(--warning); background: var(--warning-soft); }
.phase-milestone__icon--danger { color: var(--danger); background: var(--danger-soft); }
.phase-milestone__icon--neutral { color: var(--muted); background: var(--neutral-soft); }
.phase-milestone > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.phase-milestone strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.phase-milestone small { color: var(--muted-2); font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-milestone__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.phase-milestone__meta time { color: var(--muted); font-family: Georgia, serif; font-size: 11px; }
.phase-milestones__empty { padding: 7px 6px; color: var(--muted-2); font-size: 8px; }
.phase-milestones__add { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 5px 6px; color: var(--brand); font-size: 8px; font-weight: 700; border-radius: 8px; transition: background .18s; }
.phase-milestones__add:hover { background: var(--brand-soft); }
.phase-group--general .phase-dot { font-size: inherit; }
.operational-link-card { min-height: 65px; display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; gap: 10px; padding: 12px; }
.operational-link-card__icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 11px; }
.operational-link-card--danger .operational-link-card__icon { color: var(--danger); background: var(--danger-soft); }
.operational-link-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.operational-link-card small { color: var(--muted-2); font-size: 7px; }
.operational-link-card strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.operational-link-card > .icon { color: var(--muted-2); }

.pending-list { display: flex; flex-direction: column; gap: 8px; }
.pending-row { min-height: 88px; display: grid; grid-template-columns: 43px minmax(180px, 1fr) 135px auto 22px; align-items: center; gap: 13px; padding: 12px 15px; transition: transform .18s, box-shadow .18s; }
.pending-row:hover { transform: translateX(2px); box-shadow: 0 10px 28px rgba(28,38,33,.07); }
.pending-row.is-blocking { border-left: 3px solid #cc675c; }
.pending-row__state { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; }
.pending-row__state--success { color: var(--success); background: var(--success-soft); }
.pending-row__state--warning { color: var(--warning); background: var(--warning-soft); }
.pending-row__state--danger { color: var(--danger); background: var(--danger-soft); }
.pending-row__state--neutral { color: var(--muted); background: var(--neutral-soft); }
.pending-row__identity { min-width: 0; display: flex; flex-direction: column; }
.pending-row__identity > strong { overflow: hidden; margin-top: 4px; font-family: Georgia, serif; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pending-row__identity > small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.pending-row__tags { display: flex; align-items: center; gap: 5px; }
.priority-tag, .blocking-tag, .decision-tag, .required-tag { width: max-content; min-height: 19px; display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 6px; font-size: 7px; font-weight: 750; }
.priority-tag--neutral { color: var(--muted); background: var(--neutral-soft); }
.priority-tag--warning { color: var(--warning); background: var(--warning-soft); }
.priority-tag--danger, .blocking-tag { color: var(--danger); background: var(--danger-soft); }
.decision-tag { color: #4e527b; background: #e9e9f5; }
.required-tag { color: var(--brand); background: var(--brand-soft); }
.pending-row__due { display: flex; flex-direction: column; }
.pending-row__due small { color: var(--muted-2); font-size: 7px; }
.pending-row__due strong { font-size: 9px; }
.pending-row__arrow { color: var(--muted-2); }

.section-error { display: block; margin: -9px 0 12px; color: var(--danger); font-size: 8px; }
.responsibility-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.responsibility-option { padding: 12px; background: #fafbf9; border: 1px solid var(--line); border-radius: 12px; transition: .18s; }
.responsibility-option.is-selected { background: #f7faf8; border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 6%, transparent); }
.responsibility-option__identity { display: grid !important; grid-template-columns: 17px 34px 1fr; align-items: center; gap: 8px; margin: 0 !important; cursor: pointer; }
.responsibility-option__identity > input, .mini-check > input { position: absolute; opacity: 0; }
.responsibility-option__identity input:checked + .check-control__box, .mini-check input:checked + .check-control__box { color: #fff; background: var(--brand); border-color: var(--brand); }
.party-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: 8px; font-weight: 800; }
.responsibility-option__identity > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.responsibility-option__identity strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.responsibility-option__identity small { color: var(--muted-2); font-size: 7px; }
.responsibility-option__fields { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; max-height: 90px; margin-top: 10px; padding-top: 10px; overflow: hidden; border-top: 1px solid #e9ece8; opacity: 1; transition: .2s; }
.responsibility-option:not(.is-selected) .responsibility-option__fields { max-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; }
.responsibility-option__fields .field label { font-size: 7px; }
.responsibility-option__fields .field-control { min-height: 35px; }
.responsibility-option__fields .field-control input { min-height: 33px; font-size: 9px; }
.mini-check { display: flex !important; align-items: center; gap: 6px; min-height: 35px; margin: 0 !important; cursor: pointer; }
.mini-check b { font-size: 7px; }
.section-inline-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 13px; color: var(--brand); font-size: 8px; font-weight: 700; }
.form-section--reason { padding-block: 16px; }
.pending-form .form-main { max-width: 860px; }
.pending-file-drop.has-files { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); }
.pending-upload-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pending-upload-preview[hidden] { display: none; }
.pending-upload-preview__item { position: relative; min-width: 0; height: 104px; display: grid; place-items: center; overflow: hidden; color: var(--brand); background: #f3f6f3; border: 1px solid var(--line); border-radius: 11px; }
.pending-upload-preview__item img { width: 100%; height: 100%; object-fit: cover; }
.pending-upload-preview__item > span { font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.pending-upload-preview__item small, .pending-existing-files a small { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.9); border-radius: 5px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.pending-existing-files { margin-top: 15px; }
.pending-existing-files > span { display: block; margin-bottom: 7px; color: var(--muted-2); font-size: 8px; font-weight: 700; }
.pending-existing-files > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pending-existing-files a { position: relative; height: 92px; display: grid; place-items: center; overflow: hidden; color: var(--brand); background: #f3f6f3; border: 1px solid var(--line); border-radius: 10px; }
.pending-existing-files img { width: 100%; height: 100%; object-fit: cover; }

.pending-detail-header h1 { max-width: 720px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-detail-hero { display: grid; grid-template-columns: 48px minmax(220px, 1fr) 150px auto; align-items: center; gap: 16px; margin-bottom: 14px; padding: 17px; }
.pending-detail-hero__state { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 13px; }
.pending-detail-hero__state--success { color: var(--success); background: var(--success-soft); }
.pending-detail-hero__state--warning { color: var(--warning); background: var(--warning-soft); }
.pending-detail-hero__state--danger { color: var(--danger); background: var(--danger-soft); }
.pending-detail-hero__state--neutral { color: var(--muted); background: var(--neutral-soft); }
.pending-detail-hero__identity { min-width: 0; }
.pending-detail-hero__identity > div { display: flex; flex-wrap: wrap; gap: 5px; }
.pending-detail-hero__identity p { max-width: 680px; margin-top: 8px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.pending-detail-hero__deadline { display: flex; flex-direction: column; }
.pending-detail-hero__deadline small { color: var(--muted-2); font-size: 7px; }
.pending-detail-hero__deadline strong { font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.pending-detail-hero__visibility { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 8px; }
.pending-detail-hero__visibility span { display: flex; align-items: center; gap: 5px; }
.pending-client-responses { margin-bottom: 14px; overflow: hidden; color: #f7fbf8; background: linear-gradient(135deg, #183b2e, #245b45); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 15px 35px rgba(24,59,46,.16); }
.pending-client-responses > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pending-client-responses > header > span { width: 41px; height: 41px; display: grid; place-items: center; color: #b9dcc9; background: rgba(255,255,255,.08); border-radius: 12px; }
.pending-client-responses > header > div { display: flex; flex-direction: column; }
.pending-client-responses > header small { color: #9ec3b0; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pending-client-responses > header h2 { margin-top: 2px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.pending-client-responses > header b { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; color: #d7eee0; background: rgba(255,255,255,.08); border-radius: 8px; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.pending-client-responses > div { display: grid; gap: 8px; padding: 13px; }
.pending-client-responses article { padding: 16px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.pending-client-responses blockquote { font-family: Georgia, serif; font-size: 17px; line-height: 1.55; }
.pending-client-responses footer { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.1); }
.pending-client-responses footer .party-avatar { color: #214c3a; background: #dcebe2; }
.pending-client-responses footer > div { display: flex; flex-direction: column; }
.pending-client-responses footer strong { font-size: 9px; }
.pending-client-responses footer small { color: #9ec3b0; font-size: 7px; }
.pending-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; gap: 14px; }
.pending-detail-main, .pending-detail-aside { display: flex; flex-direction: column; gap: 14px; }
.responsibilities-panel, .history-panel { overflow: hidden; }
.pending-attachment-panel { overflow: hidden; }
.pending-attachment-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px 14px; }
.pending-attachment-gallery a { position: relative; min-width: 0; height: 142px; display: grid; place-items: center; overflow: hidden; color: var(--brand); background: #f3f6f3; border: 1px solid var(--line); border-radius: 11px; }
.pending-attachment-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.pending-attachment-gallery a:hover img { transform: scale(1.035); }
.pending-attachment-gallery a > span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pending-attachment-gallery a > span b { font-size: 7px; letter-spacing: .08em; }
.pending-attachment-gallery small { position: absolute; left: 7px; right: 7px; bottom: 7px; padding: 5px 7px; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.91); border-radius: 6px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.responsibility-list { padding: 0 13px 13px; }
.responsibility-card { min-height: 84px; display: grid; grid-template-columns: minmax(160px, 1fr) 130px auto minmax(270px, .9fr); align-items: center; gap: 12px; padding: 11px 7px; border-top: 1px solid #edf0ec; }
.responsibility-card__party { min-width: 0; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; }
.responsibility-card__party > div, .responsibility-card__due { display: flex; flex-direction: column; }
.responsibility-card__party strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.responsibility-card__party small, .responsibility-card__due small { color: var(--muted-2); font-size: 7px; }
.responsibility-card__due strong { font-size: 9px; }
.responsibility-update { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(80px, 1fr) 36px; gap: 5px; }
.responsibility-update .field-control { min-height: 35px; }
.responsibility-update .field-control input, .responsibility-update .field-control select { min-height: 33px; padding-inline: 9px; font-size: 8px; }
.history-list { padding: 0 16px 13px; }
.history-item { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 9px; padding: 11px 0; border-top: 1px solid #edf0ec; }
.history-item__dot { width: 28px; height: 28px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.history-item > div { display: flex; flex-direction: column; }
.history-item strong { font-size: 8px; }
.history-item small { color: var(--muted-2); font-size: 7px; }
.history-item p { margin-top: 4px; color: var(--muted); font-size: 8px; }
.history-change { display: flex; align-items: center; gap: 5px; color: var(--muted-2); font-size: 7px; }
.history-change del { color: #a97a75; }
.history-change ins { color: var(--success); text-decoration: none; }
.cancel-panel { overflow: hidden; }
.cancel-panel summary { min-height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: var(--danger); cursor: pointer; font-size: 8px; font-weight: 700; list-style: none; }
.cancel-panel summary::-webkit-details-marker { display: none; }
.cancel-panel form { display: flex; flex-direction: column; gap: 7px; padding: 0 12px 12px; }
.cancel-panel .field-control { min-height: 37px; }
.cancel-panel .field-control input { min-height: 35px; font-size: 9px; }

.overview-phase-list { padding: 0 16px 13px; }
.overview-phase-list a { min-height: 49px; display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 9px; border-top: 1px solid #edf0ec; }
.overview-phase-list__dot { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; }
.overview-phase-list__dot--success { color: #fff; background: var(--success); }
.overview-phase-list__dot--warning { background: var(--warning-soft); box-shadow: inset 0 0 0 6px var(--warning); }
.overview-phase-list__dot--neutral { background: var(--neutral-soft); box-shadow: inset 0 0 0 6px #a6aea9; }
.overview-phase-list__dot--danger { background: var(--danger-soft); box-shadow: inset 0 0 0 6px var(--danger); }
.overview-phase-list a > span { min-width: 0; display: flex; flex-direction: column; }
.overview-phase-list strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.overview-phase-list small { color: var(--muted-2); font-size: 7px; }
.overview-phase-list a > b { color: var(--muted); font-size: 7px; font-weight: 650; }

/* Feedback */
.toast {
    position: fixed;
    z-index: 100;
    right: 22px;
    bottom: 22px;
    min-width: 260px;
    max-width: min(390px, calc(100vw - 32px));
    min-height: 52px;
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    color: #fff;
    background: #183329;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    box-shadow: 0 18px 45px rgba(15,31,25,.25);
    font-size: 10px;
    animation: toastIn .45s var(--ease) both;
}
.toast--error { background: #6e302c; }
.toast__icon { width: 28px; height: 28px; display: grid; place-items: center; color: #bad9c7; background: rgba(255,255,255,.08); border-radius: 8px; }
.toast--error .toast__icon { color: #f1b5ae; }
.toast__close { width: 28px; height: 28px; display: grid; place-items: center; color: rgba(255,255,255,.58); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.toast__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.toast.is-leaving { animation: toastOut .3s ease forwards; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* Responsive */
@media (max-width: 1180px) {
    :root { --sidebar-width: 218px; }
    .page-container { padding-inline: 28px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .responsible-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .responsibility-card { grid-template-columns: minmax(150px, 1fr) 110px auto; }
    .responsibility-update { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    :root { --sidebar-width: 270px; }
    .sidebar { transform: translateX(-102%); transition: transform .3s var(--ease); box-shadow: 18px 0 50px rgba(8,20,15,.2); }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar__close { display: grid !important; }
    .sidebar-overlay { position: fixed; inset: 0; z-index: 40; display: block; visibility: hidden; opacity: 0; background: rgba(9,20,15,.35); backdrop-filter: blur(2px); transition: .25s; }
    body.sidebar-open .sidebar-overlay { visibility: visible; opacity: 1; }
    .main-shell { margin-left: 0; }
    .mobile-header { position: sticky; top: 0; z-index: 30; min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 18px 10px; background: rgba(244,245,241,.9); border-bottom: 1px solid rgba(220,224,220,.8); backdrop-filter: blur(15px); }
    .brand--mobile .brand__logo { height: 24px; }
    .page-container { padding: 25px 20px 90px; }
    .mobile-dock { position: fixed; z-index: 35; left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 59px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; background: rgba(20,37,30,.95); border: 1px solid rgba(255,255,255,.08); border-radius: 17px; box-shadow: 0 18px 35px rgba(10,25,18,.28); backdrop-filter: blur(16px); }
    .mobile-dock__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; color: #83988e; background: transparent; border: 0; border-radius: 12px; font-size: 7px; }
    .mobile-dock__item.is-active { color: #fff; background: rgba(255,255,255,.09); }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-overview { grid-template-columns: 1fr; }
    .project-overview__aside { display: grid; grid-template-columns: repeat(2, 1fr); }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
    .settings-nav a { white-space: nowrap; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .auth-brand { display: inline-flex; }
    .schedule-layout, .pending-detail-layout { grid-template-columns: 1fr; }
    .schedule-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pending-detail-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .desktop-only { display: none !important; }
    .page-container { padding-inline: 14px; }
    .page-header { align-items: center; margin-bottom: 20px; }
    .page-header h1, .page-header--dashboard h1 { font-size: 29px; letter-spacing: -.6px; }
    .page-kicker { margin-bottom: 4px; font-size: 8px; }
    .page-actions { gap: 7px; }
    .page-actions .button, .page-header > .button { min-width: 42px; padding: 0 12px; }
    .page-actions .button span, .page-header > .button span { display: none; }
    .metric-grid { gap: 9px; }
    .metric-card { min-height: 126px; padding: 14px; border-radius: 14px; }
    .metric-card__value { font-size: 31px; }
    .metric-card__top > span:first-child { font-size: 9px; }
    .metric-card__meta { font-size: 8px; }
    .dashboard-aside { grid-template-columns: 1fr; }
    .project-row { grid-template-columns: 43px minmax(0, 1fr) 67px 19px; gap: 10px; }
    .project-row .status-badge { display: none; }
    .project-row__progress { min-width: 0; }
    .section-header { padding: 18px 15px 14px; }
    .project-list { padding-inline: 7px; }
    .project-grid, .team-grid { grid-template-columns: 1fr; }
    .office-grid { grid-template-columns: 1fr; }
    .responsible-grid { grid-template-columns: 1fr; }
    .project-card__visual { height: 128px; }
    .toolbar { align-items: stretch; flex-direction: column; gap: 7px; }
    .surface--toolbar { padding: 9px 12px; }
    .search-control { min-width: 0; max-width: none; width: 100%; }
    .filter-pills { width: 100%; overflow-x: auto; }
    .filter-pill { flex: 0 0 auto; }
    .toolbar__count { display: none; }
    .data-surface { background: transparent; border: 0; box-shadow: none; }
    .data-table__head { display: none; }
    .data-table__row, .data-table--clients .data-table__row { grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 9px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
    .data-table__row > :nth-child(2), .data-table__row > :nth-child(3) { display: none; }
    .data-table__row > :nth-child(4) { grid-column: 1 / -1; padding-left: 47px; }
    .data-table--clients .data-table__row > .row-action { display: flex; grid-column: 2; grid-row: 1; padding: 0; }
    .form-layout { grid-template-columns: 1fr; }
    .form-aside { position: static; }
    .form-summary { display: none; }
    .form-section { padding: 17px 14px; }
    .form-grid--2 { grid-template-columns: 1fr; }
    .field--full { grid-column: auto; }
    .form-footer { position: sticky; bottom: 77px; z-index: 10; margin-inline: -2px; padding: 9px; background: rgba(244,245,241,.91); border: 1px solid rgba(220,224,220,.82); border-radius: 13px; backdrop-filter: blur(12px); }
    .form-footer .button { flex: 1; }
    .project-hero { padding-inline: 14px; border-radius: 19px; }
    .project-hero__content { min-height: 144px; padding-inline: 7px; }
    .project-hero__content h1 { font-size: 32px; }
    .project-hero__progress { display: none; }
    .project-hero__line { margin-inline: -14px; }
    .project-tabs { margin-inline: -2px; }
    .project-kpis { gap: 7px; }
    .compact-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px; }
    .compact-stat__icon { width: 30px; height: 30px; }
    .detail-grid { grid-template-columns: 1fr; }
    .mini-timeline { grid-template-columns: 1fr; gap: 0; }
    .mini-timeline__line { width: 2px; height: 28px; margin: 0 0 0 9px; }
    .project-overview__aside { display: flex; }
    .project-quick-actions { margin-inline: -2px; }
    .operational-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .operational-metric { min-height: 72px; padding: 11px; }
    .operational-metric__icon { width: 32px; height: 32px; }
    .schedule-aside, .pending-detail-aside { display: flex; }
    .phase-row { grid-template-columns: 30px minmax(0, 1fr) 22px; padding-inline: 2px; }
    .phase-row__arrow { display: none; }
    .phase-row__actions .icon-button { display: none; }
    .phase-row__actions .phase-row__toggle { opacity: 1; }
    .phase-milestones { margin-left: 17px; padding-left: 11px; }
    .phase-row__heading .status-badge { display: none; }
    .phase-row__dates { flex-wrap: wrap; }
    .phase-row__dates > b { width: 100%; margin-left: 0; }
    .pending-row { grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 9px; padding: 12px; }
    .pending-row__due { grid-column: 2; }
    .pending-row > .status-badge { grid-column: 2; width: max-content; }
    .pending-row__arrow { grid-column: 3; grid-row: 1 / span 3; }
    .responsibility-selector { grid-template-columns: 1fr; }
    .pending-detail-hero { grid-template-columns: 43px 1fr; gap: 11px; }
    .pending-detail-header { align-items: flex-start; gap: 8px; }
    .pending-detail-header .page-header__back { min-width: 0; flex: 1; gap: 11px; }
    .pending-detail-header .page-header__back > div { min-width: 0; }
    .pending-detail-header h1 { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
    .pending-detail-header .page-actions { flex: 0 0 auto; }
    .pending-detail-hero__deadline { grid-column: 2; }
    .pending-detail-hero__visibility { grid-column: 1 / -1; flex-direction: row; padding-top: 9px; border-top: 1px solid var(--line); }
    .pending-upload-preview, .pending-existing-files > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pending-client-responses > header { grid-template-columns: 38px minmax(0, 1fr); padding: 14px; }
    .pending-client-responses > header > span { width: 37px; height: 37px; }
    .pending-client-responses > header b { grid-column: 2; width: max-content; }
    .pending-client-responses article { padding: 14px; }
    .pending-attachment-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 11px; }
    .pending-attachment-gallery a { height: 120px; }
    .responsibility-card { grid-template-columns: 1fr auto; gap: 9px; }
    .responsibility-card__due { grid-column: 1; }
    .responsibility-card__status { grid-column: 2; grid-row: 1 / span 2; }
    .responsibility-update { grid-column: 1 / -1; }
    .history-item { grid-template-columns: 29px 1fr; }
    .history-change { grid-column: 2; }
    .settings-nav { margin-inline: -2px; }
    .auth-panel { padding: 25px 20px; }
    .auth-panel__inner { max-width: 400px; }
    .auth-brand { margin-bottom: 50px; }
    .auth-heading h1 { font-size: 31px; }
    .toast { right: 16px; bottom: 84px; }
}

/* Cronograma, linha de base e atribuição de atrasos */
.schedule-link-groups { display: grid; gap: 14px; }
.schedule-link-group { overflow: hidden; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; }
.schedule-link-group__title { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.schedule-link-group__title > span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.schedule-link-group__title strong { flex: 1; font-size: 9px; }
.schedule-link-group__title small { color: var(--muted-2); font-size: 8px; font-weight: 700; }
.schedule-link-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.schedule-link-option { display: flex; align-items: center; gap: 9px; min-height: 53px; padding: 9px 12px; background: var(--surface); cursor: pointer; }
.schedule-link-option input { position: absolute; opacity: 0; pointer-events: none; }
.schedule-link-option > span:last-child { min-width: 0; display: grid; gap: 2px; }
.schedule-link-option strong, .schedule-link-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-link-option strong { font-size: 8px; }
.schedule-link-option small { color: var(--muted-2); font-size: 7px; text-transform: capitalize; }
.schedule-link-option:has(input:checked) { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.schedule-link-option input:checked + .check-control__box { color: #fff; background: var(--brand); border-color: var(--brand); }
.schedule-link-empty { padding: 15px; color: var(--muted-2); background: var(--surface); font-size: 8px; }
.milestone-dependency { display: flex; align-items: center; gap: 11px; width: fit-content; max-width: 100%; margin: -2px 0 14px; padding: 10px 13px; color: inherit; text-decoration: none; }
.milestone-dependency > span { display: grid; place-items: center; width: 33px; height: 33px; color: var(--brand); background: var(--brand-soft); border-radius: 9px; }
.milestone-dependency > div { display: grid; gap: 2px; }
.milestone-dependency small { color: var(--muted-2); font-size: 7px; }
.milestone-dependency strong { font-size: 9px; }
.milestone-dependency > svg { color: var(--muted-2); }
.milestone-linked-panel { margin-top: 14px; padding: 14px; }
.milestone-linked-panel > div:last-child { display: grid; gap: 3px; }
.milestone-linked-panel a { display: grid; grid-template-columns: 29px minmax(0, 1fr) 15px; align-items: center; gap: 8px; padding: 8px; color: inherit; text-decoration: none; border-radius: 9px; }
.milestone-linked-panel a:hover { background: var(--surface-soft); }
.milestone-linked-panel a > span { display: grid; place-items: center; width: 29px; height: 29px; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.milestone-linked-panel a > div { min-width: 0; display: grid; gap: 1px; }
.milestone-linked-panel a strong, .milestone-linked-panel a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.milestone-linked-panel a strong { font-size: 8px; }
.milestone-linked-panel a small { color: var(--muted-2); font-size: 7px; text-transform: capitalize; }
.replan-tag { display: inline-flex; min-height: 18px; align-items: center; padding: 0 6px; color: var(--warning); font-size: 7px; font-style: normal; font-weight: 800; background: var(--warning-soft); border-radius: 6px; }
.critical-dot { display: inline-block; width: 6px; height: 6px; margin-left: 3px; background: var(--danger); border-radius: 50%; vertical-align: middle; }
.baseline-inline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: 100%; padding: 14px; background: linear-gradient(135deg, #f6f8f5, #fbfcfa); border: 1px solid var(--line); border-radius: 12px; }
.baseline-inline > div { min-width: 0; display: flex; flex-direction: column; }
.baseline-inline small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.baseline-inline strong { margin-top: 4px; font-size: 11px; }
.baseline-inline > svg { color: var(--muted-2); }
.schedule-baseline-form .field { margin-top: 14px; }
.block-party-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.block-party-option { display: grid !important; grid-template-columns: 18px 36px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 62px; margin: 0 !important; padding: 10px; background: #fafbf9; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: .18s; }
.block-party-option:has(input:checked) { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.block-party-option > input { position: absolute; opacity: 0; }
.block-party-option input:checked + .check-control__box { color: #fff; background: var(--brand); border-color: var(--brand); }
.block-party-option > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.block-party-option strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.block-party-option small { color: var(--muted-2); font-size: 7px; }
.delay-overview-card { overflow: hidden; }
.delay-overview-card__numbers { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 13px 9px; background: #f7f9f6; border: 1px solid var(--line); border-radius: 11px; }
.delay-overview-card__numbers > div { display: flex; flex-direction: column; padding: 12px; }
.delay-overview-card__numbers > div + div { border-left: 1px solid var(--line); }
.delay-overview-card__numbers strong { font-family: Georgia, serif; font-size: 20px; }
.delay-overview-card__numbers span { color: var(--muted-2); font-size: 7px; }
.delay-overview-party { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; margin: 0 13px; border-top: 1px solid var(--line-soft); }
.delay-overview-party .party-avatar { width: 26px; height: 26px; font-size: 7px; }
.delay-overview-party strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.delay-overview-party b { color: var(--brand); font-size: 9px; }
.open-blocks-card { overflow: hidden; }
.open-blocks-card > a { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; margin: 0 13px; color: inherit; border-top: 1px solid var(--line-soft); }
.open-blocks-card > a > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); border-radius: 8px; }
.open-blocks-card > a > div { min-width: 0; display: flex; flex-direction: column; }
.open-blocks-card strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.open-blocks-card small { color: var(--muted-2); font-size: 7px; }
.milestone-detail-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; margin: 14px 0; padding: 18px 20px; }
.milestone-detail-hero__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; }
.milestone-detail-hero__icon--success { color: var(--success); background: var(--success-soft); }
.milestone-detail-hero__icon--warning { color: var(--warning); background: var(--warning-soft); }
.milestone-detail-hero__icon--danger { color: var(--danger); background: var(--danger-soft); }
.milestone-detail-hero__icon--neutral { color: var(--muted); background: var(--neutral-soft); }
.milestone-detail-hero > div:nth-child(2) > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.milestone-detail-hero > div:nth-child(2) p { margin-top: 7px; color: var(--muted); font-size: 10px; }
.milestone-detail-hero > div:last-child { min-width: 115px; display: flex; flex-direction: column; padding-left: 20px; border-left: 1px solid var(--line); }
.milestone-detail-hero > div:last-child small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.milestone-detail-hero > div:last-child strong { margin: 3px 0; font-family: Georgia, serif; font-size: 18px; }
.schedule-date-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.schedule-date-comparison article { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 72px; padding: 13px; }
.schedule-date-comparison article > span { width: 37px; height: 37px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 11px; }
.schedule-date-comparison article.is-delayed > span { color: var(--danger); background: var(--danger-soft); }
.schedule-date-comparison article > div { display: flex; flex-direction: column; }
.schedule-date-comparison small { color: var(--muted-2); font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }
.schedule-date-comparison strong { margin-top: 3px; font-size: 12px; }
.schedule-date-comparison b { color: var(--danger); font-size: 7px; }
.milestone-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 14px; }
.milestone-detail-layout > main { min-width: 0; display: grid; gap: 14px; }
.milestone-detail-layout > aside { position: sticky; top: 74px; }
.delay-panel { overflow: hidden; }
.delay-panel .section-header > strong { color: var(--danger); font-family: Georgia, serif; font-size: 18px; }
.delay-summary { display: grid; grid-template-columns: 126px minmax(0, 1fr); align-items: center; gap: 22px; padding: 8px 22px 20px; }
.delay-summary__ring { --attributed: 0; position: relative; width: 112px; height: 112px; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--attributed) * 1%), #e9ede9 0); border-radius: 50%; }
.delay-summary__ring::before { content: ''; position: absolute; inset: 10px; background: #fff; border-radius: 50%; }
.delay-summary__ring > span { position: relative; display: flex; flex-direction: column; align-items: center; }
.delay-summary__ring strong { font-family: Georgia, serif; font-size: 23px; }
.delay-summary__ring small { color: var(--muted-2); font-size: 7px; }
.delay-summary__stats { display: grid; grid-template-columns: repeat(3, 1fr); background: #f7f9f6; border: 1px solid var(--line); border-radius: 12px; }
.delay-summary__stats div { display: flex; flex-direction: column; padding: 13px; }
.delay-summary__stats div + div { border-left: 1px solid var(--line); }
.delay-summary__stats span { color: var(--muted-2); font-size: 7px; }
.delay-summary__stats strong { margin-top: 3px; font-size: 13px; }
.delay-party-list { padding: 0 18px 13px; }
.delay-party-list > div:not(.activity-empty) { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 50px; border-top: 1px solid var(--line-soft); }
.delay-party-list .party-avatar { width: 31px; height: 31px; font-size: 8px; }
.delay-party-list > div > div { display: flex; flex-direction: column; }
.delay-party-list strong { font-size: 9px; }
.delay-party-list small { color: var(--muted-2); font-size: 7px; }
.delay-party-list b { color: var(--brand); font-size: 11px; }
.replan-history, .milestone-responsibility-panel { overflow: hidden; }
.schedule-block-panel { overflow: visible; }
.schedule-block-list { padding: 0 17px 10px; }
.schedule-block-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.schedule-block-item__icon { width: 33px; height: 33px; display: grid; place-items: center; color: var(--muted); background: var(--neutral-soft); border-radius: 10px; }
.schedule-block-item.is-open .schedule-block-item__icon { color: var(--danger); background: var(--danger-soft); }
.schedule-block-item > div { min-width: 0; }
.schedule-block-item > div > div { display: flex; align-items: center; gap: 7px; }
.schedule-block-item strong { font-size: 10px; }
.schedule-block-item p { margin: 4px 0; color: var(--muted); font-size: 9px; }
.schedule-block-item small { color: var(--muted-2); font-size: 7px; }
.schedule-block-item details { position: relative; }
.schedule-block-item details summary { list-style: none; }
.schedule-block-item details form { position: absolute; z-index: 5; right: 0; top: 38px; width: 210px; display: grid; gap: 7px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.replan-history > div:last-child, .milestone-responsibility-panel > div:last-child { padding: 0 15px 10px; }
.replan-history article { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 9px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.replan-history article > span { width: 26px; height: 26px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.replan-history article strong { display: flex; align-items: center; gap: 5px; font-size: 9px; }
.replan-history article p { margin: 3px 0; color: var(--muted); font-size: 8px; }
.replan-history article small { color: var(--muted-2); font-size: 7px; }
.milestone-responsibility-panel article { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.milestone-responsibility-panel article > div { min-width: 0; display: flex; flex-direction: column; }
.milestone-responsibility-panel article strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.milestone-responsibility-panel article small { color: var(--muted-2); font-size: 7px; }
.milestone-responsibility-panel article form { grid-column: 1 / -1; }
.milestone-responsibility-panel .field-control { min-height: 34px; }
.milestone-responsibility-panel select { min-height: 32px; font-size: 8px; }
.portal-milestone.is-blocked { border-color: color-mix(in srgb, var(--danger) 20%, var(--line)); }
.portal-milestone.is-blocked > span { color: var(--danger); background: var(--danger-soft); }
.portal-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.portal-blocks__heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: var(--danger); font-size: 9px; }
.portal-blocks article { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 9px; padding: 11px; }
.portal-blocks article > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); border-radius: 9px; }
.portal-blocks article > div { min-width: 0; display: flex; flex-direction: column; }
.portal-blocks article strong { font-size: 9px; }
.portal-blocks article small { color: var(--muted-2); font-size: 7px; }

@media (max-width: 900px) {
    .milestone-detail-layout { grid-template-columns: 1fr; }
    .milestone-detail-layout > aside { position: static; }
}

@media (max-width: 680px) {
    .schedule-link-options { grid-template-columns: 1fr; }
    .milestone-dependency { width: 100%; }
    .block-party-selector { grid-template-columns: 1fr; }
    .baseline-inline { grid-template-columns: 1fr; }
    .baseline-inline > svg { margin: -4px auto; transform: rotate(90deg); }
    .milestone-detail-hero { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
    .milestone-detail-hero > div:last-child { grid-column: 1 / -1; padding: 11px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .schedule-date-comparison { grid-template-columns: 1fr; }
    .schedule-date-comparison article { min-height: 62px; }
    .delay-summary { grid-template-columns: 1fr; justify-items: center; padding-inline: 14px; }
    .delay-summary__stats { width: 100%; }
    .schedule-block-item { grid-template-columns: 31px minmax(0, 1fr); align-items: start; }
    .schedule-block-item > details { grid-column: 1 / -1; }
    .schedule-block-item details form { position: static; width: 100%; margin-top: 7px; box-shadow: none; }
    .portal-blocks { grid-template-columns: 1fr; }
}

/* Site capture */
.button:disabled { cursor: not-allowed; opacity: .52; transform: none; box-shadow: none; }
.site-body { min-height: 100vh; background: #eef1ed; }
.site-header {
    position: sticky; top: 0; z-index: 30;
    min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 10px max(20px, calc((100vw - 760px) / 2));
    background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(210,217,212,.85);
    box-shadow: 0 5px 22px rgba(28,38,33,.035); backdrop-filter: blur(15px);
}
.site-brand { display: inline-flex; align-items: center; gap: 10px; }
.site-brand__mark { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--brand); border-radius: 11px; font-size: 10px; font-weight: 800; }
.site-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.site-brand > span:last-child { display: flex; flex-direction: column; }
.site-brand strong { font-family: Georgia, serif; font-size: 16px; font-weight: 500; line-height: 1.2; }
.site-brand small { color: var(--muted); font-size: 8px; }
.site-header__secure { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 650; }
.site-main { width: min(100% - 32px, 720px); min-height: calc(100vh - 126px); margin: 0 auto; padding: 27px 0 52px; }
.site-footer { width: min(100% - 32px, 720px); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 auto; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.site-footer span { display: inline-flex; align-items: center; gap: 6px; }
.site-project-hero {
    position: relative; min-height: 122px; display: flex; align-items: center; gap: 17px; overflow: hidden;
    margin-bottom: 13px; padding: 23px 25px; color: #fff;
    background: radial-gradient(circle at 92% 10%, rgba(142,191,166,.22), transparent 38%), linear-gradient(135deg, #18362b, #10251d);
    border-radius: 22px; box-shadow: 0 16px 38px rgba(22,49,38,.18);
}
.site-project-hero::after { content: ""; position: absolute; right: -36px; bottom: -75px; width: 190px; height: 150px; border: 1px solid rgba(255,255,255,.08); transform: rotate(-24deg); }
.site-project-hero__icon { width: 49px; height: 49px; display: grid; place-items: center; flex: 0 0 auto; color: #dcebe3; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 15px; }
.site-project-hero > div { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; }
.site-project-hero > div > span { color: #92aa9f; font-size: 9px; font-weight: 760; letter-spacing: 1.1px; text-transform: uppercase; }
.site-project-hero h1 { overflow: hidden; margin: 2px 0 3px; font-family: Georgia, serif; font-size: clamp(24px, 5vw, 31px); font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.site-project-hero small { color: #aebfb7; font-size: 9px; }
.site-capture-form { display: grid; gap: 13px; }
.site-form-card { padding: 22px; }
.site-form-card__heading { display: flex; align-items: center; gap: 11px; margin-bottom: 19px; }
.site-form-card__heading > span { width: 31px; height: 31px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 9px; font-size: 9px; font-weight: 800; }
.site-form-card__heading > div { display: flex; flex-direction: column; }
.site-form-card__heading small { color: var(--muted); font-size: 8px; font-weight: 650; text-transform: uppercase; letter-spacing: .7px; }
.site-form-card__heading h2 { font-family: Georgia, serif; font-size: 19px; font-weight: 500; line-height: 1.2; }
.site-form-card .field + .field { margin-top: 15px; }
.site-form-card .field-control { min-height: 48px; background: #fafbf9; }
.site-form-card .field-control input, .site-form-card .field-control select { min-height: 46px; font-size: 12px; }
.site-form-card .field-control textarea { min-height: 112px; padding: 12px; font-size: 12px; line-height: 1.6; }
.site-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.site-category { cursor: pointer; }
.site-category input { position: absolute; opacity: 0; pointer-events: none; }
.site-category > span { position: relative; min-height: 83px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: var(--muted); background: #f7f8f6; border: 1px solid var(--line); border-radius: 12px; transition: .18s ease; }
.site-category strong { font-size: 9px; font-weight: 690; }
.site-category__check { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; padding: 3px; color: #fff; background: var(--brand); border-radius: 50%; opacity: 0; transform: scale(.65); transition: .18s ease; }
.site-category input:checked + span { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 28%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent); }
.site-category input:checked + span .site-category__check { opacity: 1; transform: scale(1); }
.site-upload-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.site-upload-button { min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--brand); background: #f7f9f6; border: 1px dashed var(--line-strong); border-radius: 13px; cursor: pointer; transition: .18s ease; }
.site-upload-button:hover { background: var(--brand-soft); border-color: var(--brand); }
.site-upload-button--camera { color: #fff; background: var(--brand); border-style: solid; border-color: var(--brand); }
.site-upload-button--camera:hover { background: color-mix(in srgb, var(--brand) 88%, black); }
.site-upload-button > span { display: flex; flex-direction: column; color: inherit; }
.site-upload-button strong { font-size: 11px; }
.site-upload-button small { color: currentColor; font-size: 8px; opacity: .68; }
.site-upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.site-file-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 0 16px; }
.site-preview-item { position: relative; min-width: 0; height: 78px; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: #f4f6f3; border: 1px solid var(--line); border-radius: 10px; }
.site-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.site-preview-item span { position: absolute; inset: auto 5px 5px; padding: 3px 5px; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.9); border-radius: 5px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.site-preview-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; color: #fff; background: rgba(28,38,33,.72); border: 0; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; }
.site-preview-remove:hover { background: var(--danger); }
.site-submit-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 13px 12px 18px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 45px rgba(28,38,33,.16); backdrop-filter: blur(16px); }
.site-submit-bar > div { min-width: 0; display: flex; flex-direction: column; }
.site-submit-bar > div span { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-submit-bar > div small { color: var(--muted); font-size: 8px; }
.site-submit-bar .button { flex: 0 0 auto; }
.site-result { min-height: calc(100vh - 190px); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.site-result__mark { width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 22px; color: var(--success); background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 15%, white); border-radius: 24px; box-shadow: 0 15px 35px rgba(47,122,88,.1); }
.site-result h1 { font-family: Georgia, serif; font-size: clamp(32px, 7vw, 44px); font-weight: 500; letter-spacing: -1px; }
.site-result p { margin-top: 9px; color: var(--muted); font-size: 12px; }
.site-result__actions { margin-top: 25px; }
.site-result--invalid .site-result__mark { color: var(--muted); background: var(--neutral-soft); border-color: var(--line); box-shadow: none; }
.site-access-profile__mark { width: 58px; height: 58px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 17px; }
.access-warning { display: grid; grid-template-columns: 24px 1fr; gap: 8px 10px; margin-top: 12px; padding: 15px; color: #885820; background: var(--warning-soft); border-color: #efddc3; font-size: 9px; }
.access-warning a { grid-column: 2; color: var(--brand); font-weight: 750; }
.access-warning form { grid-column: 2; }
.access-warning form .section-link { padding: 0; color: var(--brand); background: transparent; border: 0; cursor: pointer; font-weight: 750; }
.review-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px; background: var(--warning-soft); border-color: #eedabd; }
.review-banner > span { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; color: #9b6428; background: rgba(255,255,255,.55); border-radius: 11px; }
.review-banner > div { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.review-banner small { color: #9b7247; font-size: 8px; text-transform: uppercase; letter-spacing: .5px; }
.review-banner strong { font-size: 11px; }

@media (max-width: 680px) {
    .site-header { min-height: 63px; padding-inline: 14px; }
    .site-header__secure { width: 33px; height: 33px; display: grid; place-items: center; background: #f3f5f2; border-radius: 9px; }
    .site-header__secure .icon { grid-area: 1 / 1; }
    .site-header__secure { font-size: 0; }
    .site-main { width: calc(100% - 20px); padding: 12px 0 30px; }
    .site-footer { width: calc(100% - 24px); }
    .site-project-hero { min-height: 104px; padding: 17px; border-radius: 18px; }
    .site-project-hero__icon { width: 43px; height: 43px; }
    .site-project-hero h1 { font-size: 24px; }
    .site-form-card { padding: 18px 14px; border-radius: 14px; }
    .site-form-card__heading { margin-bottom: 16px; }
    .site-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-category > span { min-height: 74px; }
    .site-upload-actions { grid-template-columns: 1fr 1fr; }
    .site-upload-button { min-height: 68px; padding: 11px; gap: 8px; }
    .site-upload-button .icon { width: 20px; height: 20px; }
    .site-file-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-submit-bar { bottom: 8px; padding: 10px; }
    .site-submit-bar > div { display: none; }
    .site-submit-bar .button { width: 100%; }
    .review-banner { align-items: stretch; flex-wrap: wrap; }
    .review-banner form, .review-banner .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Diary, conversations and client access */
.data-table--clients .data-table__head, .data-table--clients .data-table__row { grid-template-columns: 1.25fr 1fr .35fr .62fr .42fr 76px; }
.client-access-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.client-access-cell small { color: var(--muted); font-size: 9px; }
.row-action { gap: 3px; }
.button--danger-text { color: var(--danger); }
.button--icon { width: 44px; min-width: 44px; padding: 0; }

.diary-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; }
.diary-overview__metric { display: flex; align-items: center; gap: 11px; min-height: 76px; padding: 14px 16px; }
.diary-overview__metric > div { min-width: 0; display: flex; flex-direction: column; }
.diary-overview__metric strong { overflow: hidden; font-family: Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.diary-overview__metric small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.diary-toolbar { margin-bottom: 18px; }
.diary-feed { position: relative; max-width: 870px; }
.diary-day { display: flex; align-items: baseline; gap: 6px; margin: 23px 0 9px 25px; color: var(--muted); }
.diary-day:first-child { margin-top: 4px; }
.diary-day span { color: var(--ink); font-family: Georgia, serif; font-size: 19px; }
.diary-day strong { text-transform: uppercase; font-size: 8px; letter-spacing: 1.1px; }
.diary-card { position: relative; display: grid; grid-template-columns: 55px minmax(0, 1fr); min-height: 158px; margin-bottom: 11px; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; }
.diary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.diary-card__rail { display: flex; justify-content: center; padding-top: 25px; background: #f3f5f2; border-right: 1px solid var(--line); }
.diary-card__rail i, .category-mark { width: 31px; height: 31px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 10px; }
.diary-card__rail--danger i, .category-mark--danger { color: var(--danger); background: var(--danger-soft); }
.diary-card__rail--success i, .category-mark--success { color: var(--success); background: var(--success-soft); }
.diary-card__rail--blue i, .category-mark--blue { color: #3f6d91; background: #e7f0f6; }
.diary-card__rail--violet i, .category-mark--violet { color: #70569d; background: #f0ebf7; }
.diary-card__rail--neutral i, .category-mark--neutral { color: var(--muted); background: var(--neutral-soft); }
.diary-card__body { min-width: 0; padding: 18px 20px 13px; }
.diary-card__meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; }
.diary-card__meta > span:not(:first-child)::before { content: "·"; margin-right: 9px; }
.category-tag { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 4px 7px; color: var(--brand); background: var(--brand-soft); border-radius: 7px; text-transform: uppercase; font-size: 7px; font-weight: 800; letter-spacing: .55px; }
.category-tag--danger { color: var(--danger); background: var(--danger-soft); }
.category-tag--success { color: var(--success); background: var(--success-soft); }
.category-tag--blue { color: #3f6d91; background: #e7f0f6; }
.category-tag--violet { color: #70569d; background: #f0ebf7; }
.category-tag--neutral { color: var(--muted); background: var(--neutral-soft); }
.diary-card__link { display: block; padding: 13px 0 14px; }
.diary-card__link h2 { margin-bottom: 5px; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.diary-card__link p { color: var(--ink-2); font-size: 12px; line-height: 1.65; }
.diary-card__footer { display: flex; align-items: center; gap: 14px; padding-top: 10px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.diary-card__footer > span:not(.status-badge) { display: inline-flex; align-items: center; gap: 4px; }
.diary-card__footer .icon-button { margin-left: auto; }
.diary-form .form-main { max-width: 860px; }
.file-drop { min-height: 114px; display: flex; align-items: center; gap: 13px; padding: 20px; color: var(--muted); background: #f8f9f7; border: 1px dashed var(--line-strong); border-radius: 14px; cursor: pointer; transition: border .2s, background .2s; }
.file-drop:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); }
.file-drop input, .comment-attach input, .portal-comment-compose label input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.file-drop__icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 12px; }
.file-drop > span:nth-child(3) { display: flex; flex-direction: column; }
.file-drop strong { color: var(--ink-2); font-size: 12px; }
.file-drop small { font-size: 9px; }
.file-drop b { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 600; }
.diary-publish-card { display: block; }
.visibility-options { display: grid; gap: 7px; margin: 17px 0; }
.visibility-option { position: relative; display: grid; grid-template-columns: 31px 1fr; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.visibility-option input { position: absolute; opacity: 0; }
.visibility-option > span { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); background: var(--neutral-soft); border-radius: 8px; }
.visibility-option b { font-size: 11px; }
.visibility-option small { color: var(--muted); font-size: 8px; }
.visibility-option:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
.visibility-option:has(input:checked) > span { color: #fff; background: var(--brand); }

.diary-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 255px; gap: 16px; align-items: start; }
.diary-detail-main { display: grid; gap: 14px; min-width: 0; }
.diary-detail-aside { position: sticky; top: 24px; display: grid; gap: 12px; }
.diary-entry-detail { padding: 24px; }
.diary-entry-detail > header { display: flex; align-items: center; gap: 11px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.diary-entry-detail > header > div { display: flex; flex-direction: column; gap: 4px; }
.diary-entry-detail > header > div small { color: var(--muted); font-size: 9px; }
.diary-entry-detail > header > .status-badge { margin-left: auto; }
.diary-entry-detail > h2 { margin: 22px 0 9px; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.diary-entry-detail__text { margin-top: 20px; color: var(--ink-2); font-size: 13px; line-height: 1.8; }
.edited-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; color: var(--muted); font-size: 9px; }
.attachment-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.attachment-tile { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px; background: #f7f8f6; border: 1px solid var(--line); border-radius: 11px; }
.attachment-tile > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.attachment-tile img { width: 64px; height: 52px; object-fit: cover; border-radius: 8px; }
.attachment-tile div { min-width: 0; display: flex; flex-direction: column; }
.attachment-tile strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-tile small { color: var(--muted); font-size: 8px; }

.conversation { overflow: hidden; scroll-margin-top: 20px; }
.conversation-list { display: grid; gap: 13px; padding: 4px 20px 22px; }
.conversation-empty { min-height: 75px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 10px; }
.comment { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 8px; align-items: start; }
.comment .avatar { width: 31px; height: 31px; font-size: 8px; }
.comment__bubble { max-width: 82%; padding: 10px 12px; background: #f3f5f2; border-radius: 4px 12px 12px; }
.comment--client .comment__bubble { background: var(--brand-soft); }
.comment__bubble header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.comment__bubble header strong { font-size: 9px; }
.comment__bubble header b { padding: 2px 5px; color: var(--brand); background: #fff; border-radius: 5px; font-size: 6px; text-transform: uppercase; }
.comment__bubble header small { margin-left: auto; color: var(--muted); font-size: 7px; }
.comment__bubble p { color: var(--ink-2); font-size: 11px; line-height: 1.55; }
.comment-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.comment-files a { display: inline-flex; align-items: center; gap: 4px; max-width: 200px; padding: 5px 7px; overflow: hidden; color: var(--brand); background: #fff; border-radius: 6px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.comment-compose { display: grid; grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 8px; align-items: end; padding: 12px 15px; background: #f7f8f6; border-top: 1px solid var(--line); }
.comment-compose textarea { min-height: 43px; max-height: 120px; resize: vertical; }
.comment-attach { width: 38px; height: 38px; display: grid; place-items: center; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }

.access-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; max-width: 1050px; }
.access-main { display: grid; gap: 14px; }
.access-aside { position: sticky; top: 24px; }
.access-reveal { position: relative; display: grid; grid-template-columns: 45px 1fr; gap: 5px 12px; padding: 20px; overflow: hidden; border-color: color-mix(in srgb, var(--success) 28%, var(--line)); }
.access-reveal::after { content: ""; position: absolute; width: 140px; height: 140px; right: -55px; top: -75px; background: var(--success-soft); border-radius: 50%; }
.access-reveal__icon { grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; color: var(--success); background: var(--success-soft); border-radius: 13px; }
.access-reveal small { color: var(--success); text-transform: uppercase; font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.access-reveal h2 { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.copy-field { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 12px; }
.copy-field input { width: 100%; padding: 0 12px; color: var(--muted); background: #f7f8f6; border: 1px solid var(--line); border-radius: 10px; font-size: 10px; }
.access-reveal > p { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.access-card { overflow: hidden; }
.access-card > header { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--line); }
.access-card__mark { width: 43px; height: 43px; display: grid; place-items: center; color: var(--muted); background: var(--neutral-soft); border-radius: 12px; }
.access-card__mark.is-active { color: var(--success); background: var(--success-soft); }
.access-card > header > div { display: flex; flex-direction: column; }
.access-card > header > div span { color: var(--muted); text-transform: uppercase; font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.access-card > header h2 { font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.access-card > header .status-badge { margin-left: auto; }
.access-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px; }
.access-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 4px 15px; border-right: 1px solid var(--line); }
.access-stats > div:first-child { padding-left: 0; }
.access-stats > div:last-child { border: 0; }
.access-stats small { color: var(--muted); font-size: 8px; }
.access-stats strong { font-size: 11px; }
.access-actions { display: flex; gap: 8px; padding: 15px 20px; background: #f7f8f6; border-top: 1px solid var(--line); }
.client-access-profile { display: flex; flex-direction: column; align-items: center; padding: 26px 20px; text-align: center; }
.avatar--xl { width: 62px; height: 62px; font-size: 15px; }
.client-access-profile h2 { margin-top: 12px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.client-access-profile > span:not(.avatar) { color: var(--muted); font-size: 9px; }
.client-access-profile > div { width: 100%; display: grid; gap: 8px; margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line); }
.client-access-profile > div span { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 9px; }

/* Client portal */
.portal-body { min-height: 100vh; overflow-x: hidden; background: #f4f6f2; }
.portal-header { position: sticky; top: 0; z-index: 30; min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 12px max(24px, calc((100vw - 1120px) / 2)); background: rgba(255,255,255,.91); border-bottom: 1px solid rgba(220,225,220,.9); backdrop-filter: blur(16px); }
.portal-brand { display: flex; align-items: center; gap: 10px; }
.portal-brand__mark { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--brand); border-radius: 11px; font-size: 10px; font-weight: 800; }
.portal-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.portal-brand > span:last-child { display: flex; flex-direction: column; }
.portal-brand strong { font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.portal-brand small { color: var(--muted); font-size: 8px; }
.portal-header__client { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.portal-header__client a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; }
.portal-main { width: min(1120px, calc(100% - 40px)); min-width: 0; min-height: calc(100vh - 135px); margin: 0 auto; padding: 42px 0 70px; }
.portal-main:has(.portal-bottom-nav) { padding-bottom: 125px; }
.portal-footer { width: min(1120px, calc(100% - 40px)); display: flex; justify-content: space-between; margin: 0 auto; padding: 20px 0 30px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.portal-footer a { display: flex; align-items: center; gap: 5px; }
.portal-projects-hero { margin-bottom: 25px; }
.portal-projects-hero h1, .portal-project-top h1 { font-family: Georgia, serif; font-size: 39px; font-weight: 500; letter-spacing: -.7px; }
.portal-projects-hero p, .portal-project-top p { color: var(--muted); font-size: 11px; }
.portal-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.portal-project-card { display: grid; grid-template-columns: 105px minmax(0, 1fr); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s; }
.portal-project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.portal-project-card__visual { grid-row: 1 / span 2; position: relative; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 82%, #172b22), #172b22); }
.portal-project-card__visual svg { position: absolute; width: 68px; height: 68px; transform: rotate(-90deg); }
.portal-project-card__visual circle { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 2.6; }
.portal-project-card__visual circle:last-child { stroke: #fff; stroke-dasharray: 0 100; stroke-linecap: round; }
.portal-project-card__visual > span { z-index: 1; font-family: Georgia, serif; font-size: 24px; }
.portal-project-card__visual small { font-size: 9px; }
.portal-project-card__body { min-width: 0; padding: 18px 19px 13px; }
.portal-project-card__body h2 { margin-top: 9px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.portal-project-card__body > p { color: var(--muted); font-size: 10px; }
.portal-project-card__body > div { display: flex; gap: 13px; margin-top: 14px; color: var(--muted); font-size: 8px; }
.portal-project-card__body > div span { display: flex; align-items: center; gap: 4px; }
.portal-project-card__footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 19px; background: #f7f8f6; border-top: 1px solid var(--line); }
.client-action-count { color: var(--warning); font-size: 8px; font-weight: 700; }
.client-action-count--clear { display: flex; align-items: center; gap: 4px; color: var(--success); }
.portal-empty { grid-column: 1 / -1; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
.portal-project-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.portal-project-top > div:first-child { display: flex; flex-direction: column; }
.portal-back { display: inline-flex; align-items: center; gap: 5px; width: max-content; margin-bottom: 20px; color: var(--muted); font-size: 9px; }
.portal-project-select { width: 220px; background: #fff; }
.portal-status-hero { display: grid; grid-template-columns: 125px minmax(0, 1fr) auto; align-items: center; min-height: 145px; padding: 22px 28px; overflow: hidden; }
.portal-progress { position: relative; width: 90px; height: 90px; display: grid; place-items: center; }
.portal-progress svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.portal-progress circle { fill: none; stroke: var(--neutral-soft); stroke-width: 2.6; }
.portal-progress circle:last-child { stroke: var(--brand); stroke-dasharray: 0 100; stroke-linecap: round; }
.portal-progress > span { display: flex; flex-direction: column; align-items: center; }
.portal-progress strong { font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.portal-progress small { color: var(--muted); font-size: 7px; }
.portal-status-copy h2 { margin-top: 10px; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.portal-status-copy p { color: var(--muted); font-size: 9px; }
.portal-status-metrics { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); }
.portal-status-metrics > div { display: flex; flex-direction: column; align-items: center; padding: 7px 20px; border-left: 1px solid var(--line); }
.portal-status-metrics strong { font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.portal-status-metrics small { color: var(--muted); font-size: 7px; white-space: nowrap; }
.portal-panel[hidden] { display: none !important; }
.portal-panel.is-active { animation: portal-panel-in .28s var(--ease) both; }
@keyframes portal-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.portal-overview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 34px 0 14px; }
.portal-overview-heading h2 { font-family: Georgia, serif; font-size: 26px; font-weight: 500; }
.portal-overview-heading > p { color: var(--muted); font-size: 9px; }
.portal-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.portal-overview-card { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) 30px; align-items: center; gap: 13px; padding: 17px; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.portal-overview-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); box-shadow: 0 12px 28px rgba(31,49,39,.07); }
.portal-overview-card__icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 14px; }
.portal-overview-card--priority .portal-overview-card__icon { color: var(--warning); background: var(--warning-soft); }
.portal-overview-card > div { min-width: 0; display: flex; flex-direction: column; }
.portal-overview-card small { color: var(--muted-2); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portal-overview-card strong { margin-top: 3px; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.portal-overview-card p { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.portal-overview-card > .icon { color: var(--muted-2); }
.portal-bottom-nav { position: fixed; z-index: 45; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(630px, calc(100% - 28px)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 6px; transform: translateX(-50%); background: rgba(255,255,255,.94); border: 1px solid rgba(210,218,211,.92); border-radius: 18px; box-shadow: 0 14px 42px rgba(29,45,36,.18); backdrop-filter: blur(18px); }
.portal-bottom-nav a { position: relative; min-width: 0; min-height: 51px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); border-radius: 13px; cursor: pointer; transition: color .18s ease, background .18s ease, transform .18s ease; }
.portal-bottom-nav a:hover { color: var(--ink); background: var(--neutral-soft); }
.portal-bottom-nav a.is-active { color: var(--brand); background: var(--brand-soft); }
.portal-bottom-nav a:active { transform: scale(.97); }
.portal-bottom-nav a > span { position: relative; display: grid; place-items: center; }
.portal-bottom-nav small { max-width: 100%; overflow: hidden; font-size: 7px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.portal-bottom-nav b { position: absolute; top: -7px; right: -10px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; color: #fff; background: var(--danger); border: 2px solid #fff; border-radius: 9px; font-size: 6px; }
.portal-media-modal { width: min(1040px, calc(100% - 30px)); max-width: none; height: min(820px, calc(100% - 30px)); max-height: none; padding: 0; overflow: visible; color: var(--ink); background: transparent; border: 0; }
.portal-media-modal::backdrop { background: rgba(13,20,16,.78); backdrop-filter: blur(7px); }
.portal-media-modal[open] { animation: portal-modal-in .2s ease-out both; }
@keyframes portal-modal-in { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
.portal-media-modal__card { width: 100%; height: 100%; display: grid; grid-template-rows: 54px minmax(0, 1fr); overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.portal-media-modal__card > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 13px 0 19px; border-bottom: 1px solid var(--line); }
.portal-media-modal__card > header p { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.portal-media-modal__card > header button { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: var(--muted); background: var(--neutral-soft); border: 0; border-radius: 11px; cursor: pointer; }
.portal-media-modal__stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #161b18; }
.portal-media-modal__stage img { z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.portal-media-modal__stage img.is-loaded { opacity: 1; }
.portal-media-modal__loading { position: absolute; color: rgba(255,255,255,.65); font-size: 9px; }
.portal-media-open { overflow: hidden; }
.portal-section { min-width: 0; max-width: 100%; margin-top: 45px; scroll-margin-top: 145px; }
.portal-panel.portal-section { margin-top: 0; scroll-margin-top: 90px; }
.portal-section__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.portal-section__header h2 { font-family: Georgia, serif; font-size: 26px; font-weight: 500; }
.portal-section__header > span { color: var(--muted); font-size: 9px; }
.portal-clear-state { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 20px; }
.portal-clear-state > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--success); background: var(--success-soft); border-radius: 13px; }
.portal-clear-state h3 { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.portal-clear-state p { color: var(--muted); font-size: 9px; }
.portal-pending-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portal-pending-card { min-width: 0; max-width: 100%; padding: 20px; scroll-margin-top: 145px; }
.portal-pending-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-pending-card > header > div { display: flex; gap: 5px; }
.portal-pending-card > h3 { margin-top: 16px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.portal-pending-card > p { min-height: 38px; margin-top: 4px; color: var(--ink-2); font-size: 10px; line-height: 1.6; }
.portal-pending-date { display: flex; flex-direction: column; margin: 15px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.portal-pending-date span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.portal-pending-date strong { font-size: 10px; }
.portal-response summary { width: 100%; list-style: none; cursor: pointer; }
.portal-response summary::-webkit-details-marker { display: none; }
.portal-response[open] summary { display: none; }
.portal-response form { display: grid; gap: 8px; }
.portal-response-sent { display: flex; gap: 9px; padding: 11px; color: var(--success); background: var(--success-soft); border-radius: 11px; }
.portal-response-sent strong { font-size: 9px; }
.portal-response-sent p { color: var(--ink-2); font-size: 9px; }
.portal-response-sent small { color: var(--muted); font-size: 7px; }
.portal-pending-attachments { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 15px; }
.portal-pending-attachments a { min-height: 105px; }
.portal-pending-attachments img { height: 118px; }
.portal-thread { display: grid; gap: 6px; margin-top: 13px; }
.portal-thread__item { max-width: 84%; padding: 8px 10px; background: #f2f4f1; border-radius: 4px 10px 10px; }
.portal-thread__item.is-client { margin-left: auto; background: var(--brand-soft); border-radius: 10px 4px 10px 10px; }
.portal-thread__item strong { font-size: 8px; }
.portal-thread__item p { color: var(--ink-2); font-size: 9px; }
.portal-thread__item small { color: var(--muted); font-size: 7px; }
.portal-thread__file { display: flex; align-items: center; gap: 4px; max-width: 190px; margin-top: 5px; padding: 4px 6px; overflow: hidden; color: var(--brand); background: rgba(255,255,255,.78); border-radius: 5px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.portal-comment-compose { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 6px; margin-top: 9px; }
.portal-comment-compose > label, .portal-comment-compose > button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.portal-comment-compose > button { color: #fff; background: var(--brand); border-color: var(--brand); }
.portal-comment-compose .field-control { min-width: 0; min-height: 34px; }
.portal-timeline { display: grid; gap: 18px; padding: 23px; }
.portal-phase { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 12px; }
.portal-phase::after { content: ""; position: absolute; top: 31px; bottom: -18px; left: 15px; width: 1px; background: var(--line-strong); }
.portal-phase:last-child::after { display: none; }
.portal-phase__dot { z-index: 1; width: 31px; height: 31px; display: grid; place-items: center; color: var(--muted); background: #fff; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 8px; }
.portal-phase.is-complete .portal-phase__dot { color: #fff; background: var(--success); border-color: var(--success); }
.portal-phase.is-current .portal-phase__dot { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.portal-phase > div { display: flex; flex-direction: column; min-width: 0; padding: 1px 0 2px; }
.portal-phase small { color: var(--muted); font-size: 7px; }
.portal-phase strong { margin-top: 4px; font-size: 10px; }
.portal-phase > div span { color: var(--muted); font-size: 8px; }
.portal-milestones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.portal-milestone { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 12px; }
.portal-milestone > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 9px; }
.portal-milestone div { min-width: 0; display: flex; flex-direction: column; }
.portal-milestone small, .portal-milestone p { color: var(--muted); font-size: 7px; }
.portal-milestone strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portal-update-list { display: grid; gap: 12px; max-width: 850px; }
.portal-update { min-width: 0; max-width: 100%; padding: 22px; scroll-margin-top: 145px; }
.portal-update > header { display: flex; align-items: center; gap: 9px; }
.portal-update > header > div { display: flex; flex-direction: column; }
.portal-update > header span { color: var(--muted); font-size: 8px; }
.portal-update > header strong { font-size: 9px; }
.portal-update > h3 { margin-top: 16px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.portal-update > p { margin-top: 9px; overflow-wrap: anywhere; color: var(--ink-2); font-size: 11px; line-height: 1.75; }
.portal-attachments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
.portal-attachments a { position: relative; min-width: 0; min-height: 92px; display: grid; place-items: center; overflow: hidden; background: #f3f5f2; border: 1px solid var(--line); border-radius: 10px; }
.portal-attachments img { width: 100%; height: 115px; object-fit: cover; }
.portal-attachments small { position: absolute; left: 7px; right: 7px; bottom: 7px; padding: 4px 6px; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.9); border-radius: 5px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.portal-message { min-height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.portal-message__mark { width: 60px; height: 60px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 18px; }
.portal-message h1 { font-family: Georgia, serif; font-size: 29px; font-weight: 500; }
.portal-message p { color: var(--muted); }

@media (max-width: 900px) {
    .diary-detail-layout, .access-layout { grid-template-columns: 1fr; }
    .diary-detail-aside, .access-aside { position: static; }
    .portal-status-hero { grid-template-columns: 105px 1fr; }
    .portal-status-metrics { grid-column: 1 / -1; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
    .portal-status-metrics > div:first-child { border-left: 0; }
    .portal-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .data-table--clients .data-table__row > :nth-child(4) { grid-column: 1; padding-left: 47px; }
    .data-table--clients .data-table__row > :nth-child(5) { display: none; }
    .data-table--clients .data-table__row > .row-action { display: flex; }
    .diary-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .diary-overview__metric { min-height: 66px; padding: 11px; }
    .diary-overview__metric strong { font-size: 17px; }
    .diary-feed { max-width: none; }
    .diary-day { margin-left: 15px; }
    .diary-card { grid-template-columns: 42px minmax(0, 1fr); min-height: 140px; }
    .diary-card__rail { padding-top: 18px; }
    .diary-card__rail i { width: 27px; height: 27px; }
    .diary-card__body { padding: 14px 13px 10px; }
    .diary-card__meta { flex-wrap: wrap; gap: 5px; }
    .diary-card__link { padding-block: 10px; }
    .diary-card__footer { gap: 8px; }
    .diary-card__footer > span:nth-last-of-type(1) { display: none; }
    .diary-form .form-summary { display: block; }
    .file-drop { align-items: flex-start; min-height: 98px; padding: 14px; }
    .file-drop b { display: none; }
    .attachment-gallery { grid-template-columns: 1fr; }
    .diary-entry-detail { padding: 17px 14px; }
    .diary-entry-detail > header { align-items: flex-start; flex-wrap: wrap; }
    .diary-entry-detail > header > .status-badge { margin-left: 0; }
    .comment__bubble { max-width: 100%; }
    .conversation-list { padding-inline: 12px; }
    .access-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
    .access-stats > div:nth-child(2) { border-right: 0; }
    .access-stats > div:nth-child(3) { padding-left: 0; }
    .copy-field { grid-template-columns: 1fr; }
    .copy-field input { min-height: 42px; }
    .access-actions { flex-direction: column; }
    .access-actions form, .access-actions .button { width: 100%; }
    .portal-header { min-height: 63px; padding: 9px 14px; }
    .portal-brand small, .portal-header__client > span { display: none; }
    .portal-main { width: calc(100% - 24px); padding: 26px 0 105px; }
    .portal-footer { width: calc(100% - 24px); padding-bottom: 105px; }
    .portal-projects-hero h1, .portal-project-top h1 { font-size: 31px; }
    .portal-project-grid { grid-template-columns: 1fr; }
    .portal-project-card { grid-template-columns: 82px minmax(0, 1fr); }
    .portal-project-card__visual svg { width: 59px; height: 59px; }
    .portal-project-top { align-items: stretch; flex-direction: column; gap: 13px; }
    .portal-project-select { width: 100%; }
    .portal-status-hero { grid-template-columns: 83px minmax(0, 1fr); padding: 18px 14px; }
    .portal-progress { width: 72px; height: 72px; }
    .portal-progress strong { font-size: 18px; }
    .portal-status-copy h2 { font-size: 20px; }
    .portal-status-metrics { grid-template-columns: repeat(3, 1fr); }
    .portal-status-metrics > div { min-width: 0; padding-inline: 5px; }
    .portal-status-metrics small { text-align: center; white-space: normal; }
    .portal-overview-heading { align-items: flex-start; flex-direction: column; gap: 4px; margin-top: 26px; }
    .portal-overview-heading h2 { font-size: 23px; }
    .portal-overview-grid { grid-template-columns: 1fr; gap: 8px; }
    .portal-overview-card { grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 10px; padding: 14px; }
    .portal-overview-card__icon { width: 42px; height: 42px; border-radius: 12px; }
    .portal-overview-card strong { font-size: 16px; }
    .portal-bottom-nav { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); padding: 5px 3px; border-radius: 17px; }
    .portal-bottom-nav a { min-height: 49px; gap: 2px; border-radius: 12px; }
    .portal-bottom-nav small { font-size: 6.5px; }
    .portal-bottom-nav .icon { width: 19px; height: 19px; }
    .portal-media-modal { width: calc(100% - 16px); height: calc(100% - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))); }
    .portal-media-modal__card { grid-template-rows: 50px minmax(0, 1fr); border-radius: 15px; }
    .portal-section { margin-top: 36px; }
    .portal-panel.portal-section { margin-top: 0; }
    .portal-section__header h2 { font-size: 23px; }
    .portal-pending-list { grid-template-columns: 1fr; }
    .portal-pending-card { padding: 16px; }
    .portal-pending-card > header { align-items: flex-start; flex-direction: column; }
    .portal-timeline { gap: 16px; padding: 17px 14px; }
    .portal-phase { gap: 11px; }
    .portal-phase::after { bottom: -16px; }
    .portal-milestones { grid-template-columns: 1fr; }
    .portal-update { padding: 17px 14px; }
    .portal-pending-list, .portal-update-list { min-width: 0; max-width: 100%; }
    .portal-comment-compose { min-width: 0; max-width: 100%; }
    .portal-comment-compose input { width: 100%; }
    .portal-thread__item { overflow-wrap: anywhere; }
    .portal-attachments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.client-access-profile > .site-access-profile__mark { color: var(--brand); background: var(--brand-soft); }

/* Arquivos e revisões */
.document-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.document-toolbar { margin-bottom: 12px; }
.document-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.document-library > .empty-state { grid-column: 1 / -1; }
.document-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 154px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.document-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); box-shadow: 0 12px 30px rgba(35,48,40,.07); }
.document-card__preview { position: relative; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--brand); background: linear-gradient(145deg, var(--brand-soft), #eef1ed); border-right: 1px solid var(--line); overflow: hidden; }
.document-card__preview b { font-size: 9px; letter-spacing: .13em; }
.document-card__preview.is-image { background: #e9ede9; }
.document-card__preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.document-card:hover .document-card__preview img { transform: scale(1.035); }
.document-card__body { min-width: 0; display: flex; flex-direction: column; padding: 15px 15px 11px; }
.document-card__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.document-card__body > a { color: inherit; }
.document-card__body h2 { margin: 11px 0 4px; font-size: 16px; line-height: 1.25; }
.document-card__body > p { color: var(--muted); font-size: 10px; }
.document-card__body footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 11px; color: var(--muted-2); font-size: 9px; border-top: 1px solid var(--line-soft); }
.document-card__body footer .icon-button { margin-left: auto; }
.revision-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; color: var(--brand); font-size: 9px; font-weight: 800; background: var(--brand-soft); border-radius: 7px; }
.document-current-mini { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; color: var(--brand); background: var(--brand-soft); border-radius: 11px; }
.document-current-mini > div { display: flex; flex-direction: column; }
.document-current-mini small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.document-current-mini strong { font-size: 12px; }
.revision-current-card { display: flex; flex-direction: column; padding: 20px; }
.revision-current-card__icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 22px; color: var(--brand); background: var(--brand-soft); border-radius: 13px; }
.revision-current-card > small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }
.revision-current-card > strong { margin: 5px 0; font-size: 25px; }
.revision-current-card > p { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.revision-current-card > div { display: flex; gap: 9px; margin-top: 18px; padding-top: 12px; color: var(--muted-2); font-size: 9px; border-top: 1px solid var(--line); }
.document-detail-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; margin: 14px 0; padding: 18px 20px; }
.document-detail-hero__mark { width: 48px; height: 48px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 14px; }
.document-detail-hero > div:nth-child(2) > p { margin-top: 8px; color: var(--muted); font-size: 11px; }
.document-detail-hero > div:last-child { min-width: 105px; padding-left: 20px; border-left: 1px solid var(--line); }
.document-detail-hero > div:last-child small { display: block; color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.document-detail-hero > div:last-child strong { display: block; margin-top: 3px; color: var(--brand); font-size: 21px; }
.document-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; gap: 14px; }
.document-detail-layout > main { display: grid; gap: 14px; min-width: 0; }
.document-detail-layout > aside { display: grid; gap: 10px; position: sticky; top: 74px; }
.document-preview { overflow: hidden; }
.document-preview > header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.document-preview > header h2 { max-width: 520px; margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.document-preview__image { display: flex; min-height: 310px; max-height: 560px; padding: 16px; background: #eef0ed; }
.document-preview__image img { width: 100%; height: 100%; max-height: 525px; object-fit: contain; border-radius: 8px; }
.document-preview__pdf { min-height: 295px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--brand); background: radial-gradient(circle at 50% 40%, var(--brand-soft), #f5f6f3 62%); }
.document-preview__pdf span { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.document-preview__pdf strong { font-size: 18px; letter-spacing: .1em; }
.document-preview__pdf small { margin-top: 4px; color: var(--muted-2); font-size: 9px; }
.revision-history { overflow: hidden; }
.revision-list { padding: 0 18px 9px; }
.revision-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.revision-item__rail { width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.revision-item.is-current .revision-item__rail { color: #fff; background: var(--brand); border-color: var(--brand); }
.revision-item > div > div { display: flex; align-items: center; gap: 7px; }
.revision-item > div > div > strong { font-size: 12px; }
.revision-item p { margin: 3px 0; color: var(--muted); font-size: 10px; }
.revision-item small { color: var(--muted-2); font-size: 8px; }
.document-archive-panel { margin-top: 0; }
.obsolete-warning { max-width: 780px; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 20px; margin: 35px auto; padding: 30px; }
.obsolete-warning__icon, .portal-obsolete-card__icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); border-radius: 18px; }
.obsolete-warning h2, .portal-obsolete-card h1 { margin: 13px 0 6px; font-size: 25px; }
.obsolete-warning p, .portal-obsolete-card > p { color: var(--muted); font-size: 12px; }
.obsolete-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 22px 0; }
.obsolete-compare > div { min-width: 0; display: flex; flex-direction: column; padding: 14px; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 15%, transparent); border-radius: 12px; }
.obsolete-compare > div.is-current { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.obsolete-compare small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.obsolete-compare strong { margin: 4px 0; font-size: 18px; }
.obsolete-compare span { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.obsolete-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-document-grid > .portal-clear-state { grid-column: 1 / -1; }
.portal-document-card { min-width: 0; display: grid; grid-template-columns: 45px minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 14px; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.portal-document-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); box-shadow: 0 10px 26px rgba(33,48,39,.06); }
.portal-document-card__icon { width: 45px; height: 45px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 13px; }
.portal-document-card > div { min-width: 0; display: flex; flex-direction: column; }
.portal-document-card small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.portal-document-card strong { margin: 4px 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-document-card > div > span { color: var(--muted); font-size: 9px; }
.portal-document-card__action { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand); border: 1px solid var(--line); border-radius: 10px; }
.portal-obsolete-page { max-width: 730px; margin: 15px auto 50px; }
.portal-obsolete-page > .portal-back { display: inline-flex; margin-bottom: 15px; }
.portal-obsolete-card { padding: 32px; }
.portal-obsolete-card__icon { margin-bottom: 18px; }

@media (max-width: 900px) {
    .document-library { grid-template-columns: 1fr; }
    .document-detail-layout { grid-template-columns: 1fr; }
    .document-detail-layout > aside { position: static; }
}

@media (max-width: 680px) {
    .document-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .document-card { grid-template-columns: 82px minmax(0, 1fr); min-height: 142px; }
    .document-card__body { padding: 13px 12px 9px; }
    .document-card__body footer { gap: 7px; flex-wrap: wrap; }
    .document-card__body footer > span:nth-of-type(3) { display: none; }
    .document-detail-hero { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
    .document-detail-hero > div:last-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 11px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .document-preview > header { align-items: flex-start; flex-direction: column; }
    .document-preview > header .button { width: 100%; }
    .document-preview__image, .document-preview__pdf { min-height: 230px; }
    .revision-list { padding-inline: 13px; }
    .revision-item { grid-template-columns: 27px minmax(0, 1fr) auto; gap: 7px; }
    .revision-item small { display: block; line-height: 1.5; }
    .obsolete-warning { grid-template-columns: 1fr; margin-top: 18px; padding: 20px 16px; }
    .obsolete-compare { grid-template-columns: 1fr; }
    .obsolete-compare > svg { margin: -2px auto; transform: rotate(90deg); }
    .obsolete-actions, .obsolete-actions .button { width: 100%; }
    .portal-document-grid { grid-template-columns: 1fr; }
    .portal-obsolete-card { padding: 21px 16px; }
}

/* Gantt da obra */
.operational-metric--wordy strong { font-size: 17px; letter-spacing: -.3px; }
.empty-state__hint { max-width: 380px; color: var(--muted-2); font-size: 10px; text-align: center; }

.gantt-board { display: flex; flex-direction: column; overflow: hidden; }
.gantt-board__bar { display: flex; align-items: center; gap: 16px; padding: 15px 18px 13px; border-bottom: 1px solid var(--line); }
.gantt-board__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gantt-board__title h2 { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; letter-spacing: -.25px; white-space: nowrap; }
.gantt-board__title span { color: var(--muted-2); font-size: 9px; white-space: nowrap; }
.gantt-layers { display: flex; align-items: center; gap: 6px; margin: 0 auto; padding: 3px; overflow-x: auto; scrollbar-width: none; background: #f3f4f1; border-radius: 11px; }
.gantt-layers::-webkit-scrollbar { display: none; }
.gantt-chip { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font-size: 9px; font-weight: 680; white-space: nowrap; transition: .18s; }
.gantt-chip > i { width: 8px; height: 8px; border-radius: 3px; background: currentColor; opacity: .28; }
.gantt-chip > span { min-width: 18px; height: 17px; display: grid; place-items: center; padding: 0 5px; background: rgba(0,0,0,.05); border-radius: 999px; font-size: 8px; }
.gantt-chip.is-active { color: var(--ink); background: var(--surface); box-shadow: 0 2px 8px rgba(28,38,33,.08); }
.gantt-chip--milestone.is-active > i { background: var(--brand); opacity: 1; }
.gantt-chip--diary.is-active > i { background: #5b7fa6; opacity: 1; }
.gantt-chip--pending.is-active > i { background: #d29a54; opacity: 1; }
.gantt-chip--block.is-active > i { background: #c7655b; opacity: 1; }
.gantt-board__controls { display: flex; align-items: center; gap: 7px; }

.gantt-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; cursor: grab; background: var(--surface); }
.gantt-scroll:focus-visible { outline-offset: -3px; }
.gantt-scroll.is-dragging { cursor: grabbing; user-select: none; }
.gantt-canvas { position: relative; }

.gantt-head { position: relative; z-index: 6; display: flex; background: #fbfcfa; border-bottom: 1px solid var(--line); }
.gantt-corner { position: sticky; left: 0; z-index: 7; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 14px; background: #fbfcfa; border-right: 1px solid var(--line); }
.gantt-corner strong { font-size: 9px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.gantt-corner small { color: var(--muted-2); font-size: 8px; }
.gantt-head__track { position: relative; height: 46px; flex: 0 0 auto; }
.gantt-head__month { position: absolute; top: 6px; bottom: 0; border-left: 1px solid var(--line); padding-left: 7px; overflow: hidden; }
.gantt-head__month span { display: block; color: var(--ink-2); font-size: 9px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.gantt-head__tick { position: absolute; bottom: 0; height: 15px; border-left: 1px solid #e6eae6; }
.gantt-head__tick span { position: absolute; left: 3px; bottom: 3px; color: var(--muted-2); font-size: 7px; font-style: normal; }

.gantt-row { display: flex; border-top: 1px solid #eef1ee; }
.gantt-row:first-child { border-top: 0; }
.gantt-row--lane { background: #fbfcfa; }
.gantt-row__label { position: sticky; left: 0; z-index: 5; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 12px; text-align: left; background: var(--surface); border: 0; border-right: 1px solid var(--line); font: inherit; }
button.gantt-row__label { cursor: pointer; transition: background .18s; }
button.gantt-row__label:hover { background: #f6f8f5; }
.gantt-row--lane .gantt-row__label { background: #fbfcfa; }
.gantt-row__num { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 800; }
.gantt-row__num.tone-success { color: #fff; background: var(--success); }
.gantt-row__num.tone-warning { color: var(--warning); background: var(--warning-soft); box-shadow: inset 0 0 0 1px #ecd9bd; }
.gantt-row__num.tone-danger { color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1px #ecc5bf; }
.gantt-row__num.tone-neutral { color: var(--muted); background: var(--neutral-soft); box-shadow: inset 0 0 0 1px #dde2dd; }
.gantt-row__num.tone-lane { color: var(--muted-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.gantt-row__copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gantt-row__copy strong { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gantt-row__copy small { overflow: hidden; color: var(--muted-2); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.gantt-row__track { position: relative; flex: 0 0 auto; overflow: hidden; }

.gantt-bar { position: absolute; display: block; border: 0; padding: 0; }
.gantt-bar--baseline { top: 21px; height: 6px; background: transparent; border: 1px dashed #b9c2ba; border-radius: 4px; }
.gantt-bar--planned { top: 30px; height: 17px; border-radius: 6px; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,.09); transition: filter .15s ease, transform .15s ease; }
.gantt-bar--planned:hover { filter: brightness(1.07); }
.gantt-bar--planned.tone-success { background: #3d8563; }
.gantt-bar--planned.tone-warning { background: #dda15c; }
.gantt-bar--planned.tone-danger { background: #c7655b; }
.gantt-bar--planned.tone-neutral { background: #cdd6cf; }
.gantt-bar--actual { top: 51px; height: 8px; border-radius: 5px; background: var(--brand-dark); }
.gantt-bar--actual.is-open { background: linear-gradient(90deg, var(--brand-dark) calc(100% - 16px), rgba(23,61,46,.25)); }
.gantt-tick { position: absolute; top: 48px; width: 3px; height: 14px; margin-left: -1.5px; background: var(--brand-dark); border-radius: 3px; }

.gantt-block-overlay { position: absolute; top: 17px; bottom: 11px; padding: 0; background: repeating-linear-gradient(135deg, rgba(184,83,73,.15) 0 5px, rgba(184,83,73,.04) 5px 10px); border: 1px solid rgba(184,83,73,.34); border-radius: 7px; cursor: pointer; z-index: 2; transition: .15s; }
.gantt-block-overlay:hover { background-color: rgba(184,83,73,.07); }
.gantt-block-overlay.is-open { border-style: solid; border-width: 1px 1px 1px 3px; }
.gantt-row--lane .gantt-block-overlay { top: 8px; bottom: 8px; }

.gantt-ms { position: absolute; top: 31px; width: 15px; height: 15px; padding: 0; transform: translateX(-50%) rotate(45deg); border: 2px solid #fff; border-radius: 3.5px; box-shadow: 0 1px 4px rgba(24,35,31,.28); cursor: pointer; z-index: 3; transition: transform .15s ease; }
.gantt-ms:hover { transform: translateX(-50%) rotate(45deg) scale(1.18); }
.gantt-ms.tone-success { background: var(--success); }
.gantt-ms.tone-warning { background: #d99b4e; }
.gantt-ms.tone-danger { background: #c7655b; }
.gantt-ms.tone-neutral { background: #9aa39e; }
.gantt-ms.tone-multi { background: var(--ink-2); }
.gantt-ms.is-critical::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid rgba(199,101,91,.55); border-radius: 6px; }
.gantt-ms .gantt-marker__count { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; transform: rotate(-45deg); font-size: 7px; font-weight: 800; }
.gantt-row--lane .gantt-ms { top: calc(50% - 7.5px); }

.gantt-dot { position: absolute; bottom: 5px; min-width: 13px; height: 13px; padding: 0; transform: translateX(-50%); border: 2px solid #fff; border-radius: 999px; box-shadow: 0 1px 4px rgba(24,35,31,.24); cursor: pointer; z-index: 3; color: #fff; font-size: 7px; font-weight: 800; transition: transform .15s ease; }
.gantt-dot:hover { transform: translateX(-50%) scale(1.22); }
.gantt-dot .gantt-marker__count { padding: 0 3px; }
.gantt-dot.tone-brand { background: var(--brand); }
.gantt-dot.tone-blue { background: #5b7fa6; }
.gantt-dot.tone-violet { background: #8a76b5; }
.gantt-dot.tone-danger { background: #c7655b; }
.gantt-dot.tone-success { background: #4e9a72; }
.gantt-dot.tone-neutral { background: #9aa39e; }
.gantt-dot.tone-multi { background: var(--ink-2); }
.gantt-row--lane .gantt-dot { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
.gantt-row--lane .gantt-dot:hover { transform: translate(-50%, -50%) scale(1.22); }

.gantt-flag { position: absolute; top: 3px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; transform: translateX(-50%); background: transparent; border: 0; cursor: pointer; z-index: 3; transition: transform .15s ease; }
.gantt-flag:hover { transform: translateX(-50%) scale(1.18); }
.gantt-flag svg { filter: drop-shadow(0 1px 1.5px rgba(24,35,31,.3)); }
.gantt-flag.tone-success { color: var(--success); }
.gantt-flag.tone-warning { color: #cf8f42; }
.gantt-flag.tone-danger { color: #c14f44; }
.gantt-flag.tone-neutral { color: #7d8781; }
.gantt-flag.tone-multi { color: var(--ink-2); }
.gantt-flag.is-blocking::after { content: ""; position: absolute; inset: 1px; border: 1.5px solid rgba(199,101,91,.5); border-radius: 50%; }
.gantt-flag .gantt-marker__count { position: absolute; right: -3px; top: -3px; min-width: 12px; height: 12px; display: grid; place-items: center; padding: 0 2px; color: #fff; background: var(--ink-2); border-radius: 999px; font-size: 6.5px; font-weight: 800; }
.gantt-row--lane .gantt-flag { top: 50%; transform: translate(-50%, -50%); }
.gantt-row--lane .gantt-flag:hover { transform: translate(-50%, -50%) scale(1.18); }

.gantt--hide-milestones .gantt-ms, .gantt--hide-milestones [data-lane="milestones"],
.gantt--hide-diary .gantt-dot, .gantt--hide-diary [data-lane="diary"],
.gantt--hide-pendings .gantt-flag, .gantt--hide-pendings [data-lane="pendings"],
.gantt--hide-blocks .gantt-block-overlay { display: none; }

.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #cf6a5d; opacity: .85; z-index: 4; pointer-events: none; }
.gantt-today__pill { position: absolute; top: 5px; transform: translateX(-50%); z-index: 8; padding: 3px 7px; color: #fff; background: #cf6a5d; border-radius: 999px; font-size: 7px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; pointer-events: none; box-shadow: 0 3px 8px rgba(199,90,77,.35); }

.gantt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; padding: 11px 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: 8px; }
.gantt-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legend__bar { width: 20px; height: 8px; border-radius: 4px; }
.gantt-legend__bar--planned { background: #3d8563; }
.gantt-legend__bar--actual { height: 6px; background: var(--brand-dark); }
.gantt-legend__bar--baseline { height: 5px; background: transparent; border: 1px dashed #b9c2ba; }
.gantt-legend__bar--block { background: repeating-linear-gradient(135deg, rgba(184,83,73,.3) 0 4px, rgba(184,83,73,.08) 4px 8px); border: 1px solid rgba(184,83,73,.4); }
.gantt-legend__diamond { width: 9px; height: 9px; background: var(--brand); border-radius: 2px; transform: rotate(45deg); }
.gantt-legend__dot { width: 10px; height: 10px; background: #5b7fa6; border-radius: 50%; }
.gantt-legend__flag { display: grid; place-items: center; color: #cf8f42; }
.gantt-legend__today { width: 2px; height: 13px; background: #cf6a5d; }

.gantt-tip { position: fixed; z-index: 130; max-width: 250px; padding: 9px 11px; color: #f2f6f3; background: #17231f; border-radius: 10px; box-shadow: 0 14px 34px rgba(15,26,21,.35); font-size: 9px; pointer-events: none; }
.gantt-tip strong { display: block; margin-bottom: 3px; font-size: 9.5px; }
.gantt-tip span { display: block; margin-top: 1px; color: #b3c2ba; font-size: 8px; }

.gantt-modal { width: min(720px, calc(100% - 28px)); max-height: none; padding: 0; overflow: visible; color: var(--ink); background: transparent; border: 0; }
.gantt-modal::backdrop { background: rgba(13,20,16,.72); backdrop-filter: blur(6px); }
.gantt-modal[open] { animation: portal-modal-in .2s ease-out both; }
.gantt-modal__card { display: flex; flex-direction: column; max-height: min(86vh, 780px); overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.gantt-modal__card > header { display: flex; align-items: center; gap: 11px; padding: 13px 14px 13px 19px; border-bottom: 1px solid var(--line); }
.gantt-modal__heading { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.gantt-modal__heading small { color: var(--brand); font-size: 7.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.gantt-modal__heading p { overflow: hidden; margin-top: 1px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.gantt-modal__back, .gantt-modal__close { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); background: var(--neutral-soft); border: 0; border-radius: 10px; cursor: pointer; transition: .15s; }
.gantt-modal__back:hover, .gantt-modal__close:hover { color: var(--ink); background: #e5e9e5; }
.gantt-modal__body { display: flex; flex-direction: column; gap: 15px; padding: 16px 19px 19px; overflow-y: auto; }

.gantt-detail__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.gantt-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); overflow: hidden; background: #fbfcfa; border: 1px solid var(--line); border-radius: 12px; }
.gantt-detail__grid > div { display: flex; flex-direction: column; gap: 3px; margin: 0 -1px -1px 0; padding: 11px 13px; background: #fbfcfa; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gantt-detail__grid small { color: var(--muted-2); font-size: 7px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; }
.gantt-detail__grid strong { font-size: 11px; font-weight: 680; }
.gantt-detail__grid strong.tone-danger { color: var(--danger); }
.gantt-detail__grid strong.tone-warning { color: var(--warning); }
.gantt-detail__grid strong.tone-success { color: var(--success); }
.gantt-detail__text { color: var(--ink-2); font-size: 11px; line-height: 1.65; white-space: pre-line; }
.gantt-detail__section { display: flex; flex-direction: column; gap: 6px; }
.gantt-detail__section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.gantt-detail__section h3 { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.gantt-detail__section > header > span { color: var(--muted-2); font-size: 8px; }
.gantt-detail__item { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; text-align: left; color: inherit; background: #fbfcfa; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; font: inherit; text-decoration: none; transition: .15s; }
.gantt-detail__item:hover { background: #f5f8f5; border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); }
.gantt-detail__item:not(button):not(a) { cursor: default; }
.gantt-detail__item-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; font-size: 10px; font-weight: 800; }
.gantt-detail__item-icon.tone-success { color: var(--success); background: var(--success-soft); }
.gantt-detail__item-icon.tone-warning { color: var(--warning); background: var(--warning-soft); }
.gantt-detail__item-icon.tone-danger { color: var(--danger); background: var(--danger-soft); }
.gantt-detail__item-icon.tone-neutral { color: var(--muted); background: var(--neutral-soft); }
.gantt-detail__item-icon.tone-brand { color: var(--brand); background: var(--brand-soft); }
.gantt-detail__item-icon.tone-blue { color: #43617f; background: #e2e9f1; }
.gantt-detail__item-icon.tone-violet { color: #64548c; background: #e9e4f3; }
.gantt-detail__item-icon.tone-group-office { color: #25513f; background: #dcebe3; }
.gantt-detail__item-icon.tone-group-client { color: #4b496c; background: #e4e4f1; }
.gantt-detail__item-icon.tone-group-external { color: #74552f; background: #f2e5d3; }
.gantt-detail__item-icon.tone-group-unassigned { color: #68716c; background: #ecefec; }
.gantt-detail__item-copy { min-width: 0; display: flex; flex-direction: column; }
.gantt-detail__item-copy strong { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gantt-detail__item-copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.gantt-detail__item > b { color: var(--muted); font-size: 9px; font-weight: 720; white-space: nowrap; }
.gantt-detail__item > b.tone-danger { color: var(--danger); }
.gantt-detail__item > b.tone-warning { color: var(--warning); }
.gantt-detail__item > b.tone-success { color: var(--success); }
.gantt-detail__item > b.tone-neutral { color: var(--muted); }
.gantt-detail__more { color: var(--muted-2); font-size: 8px; text-align: center; }
.gantt-detail__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; padding-top: 13px; border-top: 1px solid #eef1ee; }
.gantt-attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.gantt-attachments__item { position: relative; height: 92px; display: grid; place-items: center; overflow: hidden; color: var(--brand); background: #f3f6f3; border: 1px solid var(--line); border-radius: 11px; }
.gantt-attachments__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.gantt-attachments__item:hover img { transform: scale(1.045); }
.gantt-attachments__pdf { font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.gantt-attachments__item small { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.92); border-radius: 6px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.gantt-delay-strip { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; background: #f7f9f6; border: 1px solid var(--line); border-radius: 11px; }
.gantt-delay-strip > div { display: flex; flex-direction: column; padding: 11px 13px; }
.gantt-delay-strip > div + div { border-left: 1px solid var(--line); }
.gantt-delay-strip strong { font-family: Georgia, serif; font-size: 17px; }
.gantt-delay-strip span { color: var(--muted-2); font-size: 7px; }

.gantt-board.is-presenting { border-radius: 0; border: 0; }
.gantt-board.is-presenting .gantt-scroll { flex: 1; }
.gantt-board:fullscreen { background: var(--surface); }

@media (max-width: 900px) {
    .gantt-board__bar { flex-wrap: wrap; }
    .gantt-layers { order: 3; width: 100%; margin: 0; }
    .gantt-board__controls { margin-left: auto; }
}

@media (max-width: 680px) {
    .gantt-board__bar { gap: 10px; padding: 12px 12px 10px; }
    .gantt-board__title h2 { font-size: 16px; }
    .gantt-board__controls .button span { display: none; }
    .gantt-legend { gap: 6px 11px; padding: 9px 12px; }
    .gantt-modal { width: calc(100% - 14px); }
    .gantt-modal__card { max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); border-radius: 15px; }
    .gantt-modal__heading p { font-size: 16px; white-space: normal; }
    .gantt-detail__grid { grid-template-columns: repeat(2, 1fr); }
    .gantt-delay-strip { grid-template-columns: 1fr; }
    .gantt-delay-strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* Moodboard: listagem, criação, construtor e experiência do cliente */
.mb-hint { margin-top: 12px; color: var(--muted-2); font-size: 9px; line-height: 1.5; }
.mb-field-hint { max-width: 58%; margin-left: auto; color: var(--muted-2); font-size: 8px; text-align: right; }
.mb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.mb-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 17px; transition: transform .24s var(--ease), box-shadow .24s ease; }
.mb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,38,33,.1); }
.mb-card__visual { position: relative; height: 96px; display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, var(--mb-bg), color-mix(in srgb, var(--mb-bg) 70%, var(--mb-accent))); }
.mb-card__swatch { display: flex; gap: 5px; }
.mb-card__swatch i { width: 18px; height: 18px; border-radius: 6px; background: var(--mb-accent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.mb-card__swatch i:nth-child(2) { background: var(--mb-ink); opacity: .75; }
.mb-card__swatch i:nth-child(3) { background: #fff; opacity: .85; }
.mb-card__theme { color: var(--mb-ink); font-family: Georgia, serif; font-size: 12px; opacity: .8; }
.mb-card__body { flex: 1; display: flex; flex-direction: column; padding: 15px 17px 14px; }
.mb-card__body h2 { overflow: hidden; font-family: Georgia, serif; font-size: 18px; font-weight: 500; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.mb-card__body > p { display: flex; align-items: center; gap: 5px; margin-top: 4px; overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mb-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; color: var(--muted); font-size: 8px; }
.mb-card__meta strong { color: var(--ink); font-size: 10px; }
.mb-card__answered { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-weight: 700; }
.mb-card__progress { position: relative; width: 100%; height: 18px; display: block; overflow: hidden; background: #edf0ec; border-radius: 6px; }
.mb-card__progress i { position: absolute; inset: 0 auto 0 0; background: var(--brand-soft); }
.mb-card__progress b { position: relative; display: block; padding: 0 7px; line-height: 18px; color: var(--brand-dark); font-size: 8px; font-weight: 700; }
.mb-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; color: var(--muted-2); font-size: 8px; }
.mb-card:hover .round-arrow { color: #fff; background: var(--brand); transform: rotate(-25deg); }

.mb-base-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.mb-base-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 130px; padding: 15px; background: #fbfcfa; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.mb-base-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.mb-base-card input { position: absolute; opacity: 0; pointer-events: none; }
.mb-base-card.is-selected, .mb-base-card:has(input:checked) { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.mb-base-card__icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 6px; color: var(--brand); background: var(--brand-soft); border-radius: 10px; }
.mb-base-card--preset .mb-base-card__icon { color: #8a5a1f; background: #f7ead6; }
.mb-base-card strong { font-size: 11px; }
.mb-base-card small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.mb-base-card em { margin-top: auto; padding-top: 8px; color: var(--muted-2); font-size: 8px; font-style: normal; font-weight: 700; }
.mb-base-card--ai { font: inherit; color: inherit; text-align: left; background: linear-gradient(135deg, #ffffff 0%, var(--brand-soft) 100%); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.mb-base-card--ai:hover { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.mb-base-card--ai .mb-base-card__icon { color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 30%, transparent); }
.mb-base-card--ai em { color: var(--brand); }
.mb-base-card--ai:disabled { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }
.mb-base-card--ai:disabled .mb-base-card__icon { background: var(--muted-2); box-shadow: none; }
.mb-base-card--ai:disabled em { color: var(--muted-2); }
.mb-base-card--locked { color: inherit; text-decoration: none; background: #f6f7f4; border-style: dashed; }
.mb-base-card--locked:hover { transform: none; border-color: var(--brand); box-shadow: none; }
.mb-base-card--locked strong, .mb-base-card--locked small { opacity: .62; }
.mb-base-card--locked .mb-base-card__icon { color: var(--muted-2); background: #eceee9; }
.mb-base-card--locked em { display: inline-flex; align-items: center; gap: 4px; color: #8a5a1f; }

.mb-dialog.mb-ai-dialog { width: min(640px, calc(100vw - 32px)); }
.mb-ai-dialog:focus, .mb-ai-dialog:focus-visible { outline: none; }
.mb-ai-dialog .mb-dialog__head { align-items: flex-start; }
.mb-ai-dialog .mb-dialog__head .page-kicker { display: block; margin-bottom: 4px; }
.mb-ai-dialog .field label.sv-choice { display: flex; margin-bottom: 0; color: var(--ink); font-weight: 500; }
.mb-ai-dialog .field label.sv-choice strong { font-weight: 700; }
.mb-ai-error { padding: 10px 12px; color: var(--danger); background: var(--danger-soft); border-radius: 10px; font-size: 9px; font-weight: 650; line-height: 1.5; }
.mb-ai-error a { margin-left: 4px; color: inherit; font-weight: 800; text-decoration: underline; }
.mb-ai-range__value { color: var(--brand); font-size: 9px; font-weight: 800; }
.mb-ai-range { --mb-ai-range-fill: 36%; width: 100%; height: 6px; margin: 10px 0 2px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--brand) 0 var(--mb-ai-range-fill), #e4e9e3 var(--mb-ai-range-fill) 100%); border-radius: 999px; outline: none; cursor: pointer; }
.mb-ai-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; background: #fff; border: 2px solid var(--brand); border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; }
.mb-ai-range::-moz-range-thumb { width: 20px; height: 20px; background: #fff; border: 2px solid var(--brand); border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; }
.mb-ai-range:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.mb-ai-foot { justify-content: space-between; align-items: center; gap: 12px; }
.mb-ai-foot__note { color: var(--muted-2); font-size: 8px; line-height: 1.4; }
.mb-ai-foot__actions { display: flex; flex-shrink: 0; gap: 8px; }

.mb-dialog.mb-ai-dialog--progress { width: min(440px, calc(100vw - 32px)); overflow: hidden; }
.mb-ai-progress { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 30px 32px; text-align: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand) 10%, #fff) 0%, #fff 62%); }
.mb-ai-progress__orb { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 4px; color: #fff; }
.mb-ai-progress__orb::before { content: ""; position: absolute; inset: 16px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); border-radius: 50%; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent); animation: mb-ai-breathe 2.4s ease-in-out infinite; }
.mb-ai-progress__orb i { position: absolute; inset: 0; border: 1.5px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 50%; animation: mb-ai-ring 2.4s ease-out infinite; }
.mb-ai-progress__orb i:nth-child(2) { animation-delay: .8s; }
.mb-ai-progress__orb i:nth-child(3) { animation-delay: 1.6s; }
.mb-ai-progress__orb .icon { position: relative; z-index: 1; animation: mb-ai-twinkle 2.4s ease-in-out infinite; }
.mb-ai-progress strong { font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 500; }
.mb-ai-progress p { min-height: 30px; margin: 0; color: var(--ink-2); font-size: 10px; line-height: 1.5; transition: opacity .38s ease, transform .38s ease; }
.mb-ai-progress p.is-fading { opacity: 0; transform: translateY(-4px); }
.mb-ai-progress__bar { position: relative; width: min(220px, 100%); height: 4px; overflow: hidden; background: #e4e9e3; border-radius: 999px; }
.mb-ai-progress__bar i { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, var(--brand), transparent); border-radius: 999px; animation: mb-ai-slide 1.6s ease-in-out infinite; }
.mb-ai-progress small { color: var(--muted-2); font-size: 8px; }
@keyframes mb-ai-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes mb-ai-ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes mb-ai-twinkle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } }
@keyframes mb-ai-slide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .mb-ai-progress__orb::before, .mb-ai-progress__orb i, .mb-ai-progress__orb .icon { animation: none; } }

.mb-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mb-theme-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 17px; }
.mb-theme-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px; background: #fbfcfa; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.mb-theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.mb-theme-card.is-selected, .mb-theme-card:has(input:checked) { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.mb-theme-card__preview { position: relative; height: 54px; display: block; margin-bottom: 8px; overflow: hidden; background: var(--mb-bg); border-radius: 8px; }
.mb-theme-card__preview i { position: absolute; left: 10px; right: 10px; top: 9px; height: 26px; background: var(--mb-surface); border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.mb-theme-card__preview b { position: absolute; left: 16px; top: 16px; width: 40%; height: 5px; background: var(--mb-ink); border-radius: 3px; opacity: .8; }
.mb-theme-card__preview u { position: absolute; left: 16px; top: 25px; width: 22px; height: 5px; background: var(--mb-accent); border-radius: 3px; }
.mb-theme-card strong { font-size: 10px; }
.mb-theme-card small { color: var(--muted-2); font-size: 8px; }

.mb-header__actions { align-items: center; }
.mb-save-state { color: var(--muted-2); font-size: 8px; font-weight: 700; white-space: nowrap; }
.mb-save-state.is-dirty { color: var(--warning); }
.mb-menu { position: relative; }
.mb-menu summary { list-style: none; }
.mb-menu summary::-webkit-details-marker { display: none; }
.mb-menu__panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); min-width: 230px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); }
.mb-menu__panel form { display: contents; }
.mb-menu__panel button, .mb-menu__panel a { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 10px; color: var(--ink-2); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 650; text-align: left; }
.mb-menu__panel button:hover, .mb-menu__panel a:hover { background: #f4f6f3; }
.mb-menu__panel .is-danger { color: var(--danger); }
.mb-reveal { margin-bottom: 14px; }

.mb-status { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 15px; padding: 16px 18px; }
.mb-status__mark { width: 44px; height: 44px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 13px; }
.mb-status--success .mb-status__mark { color: var(--success); background: var(--success-soft); }
.mb-status--warning .mb-status__mark { color: #8a5a1f; background: #f7ead6; }
.mb-status__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-status__copy strong { font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.mb-status__copy span { color: var(--muted); font-size: 9px; }
.mb-status__actions { display: flex; align-items: center; gap: 8px; }
.copy-field--compact { max-width: 520px; margin-top: 8px; }
.copy-field--compact input { min-height: 34px; font-size: 9px; }

.mb-builder { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; align-items: start; gap: 14px; }
.mb-steps { position: sticky; top: 16px; display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.mb-steps__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.mb-steps__header h2 { font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.mb-steps__header span { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; color: var(--brand); background: var(--brand-soft); border-radius: 999px; font-size: 8px; font-weight: 800; }
.mb-step-list { flex: 1; min-height: 60px; margin: 0; padding: 0 8px 8px; overflow-y: auto; list-style: none; }
.mb-step-item { position: relative; display: grid; grid-template-columns: 14px 20px 22px minmax(0, 1fr); align-items: center; gap: 7px; padding: 8px 8px 8px 6px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .16s, border-color .16s; }
.mb-step-item:hover { background: #f5f7f4; }
.mb-step-item.is-active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.mb-step-item.is-dragging { opacity: .4; }
.mb-step-item.is-drop-before::before, .mb-step-item.is-drop-after::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--brand); border-radius: 2px; }
.mb-step-item.is-drop-before::before { top: -2px; }
.mb-step-item.is-drop-after::after { bottom: -2px; }
.mb-step-item__grip { color: #c4cac6; cursor: grab; }
.mb-step-item__grip svg { display: block; }
.mb-step-item__index { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); background: #eef1ee; border-radius: 6px; font-size: 8px; font-weight: 800; }
.mb-step-item.is-active .mb-step-item__index { color: #fff; background: var(--brand); }
.mb-step-item.is-statement .mb-step-item__index { background: #f3ead9; color: #8a5a1f; }
.mb-step-item__icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); }
.mb-step-item__icon svg { width: 15px; height: 15px; }
.mb-step-item__copy { min-width: 0; display: flex; flex-direction: column; }
.mb-step-item__copy strong { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mb-step-item__copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mb-steps__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 18px 22px; text-align: center; }
.mb-steps__empty strong { font-family: Georgia, serif; font-size: 14px; font-weight: 500; }
.mb-steps__empty p { color: var(--muted-2); font-size: 9px; }
.mb-steps__footer { padding: 8px 12px 12px; border-top: 1px solid #edf0ec; }

.mb-editor { min-width: 0; }
.mb-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid #edf0ec; }
.mb-tabs button { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-size: 10px; font-weight: 680; }
.mb-tabs button.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.mb-panel { display: flex; flex-direction: column; gap: 18px; padding: 20px 22px 24px; }
.mb-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-panel__type { display: flex; align-items: center; gap: 12px; }
.mb-panel__type-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 12px; }
.mb-panel__head h2 { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.mb-panel__tools { display: flex; gap: 2px; }
.mb-panel__tools .icon-button:disabled { opacity: .3; pointer-events: none; }
.icon-button.is-danger:hover { color: var(--danger); background: var(--danger-soft); }
.text-button.is-danger { color: var(--danger); }
.mb-panel-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; }
.mb-panel-empty strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.mb-panel-empty p { max-width: 360px; color: var(--muted-2); font-size: 10px; }
.mb-select-caret { position: absolute; right: 11px; color: var(--muted-2); pointer-events: none; }
.mb-select-caret svg { display: block; }
.mb-block { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 13px; }
.mb-block h3 { font-size: 11px; font-weight: 700; }
.mb-block .mb-hint { margin-top: -8px; }
.mb-toggle { margin-top: 0 !important; }
.mb-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mb-media-row { display: flex; align-items: center; gap: 14px; }
.mb-media-thumb { width: 120px; height: 80px; flex: 0 0 auto; overflow: hidden; background: #e9ece8; border-radius: 10px; }
.mb-media-thumb img, .mb-media-thumb video { width: 100%; height: 100%; object-fit: cover; }
.mb-media-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mb-media-info strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mb-media-info small { color: var(--muted-2); font-size: 8px; }
.mb-upload-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 84px; padding: 12px; background: #fff; border: 1.5px dashed var(--line-strong); border-radius: 11px; cursor: pointer; text-align: center; transition: border-color .18s, background .18s; }
.mb-upload-zone:hover, .mb-upload-zone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.mb-upload-zone.is-loading { opacity: .6; pointer-events: none; }
.mb-upload-zone__icon { color: var(--brand); }
.mb-upload-zone strong { font-size: 9px; }
.mb-upload-zone small { color: var(--muted-2); font-size: 8px; }
.mb-options { display: flex; flex-direction: column; gap: 10px; }
.mb-options__head { display: flex; align-items: baseline; justify-content: space-between; }
.mb-options__head span { color: var(--muted-2); font-size: 8px; }
.mb-option-list { display: flex; flex-direction: column; gap: 7px; }
.mb-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.mb-option-list--image .mb-option { grid-template-columns: 92px minmax(0, 1fr) auto; }
.mb-option__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mb-option__body .field-control { min-height: 36px; }
.mb-option__body .field-control input { min-height: 34px; }
.mb-option__body .field-control:has(input.is-secondary) { background: transparent; border-style: dashed; }
.mb-option__color { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; overflow: hidden; cursor: pointer; background: transparent; }
.mb-option:has(.mb-option__color) { grid-template-columns: 36px minmax(0, 1fr) auto; }
.mb-option__visual { position: relative; width: 92px; height: 68px; overflow: hidden; background: #f1f3f0; border-radius: 9px; }
.mb-option__visual img { width: 100%; height: 100%; object-fit: cover; }
.mb-option__visual .mb-upload-zone { min-height: 68px; padding: 6px; border-radius: 9px; }
.mb-option__visual .mb-upload-zone strong { font-size: 8px; }
.mb-option__visual .mb-upload-zone small { font-size: 7px; }
.mb-option__visual .mb-upload-zone__icon svg { width: 15px; height: 15px; }
.mb-option__clear { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.5); border: 0; border-radius: 7px; cursor: pointer; }
.mb-option__placeholder { display: grid; place-items: center; height: 100%; color: var(--muted-2); }
.mb-option__tools { display: flex; }
.mb-option__tools .icon-button { width: 30px; height: 30px; }
.mb-option__tools .icon-button:disabled { opacity: .3; pointer-events: none; }

.mb-preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.mb-preview__header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.mb-preview__header h2 { font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.mb-preview__modes { display: flex; gap: 3px; padding: 3px; background: #eceeeb; border-radius: 9px; }
.mb-preview__modes button { width: 30px; height: 26px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.mb-preview__modes button.is-active { color: var(--brand); background: #fff; box-shadow: 0 2px 6px rgba(28,38,33,.08); }
.mb-preview__replay { align-self: center; }
.mb-phone { position: relative; height: 600px; overflow: hidden; background: var(--mbx-bg, #eef2ec); border: 8px solid #1b2320; border-radius: 34px; box-shadow: 0 25px 50px rgba(20,30,25,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
.mb-phone::before { content: ""; position: absolute; z-index: 3; top: 8px; left: 50%; width: 80px; height: 20px; background: #1b2320; border-radius: 0 0 14px 14px; transform: translateX(-50%); }
.mb-phone__screen { height: 100%; overflow-y: auto; scrollbar-width: none; }
.mb-phone__screen::-webkit-scrollbar { display: none; }
.mb-phone .mbx-screen { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 42px 18px 24px; }
.mb-phone .mbx-card { padding: 22px 20px; }
.mb-phone .mbx-card h1 { font-size: 20px; }
.mb-phone .mbx-cover { height: 150px; margin: -10px -4px 12px; }

.mb-dialog { width: min(760px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; box-shadow: var(--shadow-md); }
.mb-dialog::backdrop { background: rgba(9,20,15,.45); backdrop-filter: blur(3px); }
.mb-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 8px; }
.mb-dialog__head h2 { font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.mb-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 12px 24px 24px; }
.mb-type-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 118px; padding: 13px; background: #fbfcfa; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: left; transition: transform .18s, border-color .18s, box-shadow .18s; }
.mb-type-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 10px 24px rgba(28,38,33,.08); }
.mb-type-card__icon { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 4px; color: var(--brand); background: var(--brand-soft); border-radius: 9px; }
.mb-type-card strong { font-size: 10px; }
.mb-type-card small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.mb-type-card em { margin-top: auto; padding-top: 6px; color: var(--muted-2); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }

/* Experiência do cliente (compartilhada entre prévia e página pública) */
.mbx-body { min-height: 100vh; display: flex; flex-direction: column; color: var(--mbx-ink); background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--mbx-accent) 12%, transparent), transparent 40%), var(--mbx-bg); font-family: var(--mbx-font); }
.mbx-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.mbx-footer { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 18px; color: var(--mbx-ink); font-size: 10px; opacity: .65; }
.mbx-footer__mark { width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--mbx-ink) 10%, transparent); border-radius: 8px; font-size: 8px; font-weight: 800; }
.mbx-footer__mark img { width: 100%; height: 100%; object-fit: cover; }
.mbx-screen { color: var(--mbx-ink); }
.mbx-card { width: 100%; max-width: 560px; margin: 0 auto; padding: 36px 34px; background: var(--mbx-surface); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.08); }
.mbx-card--center { text-align: center; }
.mbx-card h1 { margin: 6px 0 10px; font-family: var(--mbx-font); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.5px; }
.mbx-card p { color: color-mix(in srgb, var(--mbx-ink) 72%, transparent); font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; font-size: 12px; line-height: 1.6; }
.mbx-card p + p { margin-top: 8px; }
.mbx-kicker { display: block; color: var(--mbx-accent); font-family: Inter, ui-sans-serif, sans-serif; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.mbx-help { margin-bottom: 4px; }
.mbx-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 18px; padding: 0 20px; color: #fff; background: var(--mbx-accent); border-radius: 999px; font-family: Inter, ui-sans-serif, sans-serif; font-size: 11px; font-weight: 700; }
.mbx-link { align-self: center; color: color-mix(in srgb, var(--mbx-ink) 60%, transparent); font-family: Inter, ui-sans-serif, sans-serif; font-size: 10px; font-weight: 600; }
.mbx-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.mbx-nav .mbx-button { margin-top: 12px; }
.mbx-progress { width: 100%; height: 3px; margin: 0 auto 14px; max-width: 560px; background: color-mix(in srgb, var(--mbx-ink) 12%, transparent); border-radius: 3px; overflow: hidden; }
.mbx-progress i { display: block; height: 100%; background: var(--mbx-accent); border-radius: inherit; transition: width .6s var(--ease); }
.mbx-cover { height: 220px; margin: -36px -34px 22px; overflow: hidden; border-radius: 22px 22px 0 0; }
.mbx-cover img { width: 100%; height: 100%; object-fit: cover; }
.mbx-media { margin: -12px 0 16px; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--mbx-ink) 6%, transparent); }
.mbx-media img, .mbx-media video { width: 100%; max-height: 220px; display: block; object-fit: cover; }
.mbx-media--video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; color: var(--mbx-accent); }
.mbx-media--video small { color: color-mix(in srgb, var(--mbx-ink) 60%, transparent); font-family: Inter, sans-serif; font-size: 8px; }
.mbx-answer { margin-top: 14px; font-family: Inter, ui-sans-serif, sans-serif; }
.mbx-answer > p { font-size: 12.5px; }
.mbx-input { min-height: 42px; display: flex; align-items: center; padding: 0 14px; color: color-mix(in srgb, var(--mbx-ink) 45%, transparent); background: color-mix(in srgb, var(--mbx-ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--mbx-ink) 14%, transparent); border-radius: 11px; font-size: 11px; }
.mbx-input--area { min-height: 96px; align-items: flex-start; padding-top: 11px; }
.mbx-choices { display: flex; flex-direction: column; gap: 7px; }
.mbx-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--mbx-ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--mbx-ink) 12%, transparent); border-radius: 11px; }
.mbx-choice.is-selected { border-color: var(--mbx-accent); background: color-mix(in srgb, var(--mbx-accent) 10%, transparent); }
.mbx-choice i { width: 16px; height: 16px; flex: 0 0 auto; border: 1.5px solid color-mix(in srgb, var(--mbx-ink) 35%, transparent); border-radius: 50%; }
.mbx-choice i.is-check { border-radius: 5px; }
.mbx-choice.is-selected i { background: var(--mbx-accent); border-color: var(--mbx-accent); box-shadow: inset 0 0 0 3px var(--mbx-surface); }
.mbx-choice span { display: flex; flex-direction: column; }
.mbx-choice strong { font-size: 11px; font-weight: 600; }
.mbx-choice small { color: color-mix(in srgb, var(--mbx-ink) 60%, transparent); font-size: 9px; }
.mbx-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mbx-image-card { overflow: hidden; background: color-mix(in srgb, var(--mbx-ink) 5%, transparent); border: 2px solid transparent; border-radius: 13px; }
.mbx-image-card.is-selected { border-color: var(--mbx-accent); }
.mbx-image-card img { width: 100%; height: 96px; object-fit: cover; }
.mbx-image-card__empty { height: 96px; display: grid; place-items: center; color: color-mix(in srgb, var(--mbx-ink) 30%, transparent); }
.mbx-image-card strong { display: block; padding: 7px 9px; font-size: 9.5px; font-weight: 600; }
.mbx-note { display: block; margin-top: 8px; color: color-mix(in srgb, var(--mbx-ink) 55%, transparent); font-size: 8px; }
.mbx-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.mbx-color { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; }
.mbx-color i { width: 44px; height: 44px; display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mbx-color.is-selected i { box-shadow: 0 0 0 2px var(--mbx-surface), 0 0 0 4px var(--mbx-accent); }
.mbx-color small { max-width: 100%; overflow: hidden; font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mbx-scale { display: flex; gap: 5px; }
.mbx-scale span { flex: 1; min-height: 36px; display: grid; place-items: center; background: color-mix(in srgb, var(--mbx-ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--mbx-ink) 12%, transparent); border-radius: 9px; font-size: 11px; font-weight: 600; }
.mbx-scale span.is-selected { color: #fff; background: var(--mbx-accent); border-color: var(--mbx-accent); }
.mbx-scale-labels { display: flex; justify-content: space-between; margin-top: 6px; color: color-mix(in srgb, var(--mbx-ink) 60%, transparent); font-size: 8px; }
.mbx-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mbx-yesno span { min-height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--mbx-ink) 14%, transparent); border-radius: 11px; font-size: 11px; font-weight: 600; }
.mbx-yesno span.is-selected { color: #fff; background: var(--mbx-accent); border-color: var(--mbx-accent); }
.mbx-upload { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px; color: var(--mbx-accent); border: 1.5px dashed color-mix(in srgb, var(--mbx-ink) 22%, transparent); border-radius: 13px; text-align: center; }
.mbx-upload strong { color: var(--mbx-ink); font-size: 10px; }
.mbx-upload small { color: color-mix(in srgb, var(--mbx-ink) 55%, transparent); font-size: 8px; }
.mbx-check { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 10px; color: #fff; background: var(--mbx-accent); border-radius: 50%; }
.mbx-check svg { width: 26px; height: 26px; }
.mbx-soon { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 14px; color: var(--mbx-accent); background: color-mix(in srgb, var(--mbx-accent) 10%, transparent); border-radius: 11px; font-family: Inter, sans-serif; font-size: 10px; font-weight: 600; }
.mbx-soon span { display: inline-flex; align-items: center; gap: 8px; }
.mb-phone.is-dark .mbx-card, .mbx-body .mbx-card { box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.mbx-anim-fade { animation: mbxFade .6s var(--ease) both; }
.mbx-anim-slide-up { animation: mbxSlideUp .6s var(--ease) both; }
.mbx-anim-slide-left { animation: mbxSlideLeft .55s var(--ease) both; }
.mbx-anim-zoom { animation: mbxZoom .55s var(--ease) both; }
.mbx-anim-none { animation: none; }
@keyframes mbxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbxSlideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mbxSlideLeft { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes mbxZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mbx-anim-fade, .mbx-anim-slide-up, .mbx-anim-slide-left, .mbx-anim-zoom { animation: none; } }

@media (max-width: 1280px) {
    .mb-builder { grid-template-columns: 230px minmax(0, 1fr); }
    .mb-preview { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .mb-preview__header { width: 100%; }
    .mb-phone { width: 340px; height: 560px; }
}
@media (max-width: 1180px) {
    .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mb-base-grid, .mb-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .mb-builder { grid-template-columns: 1fr; }
    .mb-steps { position: static; max-height: none; }
    .mb-step-list { max-height: 320px; }
    .mb-status { grid-template-columns: 44px minmax(0, 1fr); }
    .mb-status__actions { grid-column: 1 / -1; flex-wrap: wrap; }
    .mb-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mb-phone { width: 100%; max-width: 360px; margin: 0 auto; }
    .mb-toggle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .mb-grid, .mb-base-grid, .mb-theme-grid, .mb-type-grid, .mb-theme-grid--compact { grid-template-columns: 1fr; }
    .mb-ai-foot { flex-direction: column; align-items: stretch; }
    .mb-ai-foot__actions { justify-content: flex-end; }
    .mb-ai-dialog .sv-choice-grid { grid-template-columns: 1fr; }
    .mb-header__actions .mb-save-state, .mb-header__actions .status-badge { display: none; } /* a faixa mb-status logo abaixo já mostra a situação */
    .mb-panel { padding: 16px 14px 20px; }
    .mb-option-list--image .mb-option { grid-template-columns: 72px minmax(0, 1fr) auto; }
    .mbx-card { padding: 26px 20px; }
    .mbx-card h1 { font-size: 23px; }
    .mbx-cover { margin: -26px -20px 18px; height: 170px; }
}

/* Moodboard: experiência do cliente (página pública) */
.mbx-app { width: 100%; max-width: 640px; margin: 0 auto; }
.mbx-progress--top { position: fixed; z-index: 5; inset: 0 0 auto 0; max-width: none; height: 4px; margin: 0; border-radius: 0; background: color-mix(in srgb, var(--mbx-ink) 10%, transparent); }
.mbx-body .mbx-main { padding: 28px 16px 24px; }
.mbx-body .mbx-card { max-width: 640px; padding: 40px 38px; }
.mbx-body .mbx-card h1 { font-size: 32px; }
.mbx-body .mbx-card p, .mbx-body .mbx-answer { font-size: 13.5px; }
.mbx-body .mbx-cover { margin: -40px -38px 26px; height: 260px; }
.mbx-body .mbx-media img, .mbx-body .mbx-media video { max-height: 320px; }
.mbx-media--embed { position: relative; aspect-ratio: 16 / 9; }
.mbx-media--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mbx-welcome-meta { display: flex; gap: 14px; margin-top: 18px; color: color-mix(in srgb, var(--mbx-ink) 55%, transparent); font-family: Inter, ui-sans-serif, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .2px; }
button.mbx-button { border: 0; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s, opacity .18s; box-shadow: 0 10px 24px color-mix(in srgb, var(--mbx-accent) 28%, transparent); }
button.mbx-button:hover { transform: translateY(-1px); }
button.mbx-button:active { transform: scale(.98); }
button.mbx-button.is-busy { opacity: .6; pointer-events: none; }
button.mbx-link { background: none; border: 0; cursor: pointer; padding: 8px 0; }
button.mbx-link:hover { color: var(--mbx-ink); }
.mbx-body .mbx-nav { margin-top: 26px; }
.mbx-field { width: 100%; min-height: 50px; padding: 0 16px; color: var(--mbx-ink); background: color-mix(in srgb, var(--mbx-ink) 4%, transparent); border: 1.5px solid color-mix(in srgb, var(--mbx-ink) 14%, transparent); border-radius: 13px; font-family: Inter, ui-sans-serif, sans-serif; font-size: 16px; outline: 0; transition: border-color .18s, box-shadow .18s; }
.mbx-field:focus-visible { outline: 0; outline-offset: 0; }
.mbx-body button:focus-visible { outline-color: color-mix(in srgb, var(--mbx-accent) 35%, transparent); }
.mbx-field::placeholder { color: color-mix(in srgb, var(--mbx-ink) 40%, transparent); }
.mbx-field:focus { border-color: var(--mbx-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mbx-accent) 14%, transparent); background: var(--mbx-surface); }
.mbx-field--area { min-height: 150px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.mbx-body .mbx-choice { width: 100%; padding: 13px 15px; color: inherit; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .16s, background .16s, transform .16s; }
.mbx-body .mbx-choice:hover { border-color: var(--mbx-accent); }
.mbx-body .mbx-choice:active { transform: scale(.99); }
.mbx-body .mbx-choice strong { font-size: 13px; }
.mbx-body .mbx-choice small { font-size: 11px; }
.mbx-body .mbx-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.mbx-body .mbx-image-card { position: relative; padding: 0; color: inherit; cursor: pointer; text-align: left; font-family: inherit; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.mbx-body .mbx-image-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.mbx-body .mbx-image-card img { height: 150px; }
.mbx-body .mbx-image-card strong { font-size: 12px; padding: 9px 11px 3px; }
.mbx-body .mbx-image-card small { display: block; padding: 0 11px 10px; color: color-mix(in srgb, var(--mbx-ink) 60%, transparent); font-size: 10px; }
.mbx-image-card__empty { height: 150px; display: grid; place-items: center; color: color-mix(in srgb, var(--mbx-ink) 40%, transparent); font-family: var(--mbx-font); font-size: 40px; }
.mbx-image-card__mark { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--mbx-accent); border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s var(--ease); }
.mbx-image-card__mark svg { width: 15px; height: 15px; }
.mbx-image-card.is-selected .mbx-image-card__mark { opacity: 1; transform: none; }
.mbx-body .mbx-colors { gap: 14px; }
.mbx-body .mbx-color { width: 68px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; font-family: inherit; }
.mbx-body .mbx-color i { width: 54px; height: 54px; transition: transform .18s var(--ease); }
.mbx-body .mbx-color:hover i { transform: scale(1.06); }
.mbx-body .mbx-color small { font-size: 10px; }
.mbx-body .mbx-scale button { flex: 1; min-height: 46px; color: inherit; cursor: pointer; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--mbx-ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--mbx-ink) 12%, transparent); border-radius: 11px; transition: background .16s, color .16s, transform .16s; }
.mbx-body .mbx-scale button:hover { border-color: var(--mbx-accent); }
.mbx-body .mbx-scale button.is-selected { color: #fff; background: var(--mbx-accent); border-color: var(--mbx-accent); transform: translateY(-2px); }
.mbx-body .mbx-scale-labels { font-size: 10px; }
.mbx-body .mbx-yesno button { min-height: 56px; color: inherit; cursor: pointer; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--mbx-ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--mbx-ink) 14%, transparent); border-radius: 13px; transition: background .16s, color .16s; }
.mbx-body .mbx-yesno button:hover { border-color: var(--mbx-accent); }
.mbx-body .mbx-yesno button.is-selected { color: #fff; background: var(--mbx-accent); border-color: var(--mbx-accent); }
button.mbx-upload { width: 100%; color: var(--mbx-accent); background: none; cursor: pointer; font-family: inherit; transition: background .16s, border-color .16s; }
button.mbx-upload:hover { background: color-mix(in srgb, var(--mbx-accent) 7%, transparent); border-color: var(--mbx-accent); }
.mbx-body .mbx-upload strong { font-size: 12px; }
.mbx-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.mbx-gallery__item { position: relative; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--mbx-ink) 6%, transparent); border-radius: 11px; }
.mbx-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.mbx-gallery__remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55); border: 0; border-radius: 50%; cursor: pointer; }
.mbx-error { margin-top: 12px; padding: 10px 13px; color: #8d3a32; background: rgba(184,83,73,.1); border-radius: 10px; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; }
.mbx-body .mbx-note { font-size: 10px; }
.mbx-statement p { color: color-mix(in srgb, var(--mbx-ink) 78%, transparent); font-size: 14px; line-height: 1.7; }
.mbx-statement p + p { margin-top: 12px; }
.mbx-closing-office { margin-top: 20px; font-size: 10px !important; letter-spacing: 1px; text-transform: uppercase; opacity: .6; }
.mbx-shake { animation: mbxShake .4s ease; }
@keyframes mbxShake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 680px) {
    .mbx-body .mbx-main { padding: 18px 12px 20px; }
    .mbx-body .mbx-card { padding: 28px 22px; }
    .mbx-body .mbx-card h1 { font-size: 25px; }
    .mbx-body .mbx-cover { margin: -28px -22px 20px; height: 190px; }
    .mbx-body .mbx-image-card img, .mbx-image-card__empty { height: 120px; }
    .mbx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Moodboard: respostas do cliente (escritório) */
.mb-status__link { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mb-answers-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 16px; }
.mb-answers { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mb-response-picker { display: flex; gap: 6px; padding: 7px; overflow-x: auto; }
.mb-response-picker a { display: flex; flex-direction: column; min-width: 170px; padding: 9px 12px; border-radius: 10px; }
.mb-response-picker a strong { font-size: 10px; }
.mb-response-picker a small { color: var(--muted-2); font-size: 8px; }
.mb-response-picker a.is-active { background: var(--brand-soft); }
.mb-answer { padding: 18px 20px; }
.mb-answer--statement { background: #f9faf8; }
.mb-answer.is-empty { border-style: dashed; }
.mb-answer__head { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 14px; }
.mb-answer__index { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 9px; font-size: 10px; font-weight: 800; }
.mb-answer--statement .mb-answer__index { color: #8a5a1f; background: #f3ead9; }
.mb-answer__type { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-2); font-size: 8px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; }
.mb-answer__head h2 { margin-top: 3px; font-family: Georgia, serif; font-size: 18px; font-weight: 500; line-height: 1.2; }
.mb-answer__head p { margin-top: 3px; color: var(--muted); font-size: 9px; }
.mb-answer__head time { color: var(--muted-2); font-size: 8px; white-space: nowrap; }
.mb-answer__body { padding-left: 42px; font-size: 11px; line-height: 1.55; }
.mb-answer__body--muted { color: var(--muted-2); font-style: italic; }
.mb-answer__quote { margin: 0 0 0 42px; padding: 12px 16px; color: var(--ink); background: var(--brand-soft); border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; font-family: Georgia, serif; font-size: 13px; line-height: 1.6; }
.mb-answer__choices { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 0 42px; list-style: none; }
.mb-answer__choices li { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 8px 12px; background: #f6f8f5; border-radius: 9px; font-size: 11px; }
.mb-answer__choices li .icon { color: var(--success); }
.mb-answer__choices li small { color: var(--muted-2); font-size: 9px; }
.mb-answer__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding-left: 42px; }
.mb-answer__images figure { margin: 0; overflow: hidden; background: #f1f3f0; border: 1px solid var(--line); border-radius: 11px; }
.mb-answer__images img { width: 100%; height: 110px; object-fit: cover; }
.mb-answer__images figure > span { height: 110px; display: grid; place-items: center; color: var(--muted-2); }
.mb-answer__images figcaption { padding: 7px 10px; font-size: 10px; font-weight: 650; }
.mb-answer__colors { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 42px; }
.mb-answer__colors span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px; text-align: center; }
.mb-answer__colors i { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mb-answer__colors strong { font-size: 9px; }
.mb-answer__colors small { color: var(--muted-2); font-size: 8px; }
.mb-answer__scale { padding-left: 42px; }
.mb-answer__scale-track { display: flex; gap: 5px; }
.mb-answer__scale-track span { flex: 1; min-height: 34px; display: grid; place-items: center; background: #f3f5f2; border-radius: 8px; font-size: 10px; font-weight: 650; color: var(--muted-2); }
.mb-answer__scale-track span.is-selected { color: #fff; background: var(--brand); }
.mb-answer__scale-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted-2); font-size: 8px; }
.mb-answer__yesno { margin-left: 42px; min-height: 30px; font-size: 10px; }
.mb-answer__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; padding-left: 42px; }
.mb-answer__gallery a { display: block; aspect-ratio: 1; overflow: hidden; background: #f1f3f0; border-radius: 11px; }
.mb-answer__gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease); }
.mb-answer__gallery a:hover img { transform: scale(1.04); }
.mb-answers-aside { position: sticky; top: 16px; }
.mb-answer-summary { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.mb-answer-summary__mark { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 6px; color: var(--brand); background: var(--brand-soft); border-radius: 13px; }
.mb-answer-summary > strong { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.mb-answer-summary > span { color: var(--muted); font-size: 9px; }
.mb-answer-summary .progress-track { margin: 8px 0 12px; }
.mb-answer-summary dl { margin: 0; border-top: 1px solid var(--line); }
.mb-answer-summary dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #edf0ec; }
.mb-answer-summary dt { color: var(--muted-2); font-size: 8px; }
.mb-answer-summary dd { margin: 0; font-size: 9px; font-weight: 650; text-align: right; }
@media (max-width: 900px) { .mb-answers-layout { grid-template-columns: 1fr; } .mb-answers-aside { position: static; } }
@media (max-width: 680px) { .mb-answer__body, .mb-answer__quote, .mb-answer__choices, .mb-answer__images, .mb-answer__colors, .mb-answer__scale, .mb-answer__gallery { padding-left: 0; margin-left: 0; } .mb-answer__head { grid-template-columns: 30px minmax(0, 1fr); } .mb-answer__head time { grid-column: 2; } }
@media print {
    .sidebar, .mobile-header, .mobile-dock, .page-actions, .sidebar-overlay, .toast { display: none !important; }
    .main-shell { margin-left: 0 !important; }
    .mb-answers-layout { grid-template-columns: 1fr; }
    .mb-answer { break-inside: avoid; box-shadow: none; }
}

/* Levantamentos: esboço à mão → IA → planta vetorial → DXF */
.sv-notice { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 15px; padding: 13px 16px; border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.sv-notice__icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 12px; }
.sv-notice--warning { border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); }
.sv-notice--warning .sv-notice__icon { color: var(--warning); background: var(--warning-soft); }
.sv-notice > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-notice strong { font-size: 11px; }
.sv-notice span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.sv-notice code { padding: 1px 5px; background: #f0f2ef; border-radius: 5px; font-size: 8px; }

.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.sv-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 17px; transition: transform .24s var(--ease), box-shadow .24s ease; }
.sv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,38,33,.1); }
.sv-card__visual { position: relative; height: 150px; overflow: hidden; background: repeating-linear-gradient(0deg, #f1f3ee 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, #f1f3ee 0 1px, #f8f9f6 1px 22px); }
.sv-card__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.sv-card__placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted-2); }
.sv-card__placeholder small { font-size: 8px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.sv-card__body { flex: 1; display: flex; flex-direction: column; padding: 15px 17px 14px; }
.sv-card__body h2 { overflow: hidden; font-family: Georgia, serif; font-size: 18px; font-weight: 500; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.sv-card__body > p { display: flex; align-items: center; gap: 5px; margin-top: 4px; overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sv-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; color: var(--muted); font-size: 8px; }
.sv-card__meta strong { color: var(--ink); font-size: 10px; }
.sv-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; color: var(--muted-2); font-size: 8px; }
.sv-card:hover .round-arrow { color: #fff; background: var(--brand); transform: rotate(-25deg); }

.sv-header__actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sv-credits { margin-left: 2px; padding: 2px 6px; background: rgba(255,255,255,.18); border-radius: 6px; font-size: 8px; font-style: normal; font-weight: 800; }
.button--ghost .sv-credits { color: var(--muted); background: #eef1ed; }
.sv-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 15px; padding: 6px; }
.sv-stepper__step { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; background: transparent; border: 1px solid transparent; border-radius: 11px; cursor: pointer; text-align: left; transition: background .18s, border-color .18s; }
.sv-stepper__step:hover { background: #f5f7f4; }
.sv-stepper__step.is-current { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.sv-stepper__index { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); background: #eef1ee; border-radius: 9px; font-size: 10px; font-weight: 800; }
.sv-stepper__step.is-current .sv-stepper__index { color: #fff; background: var(--brand); }
.sv-stepper__step.is-done .sv-stepper__index { color: var(--success); background: var(--success-soft); }
.sv-stepper__step.is-locked { opacity: .5; cursor: not-allowed; }
.sv-stepper__copy { min-width: 0; display: flex; flex-direction: column; }
.sv-stepper__copy strong { font-size: 10px; }
.sv-stepper__copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.sv-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 15px; }
.sv-panel-grid--wide { grid-template-columns: minmax(0, 1fr) 330px; }
.sv-block { padding: 22px; }
.sv-block h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; }
.sv-block h3 + .sv-usage, .sv-block h3 + .sv-history { margin-bottom: 18px; }
.sv-block-head { margin-bottom: 18px; }
.sv-block-head h2 { font-family: Georgia, serif; font-size: 21px; font-weight: 500; letter-spacing: -.3px; }
.sv-block-head p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.sv-block-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf0ec; }
.sv-tips ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.sv-tips li + li { margin-top: 6px; }
.sv-tips strong { color: var(--ink-2); }

.sv-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 260px; padding: 24px; background: #fbfcfa; border: 1.5px dashed var(--line-strong); border-radius: 16px; cursor: pointer; text-align: center; transition: border-color .18s, background .18s; }
.sv-dropzone:hover, .sv-dropzone.is-over, .sv-dropzone:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.sv-dropzone.is-loading { pointer-events: none; }
.sv-dropzone.is-loading > *:not(.sv-dropzone__progress) { opacity: .35; }
.sv-dropzone__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 4px; color: var(--brand); background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-sm); }
.sv-dropzone strong { font-size: 12px; }
.sv-dropzone small { color: var(--muted-2); font-size: 9px; }
.sv-dropzone__progress { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.sv-dropzone__progress i { display: block; height: 5px; background: var(--brand); border-radius: 999px; transition: width .2s; }
.sv-dropzone__progress span { color: var(--brand-dark); font-size: 9px; font-weight: 700; }
.sv-sketch { display: flex; flex-direction: column; gap: 12px; }
.sv-sketch__figure { margin: 0; overflow: hidden; background: #f1f3ee; border: 1px solid var(--line); border-radius: 14px; }
.sv-sketch__figure img { width: 100%; max-height: 520px; object-fit: contain; }
.sv-sketch__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 9px; }
.sv-sketch__meta strong { color: var(--ink); font-weight: 650; }
.sv-quality { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-quality li { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; color: #8a5a1f; background: var(--warning-soft); border-radius: 10px; font-size: 9px; line-height: 1.45; }
.sv-quality li.is-ok { color: #286746; background: var(--success-soft); }
.sv-sketch__actions { display: flex; justify-content: space-between; gap: 8px; }

.sv-stage { position: relative; overflow: hidden; background: #f1f3ee; border: 1px solid var(--line); border-radius: 14px; user-select: none; }
.sv-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.sv-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-stage.is-marking { cursor: crosshair; }
.sv-stage.is-marking svg { cursor: crosshair; }
.sv-stage__hint { position: absolute; left: 50%; bottom: 12px; padding: 6px 12px; color: #fff; background: rgba(24,35,31,.85); border-radius: 999px; font-size: 9px; font-weight: 700; transform: translateX(-50%); pointer-events: none; }
.sv-ref-line { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.sv-ref-line.is-draft { stroke-dasharray: 8 6; }
.sv-ref-point { fill: #fff; stroke: var(--brand); stroke-width: 3; }
.sv-ref-label { font-size: 13px; font-weight: 700; fill: #fff; }
.sv-ref-label-bg { fill: rgba(24,35,31,.85); rx: 6; }
.sv-measure-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid #edf0ec; }
.sv-measure-form__row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }
.sv-mark { display: flex; align-items: center; gap: 10px; }
.sv-mark__state { color: var(--muted-2); font-size: 8px; line-height: 1.4; }
.sv-mark__state.is-set { color: var(--success); font-weight: 700; }
.sv-measure-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sv-measure-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 11px; }
.sv-measure-list li.is-hover { border-color: var(--brand); }
.sv-measure-list__swatch { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 7px; font-size: 8px; font-weight: 800; }
.sv-measure-list__copy { min-width: 0; display: flex; flex-direction: column; }
.sv-measure-list__copy strong { font-size: 10px; }
.sv-measure-list__copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sv-measure-list__empty { padding: 20px 10px; color: var(--muted-2); font-size: 9px; text-align: center; }

.sv-ai__hero { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.sv-ai__mark { width: 52px; height: 52px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 15px; }
.sv-ai__hero h2 { font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.sv-ai__hero p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.sv-ai__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 18px; }
.sv-fact { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 12px; }
.sv-fact strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.sv-fact span { color: var(--muted-2); font-size: 8px; }
.sv-fact--simulated { grid-column: 1 / -1; color: #8a5a1f; background: #fbf3e4; border-color: #f1e2c4; }
.sv-fact--simulated strong { font-family: inherit; font-size: 10px; }
.sv-ai__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-ai__blocked { margin-top: 12px; padding: 10px 12px; color: #a2463d; background: var(--danger-soft); border-radius: 10px; font-size: 9px; line-height: 1.5; }
.sv-ai__last { margin-top: 18px; }
.sv-result { padding: 16px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 14px; }
.sv-result__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sv-result__head strong { font-size: 11px; }
.sv-result__head span { color: var(--muted-2); font-size: 8px; }
.sv-result__stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; color: var(--muted); font-size: 9px; }
.sv-result__stats strong { color: var(--ink); font-size: 11px; }
.sv-result__reasons { margin: 0 0 10px; padding-left: 16px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.sv-history { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-history li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 9px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 10px; }
.sv-history__icon { width: 26px; height: 26px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.sv-history li.is-failed .sv-history__icon { color: var(--danger); background: var(--danger-soft); }
.sv-history__copy { min-width: 0; display: flex; flex-direction: column; }
.sv-history__copy strong { font-size: 9px; }
.sv-history__copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sv-history__empty, .sv-usage__empty { color: var(--muted-2); font-size: 9px; }
.sv-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sv-usage div { display: flex; flex-direction: column; padding: 9px 10px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 10px; }
.sv-usage strong { font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.sv-usage span { color: var(--muted-2); font-size: 8px; }

.sv-warning-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-warning-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px 10px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 10px; color: var(--ink-2); font-size: 9px; line-height: 1.45; }
.sv-warning-list li.is-clickable { cursor: pointer; }
.sv-warning-list li.is-clickable:hover { border-color: var(--brand); }
.sv-warning-list li.is-error { color: #a2463d; background: var(--danger-soft); border-color: #f1d6d2; }
.sv-warning-list li.is-warning { color: #8a5a1f; background: var(--warning-soft); border-color: #f1e2c4; }
.sv-warning-list li .icon { margin-top: 1px; }
.sv-warning-list__empty { padding: 26px 10px; color: var(--muted-2); font-size: 9px; text-align: center; }

.sv-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; gap: 14px; }
.sv-editor__main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #edf0ec; }
.sv-toolgroup { display: flex; align-items: center; gap: 2px; padding: 3px; background: #f3f4f1; border-radius: 10px; }
.sv-toolgroup--view { margin-left: auto; gap: 10px; padding-right: 8px; }
.sv-toolgroup__sep { width: 1px; height: 20px; margin: 0 4px; background: #d9ded9; }
.sv-tool { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 700; }
.sv-tool span { display: none; }
.sv-tool:hover { color: var(--ink); background: #fff; }
.sv-tool.is-active { color: var(--brand); background: #fff; box-shadow: 0 2px 6px rgba(28,38,33,.08); }
.sv-tool:disabled { opacity: .35; pointer-events: none; }
.sv-tool--danger:hover { color: var(--danger); }
.sv-view-toggle { display: flex; gap: 2px; }
.sv-view-toggle button { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 700; white-space: nowrap; }
.sv-view-toggle button.is-active { color: var(--brand); background: #fff; box-shadow: 0 2px 6px rgba(28,38,33,.08); }
.sv-view-toggle button:disabled { opacity: .4; pointer-events: none; }
.sv-opacity { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 700; }
.sv-opacity input { width: 90px; accent-color: var(--brand); }
.sv-canvas-wrap { position: relative; flex: 1; min-height: 520px; height: calc(100vh - 330px); overflow: hidden; background: #fbfcfa; }
.sv-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: default; }
.sv-canvas.is-tool-pan, .sv-canvas.is-panning { cursor: grab; }
.sv-canvas.is-panning { cursor: grabbing; }
.sv-canvas.is-tool-wall, .sv-canvas.is-tool-room, .sv-canvas.is-tool-door, .sv-canvas.is-tool-window { cursor: crosshair; }
.sv-canvas text { pointer-events: none; user-select: none; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.sv-grid-minor { stroke: #eef0eb; stroke-width: 1; }
.sv-grid-major { stroke: #dfe3dd; stroke-width: 1; }
.sv-wall { stroke: #33433b; stroke-linecap: butt; fill: none; cursor: pointer; transition: stroke .15s; }
.sv-wall.is-band-review { stroke: #b8752d; }
.sv-wall.is-band-low { stroke: #b85349; }
.sv-wall.is-band-confirmed { stroke: #2f6a50; }
.sv-wall.is-selected { stroke: var(--brand); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 60%, transparent)); }
.sv-wall.is-hover { stroke: #4d6a5c; }
.sv-wall-outline { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1; pointer-events: none; }
.sv-opening-gap { stroke: #fbfcfa; stroke-linecap: butt; pointer-events: none; }
.sv-opening-hit { stroke: transparent; stroke-width: 18; fill: none; cursor: pointer; }
.sv-door-leaf { stroke: #2b5a83; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.sv-door-arc { fill: none; stroke: #2b5a83; stroke-width: 1.2; stroke-dasharray: 3 3; pointer-events: none; }
.sv-window-line { stroke: #1f7a8c; stroke-width: 1.6; pointer-events: none; }
.sv-opening.is-band-low .sv-door-leaf, .sv-opening.is-band-low .sv-door-arc, .sv-opening.is-band-low .sv-window-line { stroke: #b85349; }
.sv-opening.is-band-review .sv-door-leaf, .sv-opening.is-band-review .sv-door-arc, .sv-opening.is-band-review .sv-window-line { stroke: #b8752d; }
.sv-opening.is-selected .sv-door-leaf, .sv-opening.is-selected .sv-door-arc, .sv-opening.is-selected .sv-window-line { stroke: var(--brand); stroke-width: 2.6; }
.sv-room { fill: rgba(35,92,69,.07); stroke: rgba(35,92,69,.35); stroke-width: 1; stroke-dasharray: 5 4; cursor: pointer; }
.sv-room.is-band-low { fill: rgba(184,83,73,.08); stroke: rgba(184,83,73,.5); }
.sv-room.is-band-review { fill: rgba(184,117,45,.08); stroke: rgba(184,117,45,.5); }
.sv-room.is-selected { fill: rgba(35,92,69,.16); stroke: var(--brand); stroke-dasharray: none; stroke-width: 1.5; }
.sv-room-label { font-size: 12px; font-weight: 700; fill: #244739; text-anchor: middle; }
.sv-room-area { font-size: 10px; fill: #6b7a72; text-anchor: middle; }
.sv-dim { font-size: 10px; fill: #5f6d66; text-anchor: middle; }
.sv-dim-bg { fill: rgba(251,252,250,.85); }
.sv-handle { fill: #fff; stroke: var(--brand); stroke-width: 2; cursor: move; }
.sv-handle:hover, .sv-handle.is-active { fill: var(--brand); }
.sv-draft { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 6 5; fill: none; pointer-events: none; }
.sv-draft-point { fill: var(--brand); pointer-events: none; }
.sv-snap { fill: none; stroke: var(--brand); stroke-width: 1.5; pointer-events: none; }
.sv-hover-wall { stroke: color-mix(in srgb, var(--brand) 55%, transparent); stroke-linecap: butt; pointer-events: none; }
.sv-sketch-image { image-rendering: auto; }
.sv-detect { stroke-width: 4; stroke-linecap: round; cursor: pointer; }
.sv-detect.is-band-high { stroke: #2f7a58; }
.sv-detect.is-band-confirmed { stroke: #2f7a58; }
.sv-detect.is-band-review { stroke: #b8752d; }
.sv-detect.is-band-low { stroke: #b85349; }
.sv-detect.is-selected { stroke: var(--brand); stroke-width: 6; }
.sv-detect-point { stroke: #fff; stroke-width: 2; cursor: pointer; }
.sv-detect-point.is-door { fill: #2b5a83; }
.sv-detect-point.is-window { fill: #1f7a8c; }
.sv-detect-ref { stroke: #7c3aed; stroke-width: 3; stroke-dasharray: 8 6; }
.sv-canvas-hint { position: absolute; left: 50%; bottom: 14px; padding: 6px 12px; color: #fff; background: rgba(24,35,31,.85); border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.sv-canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; pointer-events: none; }
.sv-canvas-empty strong { font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.sv-canvas-empty p { max-width: 320px; color: var(--muted-2); font-size: 10px; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 9px 14px; border-top: 1px solid #edf0ec; color: var(--muted); font-size: 8px; }
.sv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sv-legend i { width: 14px; height: 4px; border-radius: 2px; background: #33433b; }
.sv-legend i.is-confirmed { background: #2f6a50; }
.sv-legend i.is-review { background: #b8752d; }
.sv-legend i.is-low { background: #b85349; }
.sv-legend b { margin-left: auto; font-weight: 600; }

.sv-side { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 220px); position: sticky; top: 16px; }
.sv-side-tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid #edf0ec; }
.sv-side-tabs button { flex: 1; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-size: 9px; font-weight: 700; white-space: nowrap; }
.sv-side-tabs button.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.sv-side-tabs button span { min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; background: #eef1ee; border-radius: 999px; font-size: 7px; }
.sv-side-tabs button span.is-hot { color: #fff; background: var(--danger); }
.sv-side-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.sv-side-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #edf0ec; }
.sv-elements-group { margin-bottom: 12px; }
.sv-elements-group__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; padding: 0 4px; color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.sv-element { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; text-align: left; }
.sv-element:hover { background: #f5f7f4; }
.sv-element.is-selected { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.sv-element__copy { min-width: 0; display: flex; flex-direction: column; }
.sv-element__copy strong { font-size: 9px; }
.sv-element__copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sv-badge { display: inline-flex; align-items: center; min-height: 19px; padding: 0 7px; border-radius: 999px; font-size: 7px; font-weight: 800; white-space: nowrap; }
.sv-badge--success { color: #286746; background: var(--success-soft); }
.sv-badge--warning { color: #9b6428; background: var(--warning-soft); }
.sv-badge--danger { color: #a2463d; background: var(--danger-soft); }
.sv-badge--neutral { color: #68736d; background: var(--neutral-soft); }
.sv-elements-empty, .sv-props-empty, .sv-versions-empty { padding: 30px 12px; color: var(--muted-2); font-size: 9px; text-align: center; }
.sv-props { display: flex; flex-direction: column; gap: 12px; }
.sv-props__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-props__head h3 { margin: 0; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.sv-props .field label { font-size: 8px; }
.sv-props .field-control { min-height: 36px; }
.sv-props .field-control input, .sv-props .field-control select { min-height: 34px; font-size: 10px; }
.sv-props__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sv-props__hint { color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.sv-props__toggle { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 10px; cursor: pointer; font-size: 9px; font-weight: 650; }
.sv-props__toggle input { accent-color: var(--brand); }
.sv-props__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-versions { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-versions li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 10px; }
.sv-versions li.is-current { border-color: color-mix(in srgb, var(--brand) 30%, transparent); background: var(--brand-soft); }
.sv-versions__number { width: 30px; height: 30px; display: grid; place-items: center; color: var(--brand); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 8px; font-weight: 800; }
.sv-versions__copy { min-width: 0; display: flex; flex-direction: column; }
.sv-versions__copy strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sv-versions__copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sv-exports { margin-top: 14px; }
.sv-exports h4 { margin: 0 0 6px; padding: 0 4px; color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }

.sv-dialog { width: min(640px, calc(100vw - 32px)); }
.sv-dialog__body { display: flex; flex-direction: column; gap: 14px; padding: 8px 24px 6px; }
.sv-dialog__body.form-grid { display: grid; }
.sv-dialog__lead { color: var(--muted); font-size: 10px; line-height: 1.55; }
.sv-dialog__lead code { padding: 1px 5px; background: #f0f2ef; border-radius: 5px; font-size: 8px; }
.sv-dialog__hint { color: var(--muted-2); font-size: 9px; }
.sv-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 22px; }
.sv-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-choice { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; background: #fbfcfa; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.sv-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sv-choice.is-selected, .sv-choice:has(input:checked) { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.sv-choice strong { font-size: 10px; }
.sv-choice small { color: var(--muted-2); font-size: 8px; }
.sv-check-list { display: flex; flex-direction: column; gap: 6px; }
.sv-check-list label { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: #f9faf8; border: 1px solid #edf0ec; border-radius: 10px; cursor: pointer; font-size: 9px; font-weight: 650; }
.sv-check-list input { accent-color: var(--brand); }
.sv-dialog--progress { width: min(420px, calc(100vw - 32px)); }
.sv-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 28px 30px; text-align: center; }
.sv-progress__spinner { width: 44px; height: 44px; border: 3px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: spin .9s linear infinite; }
.sv-progress strong { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.sv-progress p { color: var(--ink-2); font-size: 10px; min-height: 30px; }
.sv-progress small { color: var(--muted-2); font-size: 8px; }

@media (max-width: 1280px) {
    .sv-editor { grid-template-columns: minmax(0, 1fr) 290px; }
    .sv-tool span { display: none; }
}
@media (max-width: 1180px) {
    .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-panel-grid, .sv-panel-grid--wide { grid-template-columns: 1fr; }
    .sv-ai__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .sv-editor { grid-template-columns: 1fr; }
    .sv-side { position: static; max-height: none; }
    .sv-side-panel { max-height: 380px; }
    .sv-canvas-wrap { height: 62vh; min-height: 420px; }
}
@media (max-width: 900px) {
    .sv-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-toolgroup--view { margin-left: 0; }
    .sv-choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .sv-grid { grid-template-columns: 1fr; }
    .sv-stepper { grid-template-columns: 1fr; }
    .sv-stepper__copy small { display: none; }
    .sv-block { padding: 16px 14px; }
    .sv-sketch__actions { flex-direction: column; }
    .sv-measure-form__row { grid-template-columns: 1fr; }
    .sv-ai__facts, .sv-usage { grid-template-columns: 1fr; }
    .sv-header__actions .mb-save-state, .sv-header__actions .sv-credits { display: none; }
    .sv-canvas-wrap { height: 56vh; min-height: 360px; }
}

/* Planos e assinaturas (compartilhado admin/billing) */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.plan-card--featured { border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 16px 36px rgba(28,38,33,.08); }
.plan-card--archived { opacity: .68; }
.plan-card__ribbon { position: absolute; top: -9px; right: 18px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; color: #fff; background: var(--brand); border-radius: 999px; font-size: 7px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.plan-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan-card__head h2 { font-family: Georgia, serif; font-size: 21px; font-weight: 500; letter-spacing: -.3px; }
.plan-card__code { display: block; margin-bottom: 2px; color: var(--muted-2); font-size: 7px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.plan-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.plan-card__tagline { margin-top: -6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.plan-card__price { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid #edf0ec; border-bottom: 1px solid #edf0ec; }
.plan-card__price strong { font-family: Georgia, serif; font-size: 34px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.plan-card__price strong small { margin-left: 2px; color: var(--muted-2); font-family: Inter, system-ui, sans-serif; font-size: 11px; letter-spacing: 0; }
.plan-card__price > span { color: var(--muted-2); font-size: 8px; }
.plan-card__interval-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 12px; list-style: none; }
.plan-card__interval-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 8px; color: var(--muted); }
.plan-card__interval-list li strong { color: var(--ink); font-size: 9px; font-weight: 680; }
.plan-card__interval-list li.is-off { opacity: .5; }
.plan-card__interval-list li.is-off strong { color: var(--muted-2); font-weight: 500; }
.plan-card__limits { display: flex; flex-direction: column; gap: 7px; }
.plan-card__limit { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; }
.plan-card__limit > .icon { color: var(--brand); }
.plan-card__limit strong { color: var(--ink); font-size: 9px; font-weight: 680; }
.plan-card__presets { margin-top: -4px; padding-left: 27px; color: var(--muted-2); font-size: 8.5px; line-height: 1.5; }
.plan-card__features { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #edf0ec; list-style: none; }
.plan-card__features li { display: flex; align-items: flex-start; gap: 7px; color: var(--ink-2); font-size: 9px; line-height: 1.45; }
.plan-card__features li > .icon { flex: 0 0 auto; margin-top: 1px; color: var(--success); }
.plan-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 13px; color: var(--muted-2); border-top: 1px solid #edf0ec; font-size: 8px; }
.plan-card__footer strong { color: var(--ink); }
.plan-card__actions { display: flex; align-items: center; gap: 5px; }
.plan-card__cta { margin-top: 4px; }

.subscription-card { padding: 20px; }
.subscription-card + .subscription-card { margin-top: 14px; }
.subscription-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.subscription-card__head h2 { font-family: Georgia, serif; font-size: 20px; font-weight: 500; letter-spacing: -.3px; }
.subscription-card__empty, .subscription-card__hint { margin-bottom: 14px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.subscription-card__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.kv-list { display: flex; flex-direction: column; border-top: 1px solid #edf0ec; }
.kv-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf0ec; }
.kv-list dt { flex: 0 0 auto; color: var(--muted-2); font-size: 8px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.kv-list dd { min-width: 0; color: var(--ink); font-size: 10px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kv-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 0 22px 16px; border-top: 0; }
.kv-list--grid > div { flex-direction: column; align-items: flex-start; gap: 3px; }
.kv-list--grid dd { text-align: left; }

.price-matrix { display: flex; flex-direction: column; gap: 9px; }
.price-matrix__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 10px; }
.price-matrix__row.is-off .price-matrix__amount { opacity: .55; }
.price-matrix__amount .price-prefix { color: var(--muted-2); font-size: 9px; font-weight: 700; }
.price-matrix__amount input { padding-left: 8px; }
.limit-matrix { display: flex; flex-direction: column; gap: 8px; }
.preset-matrix { display: flex; flex-direction: column; gap: 10px; }
.preset-matrix__tools { display: flex; align-items: center; gap: 8px; }
.preset-matrix__tools span { margin-right: auto; color: var(--muted); font-size: 9px; font-weight: 700; }
.preset-matrix__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.toggle-card--preset { align-items: start; }
.toggle-card--preset .toggle-card__icon { color: #8a5a1f; background: #f7ead6; }
.toggle-card--preset .toggle-card__copy small { line-height: 1.4; }
.toggle-card--preset:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 5%, #f8faf7); }
@media (max-width: 720px) { .preset-matrix__grid { grid-template-columns: minmax(0, 1fr); } }
.limit-input-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 150px auto; align-items: center; gap: 10px; }
.limit-input-row > label:first-child { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink-2); font-size: 9px; font-weight: 650; }
.limit-input-row > label:first-child > .icon { color: var(--brand); }
.limit-input-row > label:first-child small { color: var(--muted-2); font-weight: 500; }
.limit-input-row .field-control { min-height: 38px; }
.limit-input-row .field-control input { min-height: 36px; }
.limit-input-row input:disabled { color: var(--muted-2); }
.subscription-card .limit-input-row { grid-template-columns: minmax(0, 1fr) 76px auto; gap: 7px; margin-bottom: 8px; }
.subscription-card .limit-input-row > label:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscription-card .check-control { font-size: 8px; }

.usage-meter { display: flex; flex-direction: column; gap: 12px; padding: 6px 22px 18px; list-style: none; }
.usage-meter__item { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; }
.usage-meter--compact { padding: 0; gap: 9px; }
.usage-meter--compact .usage-meter__item { grid-template-columns: 1fr; }
.usage-meter__icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.usage-meter__copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.usage-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.usage-meter__head span { color: var(--muted); font-size: 9px; }
.usage-meter__head strong { font-family: Georgia, serif; font-size: 14px; font-weight: 500; }
.usage-meter__head strong small { color: var(--muted-2); font-family: Inter, system-ui, sans-serif; font-size: 9px; }
.usage-meter__bar--warning i { background: var(--warning); }
.usage-meter__bar--danger i { background: var(--danger); }
.usage-meter__bar--neutral i { background: #c9d0cb; }
.usage-meter__note { color: var(--muted-2); font-size: 8px; }

/* Admin */
.admin-body .office-pill { cursor: default; }
.auth-body--admin { --brand: #315f50; }
.auth-link--muted { margin-top: 10px; color: var(--muted); font-weight: 600; }
.admin-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.admin-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.admin-detail-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.admin-shortcuts__list { display: flex; flex-direction: column; gap: 7px; padding: 4px 20px 18px; }
.admin-shortcuts__list .quick-action { width: 100%; }
.distribution-list { display: flex; flex-direction: column; gap: 10px; padding: 6px 20px 18px; }
.distribution-item { display: flex; flex-direction: column; gap: 5px; }
.distribution-item > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.distribution-item strong { font-size: 10px; font-weight: 650; }
.distribution-item span { color: var(--muted-2); font-size: 8px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status-row strong { font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.data-table--admin-offices .data-table__head, .data-table--admin-offices .data-table__row { grid-template-columns: 1.6fr .8fr .9fr .7fr .7fr; }
.data-table--admin-offices .data-table__row { min-height: 62px; color: inherit; }
.data-table--users .data-table__head, .data-table--users .data-table__row { grid-template-columns: 1.4fr 1.2fr .8fr .7fr .8fr 36px; }
.office-logo-mini--sm { width: 34px; height: 34px; border-radius: 10px; font-size: 9px; }
.office-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.table-text { min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.table-link { color: var(--brand); font-weight: 650; }
.table-link:hover { text-decoration: underline; }
.text-danger { color: var(--danger); }
.toolbar--form { flex-wrap: wrap; }
.toolbar__select { min-width: 160px; min-height: 40px; background: #fff; }
.toolbar__select select { min-height: 38px; }
.pagination { align-items: center; justify-content: space-between; }
.pagination__info { color: var(--muted); font-size: 9px; }
.pagination__links { display: flex; gap: 6px; }
.detail-card .kv-list--grid, .detail-card .owner-row, .detail-card .member-list { padding-left: 22px; padding-right: 22px; }
.owner-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-bottom: 18px; }
.owner-row__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.owner-row__copy strong { font-size: 11px; }
.owner-row__copy span { color: var(--muted); font-size: 9px; }
.owner-row__copy small { color: var(--muted-2); font-size: 8px; }
.owner-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.member-list { display: flex; flex-direction: column; padding-bottom: 12px; }
.member-list--bordered { padding: 0 0 14px; border-top: 1px solid #edf0ec; }
.member-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; color: inherit; border-top: 1px solid #f0f2ef; transition: background .15s; }
.member-row:first-child { border-top: 0; }
.member-row__copy { min-width: 0; display: flex; flex-direction: column; }
.member-row__copy strong { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.member-row__copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
a.member-row:hover { background: #fafbf9; }
.admin-create { padding-top: 6px; border-top: 1px solid #edf0ec; }
.admin-create h3 { margin: 14px 0 12px; font-size: 10px; font-weight: 700; }
.form-grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.form-section__hint { display: block; margin-top: 3px; color: var(--muted-2); font-size: 9px; font-weight: 500; }
.form-section__hint code { padding: 1px 4px; background: #f0f2ef; border-radius: 4px; font-size: 8px; }
.field-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.field-hint--warning { color: #9b6428; }
.field-hint--warning > .icon { flex: 0 0 auto; margin-top: 1px; }
.field-static { min-height: 43px; display: flex; align-items: center; padding: 0 12px; color: var(--ink-2); background: #f3f4f1; border-radius: 10px; font-size: 11px; }
.field-error--block { margin: -6px 0 12px; font-size: 9px; }
.field-control--textarea { align-items: stretch; }
.toggle-card--radio { grid-template-columns: 37px 1fr auto; }
.radio-mark { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; transition: .18s; }
.radio-mark::after { content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; opacity: 0; }
.toggle-card--radio input:checked ~ .radio-mark { background: var(--brand); border-color: var(--brand); }
.toggle-card--radio input:checked ~ .radio-mark::after { opacity: 1; }
.toggle-card--radio:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 5%, #f8faf7); }
.manual-only { display: flex; flex-direction: column; gap: 13px; }
.action-details { border: 1px solid var(--line); border-radius: 11px; background: #fbfcfa; }
.action-details summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; color: var(--ink-2); cursor: pointer; font-size: 9px; font-weight: 700; list-style: none; }
.action-details summary::-webkit-details-marker { display: none; }
.action-details summary > .icon:first-child { color: var(--brand); }
.action-details[open] summary { border-bottom: 1px solid var(--line); }
.action-details[open] summary > .icon:last-child { transform: rotate(180deg); }
.action-details--danger summary > .icon:first-child { color: var(--danger); }
.action-form { display: flex; flex-direction: column; gap: 11px; padding: 12px; }
.action-inline { display: block; }
.reset-link-card--wide { grid-template-columns: 38px 1fr 20px; margin: 0 0 16px; }
.reset-link-card--wide strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reset-link-card--wide em { font-style: normal; font-weight: 500; opacity: .85; }

@media (max-width: 1180px) {
    .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .admin-detail-grid { grid-template-columns: 1fr; }
    .admin-detail-aside { position: static; }
    .kv-list--grid { grid-template-columns: 1fr; }
    .form-grid--3 { grid-template-columns: 1fr; }
    .data-table--admin-offices .data-table__row > :nth-child(4), .data-table--admin-offices .data-table__row > :nth-child(5) { display: none; }
    .data-table--admin-offices .data-table__head, .data-table--admin-offices .data-table__row { grid-template-columns: 1.6fr .8fr .9fr; }
}
@media (max-width: 680px) {
    .plan-grid { grid-template-columns: 1fr; }
    .price-matrix__row, .limit-input-row { grid-template-columns: 1fr; }
    .subscription-card .limit-input-row { grid-template-columns: minmax(0, 1fr) 76px auto; }
    .owner-row { grid-template-columns: auto minmax(0, 1fr); }
    .owner-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
    .member-row { grid-template-columns: auto minmax(0, 1fr); }
    .member-row > .role-tag, .member-row > .status-dot-label, .member-row > .table-text, .member-row > .status-badge { grid-column: 2; }
    .data-table--users .data-table__row > .row-action { display: flex; grid-column: 2; grid-row: 1; padding: 0; }
    .data-table--users .data-table__row > :nth-child(3) { display: none; }
    .data-table--admin-offices .data-table__row > :nth-child(3) { display: block; grid-column: 1 / -1; padding-left: 45px; }
    .data-table--admin-offices .data-table__head, .data-table--admin-offices .data-table__row { grid-template-columns: 1fr auto; }
    .toolbar__select { width: 100%; }
    .pagination { flex-direction: column; align-items: flex-start; }
}
.plan-card__interval-list, .plan-card__features, .usage-meter { margin: 0; padding-left: 0; }
.usage-meter { padding: 6px 22px 18px; }
.usage-meter--compact { padding: 0; }
.admin-body .dashboard-grid { align-items: start; }
.member-row .status-dot-label, .owner-row .status-dot-label { font-size: 9px; }
.office-card__plan { text-transform: uppercase; }
@media (max-width: 680px) {
    .member-row > .role-tag, .member-row > .status-badge { justify-self: start; }
}

/* Signup, verificação de e-mail e Google */
.button--google { color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.button--google:hover { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px; color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-note { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check-control--wrap { width: auto; align-items: flex-start; line-height: 1.5; }
.check-control--wrap .check-control__box { flex: 0 0 auto; margin-top: 1px; }
.check-control--wrap a { color: var(--brand); font-weight: 700; text-decoration: underline; }
.auth-form .field label small { color: var(--muted-2); font-weight: 500; }
.google-profile { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 12px; margin-bottom: 22px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); }
.google-profile__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.google-profile__copy { min-width: 0; display: flex; flex-direction: column; }
.google-profile__copy strong { font-size: 11px; }
.google-profile__copy span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.google-profile__copy small { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--success); font-size: 8px; font-weight: 700; }
.verify-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 16px; color: #286746; background: var(--success-soft); border-radius: 13px; }
.verify-card__icon { flex: 0 0 auto; }
.verify-card strong { font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.verify-card .auth-note { color: #3e6b55; }
.notice-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; }
.notice-bar--warning { color: #6f4a1c; background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.notice-bar--danger { color: #7a3a33; background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.notice-bar--neutral { color: var(--ink-2); background: var(--neutral-soft); border-color: var(--line); }
.notice-bar__icon { width: 32px; height: 32px; display: grid; place-items: center; background: rgba(255,255,255,.6); border-radius: 9px; }
.notice-bar__copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notice-bar__copy strong { font-size: 10px; }
.notice-bar__copy span { font-size: 9px; line-height: 1.45; opacity: .9; }
.notice-bar form { margin: 0; }
.welcome-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 16px; padding: 22px 24px; background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand) 6%, #fff)); }
.welcome-card__copy h2 { margin: 2px 0 6px; font-family: Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: -.3px; }
.welcome-card__copy p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.welcome-card__actions { display: flex; flex-direction: column; gap: 7px; }
.welcome-card__actions .quick-action { width: 100%; }
.verified-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--success); font-size: 8px; font-weight: 700; }
.verified-tag--pending { color: #9b6428; }
@media (max-width: 900px) {
    .welcome-card { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .notice-bar { grid-template-columns: auto minmax(0, 1fr); }
    .notice-bar form { grid-column: 2; }
}
.field label.check-control { display: flex; margin-bottom: 0; color: var(--muted); font-weight: 500; }
.field label.check-control--wrap { align-items: flex-start; gap: 9px; font-size: 9px; line-height: 1.5; }

/* Quotas e acesso */
.quota-hint { display: flex; align-items: center; gap: 8px; margin: -14px 0 18px; color: var(--muted); font-size: 9px; }
.quota-hint > .icon { color: var(--brand); }
.quota-hint strong { color: var(--ink); font-weight: 700; }
.quota-hint .progress-mini { width: 90px; }
.quota-hint--warning .progress-mini i { background: var(--warning); }
.quota-hint--danger .progress-mini i { background: var(--danger); }
.quota-blocked { padding: 44px 28px; text-align: center; }
.quota-blocked p { max-width: 420px; margin: 8px auto 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.quota-blocked__meter { width: min(100%, 320px); margin: 18px auto 0; display: flex; flex-direction: column; gap: 6px; }
.quota-blocked__meter small { color: var(--muted-2); font-size: 9px; }
.quota-blocked__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.quota-blocked__hint { display: inline-flex; align-items: center; color: var(--muted); font-size: 9px; }
.toast--cta { grid-template-columns: 28px 1fr auto 28px; }
.toast__cta { flex: 0 0 auto; white-space: nowrap; }
.notice-bar--subscription { margin-bottom: 16px; }
.plan-summary-card { overflow: hidden; }
.plan-summary-card__body { padding: 4px 20px 18px; }
.plan-summary-card__body .section-link { display: inline-flex; margin-top: 12px; }
.billing-content { display: flex; flex-direction: column; gap: 14px; }
.subscription-card--billing .kv-list { margin-top: 4px; }
.subscription-card__actions--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.subscription-card__note { color: var(--muted); font-size: 9px; line-height: 1.5; }
.usage-footnote { margin: 4px 0 0; padding: 0 22px 18px; color: var(--muted-2); font-size: 9px; line-height: 1.55; }
.billing-content > .usage-footnote { padding: 0 4px; }
.plans-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.plans-toolbar__copy { max-width: 460px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.plan-grid--public .plan-card__cta { margin-top: auto; }
.plan-card--current { border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); }
.plan-card__ribbon--current { background: var(--ink); }
.button.is-static { cursor: default; pointer-events: none; opacity: .75; }
.usage-history { padding: 4px 22px 18px; }
.usage-history__table { width: 100%; border-collapse: collapse; font-size: 9px; }
.usage-history__table th { padding: 8px 6px; color: var(--muted-2); border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 750; letter-spacing: .5px; text-align: left; text-transform: uppercase; }
.usage-history__table td { padding: 8px 6px; border-bottom: 1px solid #f0f2ef; }
.usage-history__table th:not(:first-child), .usage-history__table td:not(:first-child) { text-align: right; }
.usage-reset { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.usage-reset .field-control { min-height: 36px; width: 220px; }
.usage-reset .field-control select { min-height: 34px; }
.sv-fact--warning strong { color: var(--danger); }
.sv-ai__upgrade { color: var(--brand); font-weight: 700; text-decoration: underline; }
.sv-credits-remaining { margin-left: 6px; color: rgba(255,255,255,.7); font-size: 8px; }
@media (max-width: 900px) {
    .plans-toolbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
    .quota-hint { margin-top: -6px; }
    .usage-reset { flex-direction: column; align-items: stretch; }
    .usage-reset .field-control { width: 100%; }
    .toast--cta { grid-template-columns: 28px 1fr 28px; }
    .toast__cta { grid-column: 2; justify-self: start; }
}
.plan-card__price strong > span { color: inherit; font: inherit; }
.settings-layout--wide { grid-template-columns: 190px minmax(0, 1fr); }

/* Billing: checkout, faturas, troca, público */
.notice-bar--success { color: #245a3e; background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.method-card { position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 12px 13px; background: #f8faf7; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .18s, background .18s; }
.method-card input { position: absolute; opacity: 0; pointer-events: none; }
.method-card__icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 10px; }
.method-card__copy { min-width: 0; display: flex; flex-direction: column; }
.method-card__copy strong { font-size: 10px; }
.method-card__copy small { color: var(--muted-2); font-size: 8px; line-height: 1.4; }
.method-card:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 6%, #fff); }
.method-card input:checked ~ .radio-mark { background: var(--brand); border-color: var(--brand); }
.method-card input:checked ~ .radio-mark::after { opacity: 1; }
.method-card.is-disabled { opacity: .55; cursor: not-allowed; }
.card-brand { position: absolute; right: 12px; color: var(--muted-2); font-size: 8px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.checkout .form-summary .check-control { margin: 0 0 14px; }
.checkout .form-summary .auth-security { margin-top: 14px; text-align: center; }
.checkout .form-summary .field-error { display: block; margin: -8px 0 12px; }
.pending-invoice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-left: 4px solid var(--warning); }
.pending-invoice--danger { border-left-color: var(--danger); }
.pending-invoice--warning { border-left-color: var(--warning); }
.pending-invoice__copy h2 { margin: 2px 0 4px; font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.pending-invoice__copy p { color: var(--muted); font-size: 9px; line-height: 1.5; }
.pending-invoice__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.pix-card__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 4px 22px 20px; }
.pix-card__body--single { grid-template-columns: 1fr; }
.pix-card__qr { width: 200px; height: 200px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; image-rendering: pixelated; }
.pix-card__copy { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pix-card__copy p { color: var(--ink-2); font-size: 11px; line-height: 1.55; }
.pix-card__copy small { color: var(--muted-2); font-size: 9px; }
.pix-card__copy .copy-field { margin-top: 0; }
.pix-card__copy .copy-field input { min-height: 38px; }
.pix-card__waiting { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.pix-card__waiting > .icon { animation: pulseSoft 1.6s ease-in-out infinite; }
@keyframes pulseSoft { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.data-table--invoices .data-table__head, .data-table--invoices .data-table__row { grid-template-columns: 1.1fr 1.6fr .7fr .7fr .8fr 80px; }
.cancel-details { position: relative; }
.cancel-details summary { list-style: none; }
.cancel-details summary::-webkit-details-marker { display: none; }
.cancel-form { display: flex; flex-direction: column; gap: 12px; width: min(100%, 420px); margin-top: 12px; padding: 16px; background: var(--danger-soft); border-radius: 12px; }
.cancel-form p { color: #7a3a33; font-size: 10px; line-height: 1.5; }
.change-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; margin-bottom: 14px; }
.change-compare__arrow { display: grid; place-items: center; color: var(--muted-2); }
.plan-card--compare h2 { font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.change-effect { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; }
.change-effect strong { font-size: 11px; }
.change-effect p { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.change-effect form { display: flex; gap: 8px; }
.fake-checkout { padding: 20px; }
.fake-checkout .kv-list { margin: 14px 0; }
.fake-checkout__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invoice-row .status-badge { grid-column: auto; }
.public-body { display: flex; flex-direction: column; min-height: 100vh; background: var(--canvas); color: var(--ink); }
.public-header { position: sticky; top: 0; z-index: 10; background: rgba(244,245,241,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.public-header__inner, .public-footer__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.public-header__inner { min-height: 64px; }
.public-nav { display: flex; align-items: center; gap: 18px; }
.public-nav > a:not(.button) { color: var(--muted); font-size: 10px; font-weight: 650; }
.public-nav > a:not(.button):hover, .public-nav > a.is-active { color: var(--ink); }
.public-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 40px 24px 60px; }
.public-footer { padding: 22px 0; color: var(--muted-2); border-top: 1px solid var(--line); font-size: 9px; }
.public-footer a { color: var(--muted); font-weight: 650; }
.pricing-hero { max-width: 640px; margin: 0 auto 30px; text-align: center; }
.pricing-hero h1 { margin: 6px 0 10px; font-family: Georgia, serif; font-size: clamp(30px, 4.5vw, 44px); font-weight: 500; letter-spacing: -.8px; line-height: 1.1; }
.pricing-hero p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.pricing-toggle { width: max-content; margin: 22px auto 0; }
.pricing-toggle .filter-pill span { color: var(--success); background: var(--success-soft); font-size: 7px; font-weight: 800; padding: 0 6px; }
.pricing-cards .plan-grid { align-items: stretch; }
.pricing-cards .usage-footnote { padding: 12px 0 0; text-align: center; }
.pricing-cards .usage-footnote a { color: var(--brand); font-weight: 700; }
.pricing-faq { max-width: 860px; margin: 48px auto 0; }
.pricing-faq h2 { margin-bottom: 16px; font-family: Georgia, serif; font-size: 24px; font-weight: 500; text-align: center; }
.pricing-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pricing-faq details { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.pricing-faq summary { cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary::after { content: "+"; float: right; color: var(--muted-2); }
.pricing-faq details[open] summary::after { content: "–"; }
.pricing-faq p { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.pricing-faq p a { color: var(--brand); font-weight: 700; }
@media (max-width: 900px) {
    .method-grid { grid-template-columns: 1fr; }
    .change-compare { grid-template-columns: 1fr; }
    .change-compare__arrow { transform: rotate(90deg); }
    .change-effect { grid-template-columns: 30px minmax(0, 1fr); }
    .change-effect form { grid-column: 1 / -1; }
    .pricing-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .pending-invoice { flex-direction: column; align-items: flex-start; }
    .pending-invoice__actions { justify-content: flex-start; }
    .pix-card__body { grid-template-columns: 1fr; }
    .pix-card__qr { width: 180px; height: 180px; }
    .data-table--invoices .data-table__row { grid-template-columns: 1fr auto; }
    .data-table--invoices .data-table__row > :nth-child(4) { grid-column: 1; padding-left: 40px; }
    .data-table--invoices .data-table__row > :nth-child(5) { grid-column: 1; padding-left: 40px; display: block; }
    .data-table--invoices .data-table__row > .row-action { display: flex; grid-column: 2; grid-row: 1; padding: 0; }
    .public-header__inner { padding: 0 14px; }
    .public-nav > a:not(.button) { display: none; }
    .public-main { padding: 26px 14px 40px; }
    .public-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Billing: formulário inline dentro de listas chave/valor (ex.: "Desfazer" troca agendada) */
.kv-list dd .inline-form { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.kv-list dd .inline-form .button--sm { padding: 2px 8px; font-size: 10px; }

/* Créditos de IA comprados (/billing/credits) */
.credits-summary__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.credits-summary__box { display: grid; gap: 6px; padding: 14px 15px; background: #f8faf7; border: 1px solid var(--line); border-radius: 12px; }
.credits-summary__box strong { font-family: Georgia, serif; font-size: 22px; line-height: 1; color: var(--ink); }
.credits-summary__box strong small { font-family: inherit; font-size: 10px; color: var(--muted); font-weight: 500; }
.credits-summary__box small { font-size: 9px; color: var(--muted); }
.credits-summary__box--total { background: rgba(35, 92, 69, .07); border-color: rgba(35, 92, 69, .25); }
.credits-summary__box.is-negative strong { color: var(--danger); }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pack-card { position: relative; display: grid; gap: 4px; padding: 16px 14px 14px; background: #f8faf7; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; text-align: center; transition: border-color .18s, background .18s, box-shadow .18s; }
.pack-card input { position: absolute; opacity: 0; pointer-events: none; }
.pack-card--featured { border-color: rgba(35, 92, 69, .35); }
.pack-card:hover { border-color: var(--brand); }
.pack-card:has(input:checked) { border-color: var(--brand); background: rgba(35, 92, 69, .07); box-shadow: 0 0 0 2px rgba(35, 92, 69, .15); }
.pack-card:has(input:checked) .radio-mark { background: var(--brand); border-color: var(--brand); }
.pack-card:has(input:checked) .radio-mark::after { opacity: 1; }
.pack-card .radio-mark { justify-self: center; margin-top: 6px; }
.pack-card__credits strong { display: block; font-family: Georgia, serif; font-size: 26px; line-height: 1; color: var(--ink); }
.pack-card__credits small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pack-card__name { font-size: 10px; font-weight: 700; color: var(--ink); }
.pack-card__price { font-size: 13px; font-weight: 800; color: var(--brand); }
.pack-card__per { font-size: 8px; color: var(--muted); }
.credits-form .form-section__header { margin-top: 18px; }
.credits-form .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.credits-form .card-grid { margin-bottom: 10px; }
.credits-form__footer { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.credits-form__footer .button--lg { justify-self: start; }
.data-table--ledger .data-table__head, .data-table--ledger .data-table__row { grid-template-columns: 120px 1fr 90px 80px; }
.text-success { color: var(--success); }
.usage-meter__balance { display: block; margin-top: 3px; font-size: 8px; color: var(--muted); }
.usage-meter__balance strong { color: var(--ink); }
.usage-meter__balance a { color: var(--brand); font-weight: 700; }
@media (max-width: 720px) {
    .credits-summary__grid { grid-template-columns: 1fr; }
    .data-table--ledger .data-table__head { display: none; }
    .data-table--ledger .data-table__row { grid-template-columns: 1fr auto; }
    .data-table--ledger .data-table__row > :nth-child(2) { grid-column: 1 / -1; }
}

/* Checkout hospedado (Plano 09): passos e cards estáticos */
.checkout-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.checkout-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: 10px; line-height: 1.5; color: var(--muted); }
.checkout-steps li strong { color: var(--brand); }
.checkout-steps li em { font-style: normal; font-weight: 700; color: var(--ink); }
.method-grid--static { margin-bottom: 12px; }
.method-card.is-static { cursor: default; grid-template-columns: 36px 1fr; }
.method-card.is-static:hover { border-color: var(--line); background: #f8faf7; }
.fake-hosted { max-width: 640px; margin: 0 auto; display: grid; gap: 14px; }
.fake-hosted__summary { display: grid; gap: 4px; padding: 14px 16px; background: #f8faf7; border: 1px solid var(--line); border-radius: 12px; }
.fake-hosted__summary strong { font-family: Georgia, serif; font-size: 22px; }
.fake-hosted__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Admin financeiro */
.status-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.status-strip__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm); transition: border-color .15s; }
.status-strip__item:hover, .status-strip__item.is-active { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.status-strip__item strong { font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.status-strip__item > span:first-child:not(.status-badge) { color: var(--muted); font-size: 9px; }
.status-strip__item small { color: var(--muted-2); font-size: 8px; }
.data-table--subscriptions .data-table__head, .data-table--subscriptions .data-table__row { grid-template-columns: 1.5fr .9fr .7fr .6fr .9fr .8fr 36px; }
.data-table--attention .data-table__head, .data-table--attention .data-table__row { grid-template-columns: 1.3fr 1.1fr .5fr .6fr .8fr .8fr 36px; }
.table-note { display: block; margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.metric-card__value--money { font-size: 22px; }
.member-list--padded { padding: 4px 18px 12px; }
.invoice-admin-row { grid-template-columns: auto minmax(0, 1fr) auto 32px; }
.row-details { position: relative; }
.row-details summary { list-style: none; }
.row-details summary::-webkit-details-marker { display: none; }
.row-details__menu { position: absolute; right: 0; top: 34px; z-index: 5; width: 320px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); }
.row-details__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.row-details__form input { min-height: 34px; padding: 0 10px; background: #fbfcfa; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.webhook-row { border-top: 1px solid #f0f2ef; }
.webhook-row:first-child { border-top: 0; }
.webhook-row > summary { list-style: none; cursor: pointer; border-top: 0; }
.webhook-row > summary::-webkit-details-marker { display: none; }
.webhook-row__body { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px 38px; }
.webhook-row__body pre { max-height: 260px; overflow: auto; padding: 10px 12px; background: #f6f7f4; border-radius: 10px; font-size: 9px; line-height: 1.5; }
.toolbar--form input[type="month"] { min-height: 38px; padding: 0 10px; background: transparent; border: 0; font-size: 10px; }
@media (max-width: 900px) {
    .data-table--subscriptions .data-table__head, .data-table--subscriptions .data-table__row { grid-template-columns: 1.5fr .9fr .9fr 36px; }
    .data-table--subscriptions .data-table__row > :nth-child(3), .data-table--subscriptions .data-table__row > :nth-child(4), .data-table--subscriptions .data-table__row > :nth-child(6), .data-table--subscriptions .data-table__head > :nth-child(3), .data-table--subscriptions .data-table__head > :nth-child(4), .data-table--subscriptions .data-table__head > :nth-child(6) { display: none; }
    .data-table--attention .data-table__head, .data-table--attention .data-table__row { grid-template-columns: 1.3fr 1.1fr .8fr 36px; }
    .data-table--attention .data-table__row > :nth-child(3), .data-table--attention .data-table__row > :nth-child(4), .data-table--attention .data-table__row > :nth-child(5), .data-table--attention .data-table__head > :nth-child(3), .data-table--attention .data-table__head > :nth-child(4), .data-table--attention .data-table__head > :nth-child(5) { display: none; }
}
@media (max-width: 680px) {
    .data-table--subscriptions .data-table__row, .data-table--attention .data-table__row { grid-template-columns: 1fr auto; }
    .data-table--subscriptions .data-table__row > :nth-child(2), .data-table--subscriptions .data-table__row > :nth-child(5), .data-table--attention .data-table__row > :nth-child(2), .data-table--attention .data-table__row > :nth-child(6) { display: block; grid-column: 1; padding-left: 45px; }
    .data-table--subscriptions .data-table__row > .row-action, .data-table--attention .data-table__row > .row-action { display: flex; grid-column: 2; grid-row: 1; padding: 0; }
    .row-details__menu { width: min(320px, calc(100vw - 60px)); }
    .invoice-admin-row { grid-template-columns: auto minmax(0, 1fr) 32px; }
    .invoice-admin-row > .status-badge { grid-column: 2; }
}

/* Guided tour */
.tour-trigger { color: var(--brand); }
.tour-trigger:hover { color: var(--brand-dark); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
body.tour-open { overflow: hidden; }
body.tour-open [data-tour] { scroll-margin: 24px 0; }
.tour-overlay { position: fixed; inset: 0; z-index: 300; cursor: default; animation: tour-fade .22s ease; }
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
.tour-overlay__spotlight {
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, #fff), 0 0 0 9999px rgba(15, 28, 22, .62);
    pointer-events: none;
}
.tour-overlay__spotlight.is-moving { transition: top .32s var(--ease), left .32s var(--ease), width .32s var(--ease), height .32s var(--ease), border-radius .32s var(--ease); }
.tour-tooltip {
    position: absolute;
    width: min(350px, calc(100vw - 24px));
    padding: 18px 20px 20px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    outline: none;
}
.tour-tooltip.is-moving { transition: top .32s var(--ease), left .32s var(--ease); }
.tour-tooltip::before {
    content: "";
    position: absolute;
    width: 13px; height: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    transform: rotate(45deg);
}
.tour-tooltip--bottom::before { top: -7px; left: calc(var(--tour-arrow, 50%) - 7px); border-right: 0; border-bottom: 0; }
.tour-tooltip--top::before { bottom: -7px; left: calc(var(--tour-arrow, 50%) - 7px); border-left: 0; border-top: 0; }
.tour-tooltip--right::before { left: -7px; top: calc(var(--tour-arrow, 50%) - 7px); border-top: 0; border-right: 0; }
.tour-tooltip--left::before { right: -7px; top: calc(var(--tour-arrow, 50%) - 7px); border-bottom: 0; border-left: 0; }
.tour-tooltip--float { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
.tour-tooltip--float::before { display: none; }
.tour-tooltip__close { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; }
.tour-tooltip__step { display: block; color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.tour-tooltip__title { margin-top: 7px; padding-right: 30px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: -.3px; }
.tour-tooltip__text { margin-top: 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.58; }
.tour-tooltip__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tour-tooltip__skip { margin-right: auto; padding: 0; color: var(--muted); background: transparent; border: 0; font-size: 11px; font-weight: 650; cursor: pointer; }
.tour-tooltip__skip:hover { color: var(--ink); text-decoration: underline; }
.tour-tooltip__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: var(--neutral-soft); border-radius: 0 0 var(--radius) var(--radius); }
.tour-tooltip__bar i { display: block; height: 100%; background: var(--brand); transition: width .32s var(--ease); }
@media (max-width: 900px) {
    body.tour-open [data-tour] { scroll-margin: 78px 0 24px; }
}
@media (max-width: 680px) {
    .tour-tooltip { padding: 16px 16px 18px; }
    .tour-tooltip__title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .tour-overlay { animation: none; }
    .tour-overlay__spotlight.is-moving, .tour-tooltip.is-moving, .tour-tooltip__bar i { transition: none; }
}
@media print {
    .tour-overlay, .tour-trigger { display: none !important; }
}

/* ------------------------------------------------------------------ Moodboard · resultado visual com IA */
/* Construtor (aba Experiência) */
.mb-ai-result .toggle-card { margin-top: 10px !important; }
.mb-ai-result .toggle-card.is-disabled { opacity: .6; cursor: not-allowed; }
.mb-ai-result__note { margin-top: 8px; color: var(--muted-2); font-size: 8.5px; line-height: 1.5; }
.mb-status__ai { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--brand); font-size: 8.5px; font-weight: 650; }
.mb-status__ai .icon { flex: 0 0 auto; }
/* Painel do arquiteto (tela de respostas) */
.mb-ai-panel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 16px; }
.mb-ai-panel__head { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.mb-ai-panel__head strong { display: block; margin-top: 2px; font-family: Georgia, serif; font-size: 15px; font-weight: 500; line-height: 1.2; }
.mb-ai-panel__mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 11px; }
.mb-ai-panel--failed .mb-ai-panel__mark { color: var(--danger); background: #fbe9e6; }
.mb-ai-panel--processing .mb-ai-panel__mark { color: #8a5a1f; background: #f7ead6; }
.mb-ai-panel__image { display: block; overflow: hidden; background: #f1f3f0; border: 1px solid var(--line); border-radius: 12px; }
.mb-ai-panel__image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s var(--ease); }
.mb-ai-panel__image:hover img { transform: scale(1.03); }
.mb-ai-panel__placeholder { display: grid; place-items: center; aspect-ratio: 3 / 2; background: linear-gradient(110deg, #f1f3f0 30%, #f9faf8 50%, #f1f3f0 70%); background-size: 200% 100%; border-radius: 12px; animation: mbAiShimmer 1.6s linear infinite; }
.mb-ai-panel__text { color: var(--muted); font-size: 9px; line-height: 1.55; }
.mb-ai-panel__note { padding: 8px 10px; color: #7a4d12; background: #fbf3e6; border-radius: 9px; font-size: 8.5px; line-height: 1.5; }
.mb-ai-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-ai-panel__actions form { display: contents; }
.mb-ai-panel__actions .button--ghost .sv-credits { color: var(--brand); background: var(--brand-soft); }
@keyframes mbAiShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media print { .mb-ai-panel__actions { display: none; } }
/* Tela de carregamento do cliente (entre "Concluir" e o encerramento) */
.mbx-generating { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; }
.mbx-generating__orbit { position: relative; width: 84px; height: 84px; margin-bottom: 8px; }
.mbx-generating__orbit i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--mbx-accent) 18%, transparent); border-top-color: var(--mbx-accent); animation: mbxOrbit 1.4s linear infinite; }
.mbx-generating__orbit i:nth-child(2) { inset: 12px; animation-duration: 2.1s; animation-direction: reverse; border-top-color: color-mix(in srgb, var(--mbx-accent) 60%, transparent); }
.mbx-generating__orbit i:nth-child(3) { inset: 24px; animation-duration: 2.8s; border-top-color: color-mix(in srgb, var(--mbx-accent) 40%, transparent); }
.mbx-generating__orbit b { position: absolute; inset: 34px; border-radius: 50%; background: var(--mbx-accent); animation: mbxPulse 1.8s ease-in-out infinite; }
.mbx-generating__message { min-height: 2.4em; color: color-mix(in srgb, var(--mbx-ink) 78%, transparent); font-family: Inter, ui-sans-serif, sans-serif; font-size: 13px; line-height: 1.5; text-align: center; animation: mbxFade .45s var(--ease) both; }
.mbx-generating__dots { display: flex; gap: 6px; }
.mbx-generating__dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--mbx-ink) 18%, transparent); transition: background .3s; }
.mbx-generating__dots i.is-active { background: var(--mbx-accent); }
@keyframes mbxOrbit { to { transform: rotate(360deg); } }
@keyframes mbxPulse { 0%, 100% { transform: scale(.9); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mbx-generating__orbit i, .mbx-generating__orbit b, .mbx-generating__message { animation: none; } }
/* Tela de encerramento com o moodboard gerado (cliente) e placeholder na prévia do construtor */
.mbx-card--result h1 { margin-bottom: 14px; }
.mbx-result { margin: 0 0 16px; }
.mbx-result img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.16); animation: mbxZoom .7s var(--ease) both; }
.mbx-result figcaption { margin-top: 10px; color: color-mix(in srgb, var(--mbx-ink) 55%, transparent); font-family: Inter, ui-sans-serif, sans-serif; font-size: 10px; }
.mbx-result__actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.mbx-result__actions .mbx-button { margin-top: 12px; }
a.mbx-button { text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--mbx-accent) 28%, transparent); }
a.mbx-link { text-decoration: none; }
.mbx-result__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 3 / 2; color: var(--mbx-accent); background: color-mix(in srgb, var(--mbx-accent) 8%, transparent); border: 1.5px dashed color-mix(in srgb, var(--mbx-accent) 40%, transparent); border-radius: 16px; }
.mbx-result__placeholder small { color: color-mix(in srgb, var(--mbx-ink) 60%, transparent); font-family: Inter, ui-sans-serif, sans-serif; font-size: 8px; text-align: center; }
.mb-phone .mbx-result__actions .mbx-button { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mbx-result img { animation: none; } }