: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__mark {
    position: relative;
    width: 33px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--brand);
    border-radius: 7px 7px 11px 11px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
    transform: skewY(-3deg);
}
.brand__mark::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 6px;
    width: 21px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 76%, white);
}
.brand__mark span { font-family: Georgia, serif; font-size: 19px; line-height: 1; transform: skewY(3deg); }
.brand__mark--light { background: #eff6f2; color: #18372a; }
.brand__mark--light::before { background: #fff; }
.brand__name { color: #f6f9f7; font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: -.25px; }

.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(37px, 4.4vw, 58px); font-weight: 400; line-height: .98; letter-spacing: -1.8px; }
.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-brand .brand__name { color: var(--ink); }
.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__mark { width: 27px; height: 30px; }
    .brand--mobile .brand__mark span { font-size: 15px; }
    .brand--mobile .brand__name { color: var(--ink); font-size: 17px; }
    .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-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-header__actions .mb-save-state { display: none; }
    .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: 14px; outline: 0; transition: border-color .18s, box-shadow .18s; }
.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; }
}