html.bran-resume-app-document { width: 100%; height: 100%; min-height: 100%; margin-top: 0 !important; }
body.bran-resume-app-page { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; background: oklch(.955 .004 264.542); }
body.bran-resume-app-page #wpadminbar { display: none !important; }
body.bran-resume-app-page #bran-resume-app { width: 100%; height: 100%; min-height: 100%; }

#bran-resume-app {
    --resume-ui-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --background: oklch(1 0 0);
    --foreground: oklch(.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(.145 0 0);
    --primary: oklch(.205 0 0);
    --primary-foreground: oklch(.985 0 0);
    --secondary: oklch(.97 0 0);
    --secondary-foreground: oklch(.205 0 0);
    --muted: oklch(.97 0 0);
    --muted-foreground: oklch(.556 0 0);
    --accent: oklch(.97 0 0);
    --accent-foreground: oklch(.205 0 0);
    --destructive: oklch(.577 .245 27.325);
    --destructive-foreground: oklch(.985 0 0);
    --border: oklch(.922 0 0);
    --input: oklch(.922 0 0);
    --ring: oklch(.708 0 0);
    --success: oklch(.962 .044 156.743);
    --success-foreground: oklch(.393 .095 152.535);
    --warning: oklch(.973 .071 103.193);
    --warning-foreground: oklch(.414 .112 45.904);
    --editor-selection: oklch(.623 .214 259.815);
    --editor-selection-soft: oklch(.932 .032 255.585);
    --canvas-background: oklch(.955 .004 264.542);
    --canvas-dot: oklch(.82 .006 264.531);
    --radius: .625rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    color: var(--foreground);
    font-family: var(--resume-ui-font);
    font-size: 14px;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
}

#bran-resume-app *,
#bran-resume-app *::before,
#bran-resume-app *::after { box-sizing: border-box; }

#bran-resume-app button,
#bran-resume-app input,
#bran-resume-app textarea,
#bran-resume-app select { font: inherit; }

#bran-resume-app h2,
#bran-resume-app h3,
#bran-resume-app p { margin: 0; }

#bran-resume-app [hidden] { display: none !important; }

#bran-resume-app [data-slot="icon"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    pointer-events: none;
}

#bran-resume-app [data-slot="button"] {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--foreground);
    box-shadow: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

#bran-resume-app [data-slot="button"]:hover { text-decoration: none; }
#bran-resume-app [data-slot="button"]:active:not(:disabled) { transform: translateY(1px); }
#bran-resume-app [data-slot="button"][data-variant="default"] { background: var(--primary); color: var(--primary-foreground); }
#bran-resume-app [data-slot="button"][data-variant="default"]:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
#bran-resume-app [data-slot="button"][data-variant="outline"] { border-color: var(--border); background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px oklch(0 0 0 / .04); }
#bran-resume-app [data-slot="button"][data-variant="outline"]:hover { background: var(--accent); color: var(--accent-foreground); }
#bran-resume-app [data-slot="button"][data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
#bran-resume-app [data-slot="button"][data-variant="secondary"]:hover { background: color-mix(in oklch, var(--secondary) 82%, var(--foreground)); }
#bran-resume-app [data-slot="button"][data-variant="ghost"] { color: var(--foreground); }
#bran-resume-app [data-slot="button"][data-variant="ghost"]:hover { background: var(--accent); color: var(--accent-foreground); }
#bran-resume-app [data-slot="button"][data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
#bran-resume-app [data-slot="button"][data-variant="destructive"]:hover { background: color-mix(in oklch, var(--destructive) 90%, transparent); }
#bran-resume-app [data-slot="button"][data-size="xs"] { min-height: 28px; gap: 6px; padding: 4px 8px; font-size: 11px; }
#bran-resume-app [data-slot="button"][data-size="sm"] { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#bran-resume-app [data-slot="button"][data-size="lg"] { min-height: 40px; padding: 10px 18px; font-size: 14px; }
#bran-resume-app [data-slot="button"][data-size="icon"] { width: 36px; min-width: 36px; padding: 0; }
#bran-resume-app [data-slot="button"][data-size="icon-xs"] { width: 28px; min-width: 28px; min-height: 28px; padding: 0; }
#bran-resume-app [data-slot="button"][data-size="icon-sm"] { width: 32px; min-width: 32px; min-height: 32px; padding: 0; }
#bran-resume-app [data-slot="button"][data-size="icon-lg"] { width: 40px; min-width: 40px; min-height: 40px; padding: 0; }
#bran-resume-app [data-slot="button"]:disabled,
#bran-resume-app [data-slot="button"][aria-disabled="true"] { cursor: not-allowed; opacity: .45; }

#bran-resume-app [data-slot="spinner"] { width: 1rem; height: 1rem; flex: 0 0 auto; animation: bran-ui-spin .8s linear infinite; }
@keyframes bran-ui-spin { to { transform: rotate(360deg); } }

#bran-resume-app [data-slot="button"]:focus-visible,
#bran-resume-app [data-slot="tabs-trigger"]:focus-visible,
#bran-resume-app [data-slot="input"]:focus-visible,
#bran-resume-app [data-slot="textarea"]:focus-visible,
#bran-resume-app [data-slot="select"]:focus-visible,
#bran-resume-app [data-slot="attachment"]:focus-within,
#bran-resume-app .bran-resume-handle:focus-visible,
#bran-resume-app .bran-resume-group-drag-handle:focus-visible,
#bran-resume-app .bran-resume-object:focus-visible {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
}

#bran-resume-app [data-slot="badge"] {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

#bran-resume-app [data-slot="badge"][data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
#bran-resume-app [data-slot="badge"][data-variant="outline"] { border-color: var(--border); background: var(--background); color: var(--foreground); }
#bran-resume-app [data-slot="badge"][data-variant="success"] { background: var(--success); color: var(--success-foreground); }
#bran-resume-app [data-slot="badge"][data-variant="warning"] { background: var(--warning); color: var(--warning-foreground); }

#bran-resume-app [data-slot="input"],
#bran-resume-app [data-slot="textarea"],
#bran-resume-app [data-slot="select"] {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 2px oklch(0 0 0 / .03);
    font-size: 13px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

#bran-resume-app [data-slot="input"],
#bran-resume-app [data-slot="select"] { min-height: 36px; padding: 7px 10px; }
#bran-resume-app [data-slot="textarea"] { min-height: 88px; padding: 9px 10px; line-height: 1.5; resize: vertical; }
#bran-resume-app [data-slot="input"]::placeholder,
#bran-resume-app [data-slot="textarea"]::placeholder { color: var(--muted-foreground); opacity: 1; }
#bran-resume-app [data-slot="input"]:disabled,
#bran-resume-app [data-slot="textarea"]:disabled,
#bran-resume-app [data-slot="select"]:disabled { cursor: not-allowed; opacity: .5; }
#bran-resume-app [data-slot="select-wrapper"] { position: relative; display: block; width: 100%; }
#bran-resume-app [data-slot="select"] { padding-right: 34px; appearance: none; }
#bran-resume-app [data-slot="select-wrapper"] > [data-slot="icon"] { position: absolute; top: 50%; right: 10px; color: var(--muted-foreground); transform: translateY(-50%); }

#bran-resume-app [data-slot="combobox"] { position: relative; min-width: 0; }
#bran-resume-app .bran-ui-combobox-trigger { width: 100%; min-height: 46px; justify-content: space-between; padding: 7px 10px 7px 12px; text-align: left; }
#bran-resume-app .bran-ui-combobox-trigger > [data-slot="icon"] { flex: 0 0 auto; color: var(--muted-foreground); transition: transform 160ms ease; }
#bran-resume-app [data-slot="combobox"].is-open .bran-ui-combobox-trigger > [data-slot="icon"] { transform: rotate(180deg); }
#bran-resume-app [data-slot="combobox-content"] {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 14px 34px oklch(0 0 0 / .16), 0 2px 6px oklch(0 0 0 / .08);
    transform-origin: top center;
    animation: bran-resume-combobox-in 160ms cubic-bezier(.22, 1, .36, 1);
}
#bran-resume-app [data-slot="command"] { min-width: 0; }
#bran-resume-app [data-slot="command"] > [data-slot="input-group"] { margin: 8px; width: calc(100% - 16px); }
#bran-resume-app [data-slot="command-list"] { max-height: 320px; overflow: auto; padding: 0 6px 6px; overscroll-behavior: contain; scrollbar-gutter: stable; }
#bran-resume-app [data-slot="command-group"] { display: grid; gap: 2px; }
#bran-resume-app [data-slot="command-group-heading"] { position: sticky; z-index: 1; top: 0; padding: 7px 8px 5px; background: color-mix(in oklch, var(--popover) 96%, transparent); color: var(--muted-foreground); font-size: 11px; font-weight: 600; line-height: 1.2; }
#bran-resume-app [data-slot="command-item"] { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); cursor: pointer; text-align: left; transition: background-color 140ms ease, color 140ms ease; }
#bran-resume-app [data-slot="command-item"]:hover,
#bran-resume-app [data-slot="command-item"]:focus-visible { outline: 0; background: var(--accent); color: var(--accent-foreground); }
#bran-resume-app [data-slot="command-item"].is-selected { background: var(--secondary); }
#bran-resume-app [data-slot="command-item"] > [data-slot="icon"] { width: 16px; height: 16px; flex: 0 0 auto; color: var(--foreground); }
#bran-resume-app [data-slot="command-empty"] { padding: 24px 14px; color: var(--muted-foreground); font-size: 12px; line-height: 1.45; text-align: center; }
#bran-resume-app [data-slot="command-status"] { padding: 8px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; line-height: 1.4; }
#bran-resume-app [data-slot="command-status"][data-state="error"] { color: var(--destructive); }
@keyframes bran-resume-combobox-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

#bran-resume-app [data-slot="field"] { display: grid; gap: 6px; min-width: 0; }
#bran-resume-app [data-slot="field-label"] { color: var(--foreground); font-size: 12px; font-weight: 500; line-height: 1.3; }
#bran-resume-app [data-slot="field-description"],
#bran-resume-app [data-slot="card-description"],
#bran-resume-app [data-slot="item-description"],
#bran-resume-app [data-slot="empty-description"] { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
#bran-resume-app [data-slot="field-group"] { display: grid; gap: 14px; }
#bran-resume-app [data-slot="field-set"] { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
#bran-resume-app [data-slot="field-legend"] { padding: 0 6px; color: var(--foreground); font-size: 12px; font-weight: 600; }

#bran-resume-app [data-slot="card"] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: 0 1px 2px oklch(0 0 0 / .03);
}

#bran-resume-app [data-slot="card-header"] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 0; }
#bran-resume-app [data-slot="card-title"] { color: var(--card-foreground); font-size: 14px; font-weight: 600; line-height: 1.35; }
#bran-resume-app [data-slot="card-description"] { margin-top: 4px; }
#bran-resume-app [data-slot="card-content"] { min-width: 0; padding: 16px; }
#bran-resume-app [data-slot="card-header"] + [data-slot="card-content"] { padding-top: 14px; }
#bran-resume-app [data-slot="card-footer"] { display: flex; align-items: center; gap: 8px; padding: 0 16px 16px; }
#bran-resume-app [data-slot="card-footer"] > [data-slot="button-group"] { width: 100%; }

#bran-resume-app [data-slot="separator"] { width: 100%; height: 1px; margin: 16px 0; background: var(--border); }

#bran-resume-app [data-slot="item"] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
}

#bran-resume-app [data-slot="item"] + [data-slot="item"] { margin-top: 8px; }
#bran-resume-app [data-slot="item-media"] { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: var(--radius-md); background: var(--muted); color: var(--muted-foreground); }
#bran-resume-app [data-slot="item-content"] { min-width: 0; flex: 1 1 auto; }
#bran-resume-app [data-slot="item-title"] { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#bran-resume-app [data-slot="item-actions"] { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }

#bran-resume-app [data-slot="empty"] { display: grid; min-height: 180px; place-items: center; padding: 28px 18px; text-align: center; }
#bran-resume-app [data-slot="empty-header"] { display: grid; max-width: 360px; justify-items: center; gap: 8px; }
#bran-resume-app [data-slot="empty-media"] { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--radius-xl); background: var(--muted); color: var(--muted-foreground); }
#bran-resume-app [data-slot="empty-media"] [data-slot="icon"] { width: 20px; height: 20px; }
#bran-resume-app [data-slot="empty-title"] { font-size: 15px; font-weight: 600; line-height: 1.35; }
#bran-resume-app [data-slot="empty-content"] { display: grid; width: min(100%, 320px); gap: 12px; margin-top: 18px; }

#bran-resume-app [data-slot="button-group"] { display: inline-flex; align-items: center; gap: 6px; }
#bran-resume-app [data-slot="tooltip"] { position: relative; display: inline-flex; }
#bran-resume-app [data-slot="tooltip-trigger"] { display: inline-flex; }
#bran-resume-app [data-slot="tooltip-content"] {
    position: absolute;
    z-index: 1000;
    left: 50%;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid color-mix(in oklch, var(--border) 78%, transparent);
    border-radius: var(--radius-md);
    background: var(--foreground);
    color: var(--background);
    box-shadow: 0 6px 18px oklch(0 0 0 / .16);
    font-family: var(--resume-ui-font);
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    white-space: nowrap;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}
#bran-resume-app [data-slot="tooltip"][data-side="top"] > [data-slot="tooltip-content"] { bottom: calc(100% + 8px); transform: translate(-50%, 3px); }
#bran-resume-app [data-slot="tooltip"][data-side="bottom"] > [data-slot="tooltip-content"] { top: calc(100% + 8px); transform: translate(-50%, -3px); }
#bran-resume-app [data-slot="tooltip"][data-side="right"] > [data-slot="tooltip-content"] { top: 50%; left: calc(100% + 8px); transform: translate(3px, -50%); }
#bran-resume-app [data-slot="tooltip"][data-side="left"] > [data-slot="tooltip-content"] { top: 50%; right: calc(100% + 8px); left: auto; transform: translate(-3px, -50%); }
#bran-resume-app [data-slot="tooltip"]:hover > [data-slot="tooltip-content"],
#bran-resume-app [data-slot="tooltip"]:focus-within > [data-slot="tooltip-content"] { opacity: 1; visibility: visible; }
#bran-resume-app [data-slot="tooltip"][data-side="top"]:hover > [data-slot="tooltip-content"],
#bran-resume-app [data-slot="tooltip"][data-side="top"]:focus-within > [data-slot="tooltip-content"],
#bran-resume-app [data-slot="tooltip"][data-side="bottom"]:hover > [data-slot="tooltip-content"],
#bran-resume-app [data-slot="tooltip"][data-side="bottom"]:focus-within > [data-slot="tooltip-content"] { transform: translate(-50%, 0); }
#bran-resume-app [data-slot="tooltip"][data-side="right"]:hover > [data-slot="tooltip-content"],
#bran-resume-app [data-slot="tooltip"][data-side="right"]:focus-within > [data-slot="tooltip-content"] { transform: translate(0, -50%); }
#bran-resume-app [data-slot="tooltip"][data-side="left"]:hover > [data-slot="tooltip-content"],
#bran-resume-app [data-slot="tooltip"][data-side="left"]:focus-within > [data-slot="tooltip-content"] { transform: translate(0, -50%); }
#bran-resume-app [data-slot="tooltip-shortcut"] { color: color-mix(in oklch, var(--background) 68%, transparent); font: inherit; font-size: 12px; }
#bran-resume-app [data-slot="toast-viewport"] {
    position: fixed;
    z-index: 100500;
    right: 20px;
    bottom: 20px;
    display: flex;
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
#bran-resume-app [data-slot="toast"] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--popover) 96%, transparent);
    color: var(--popover-foreground);
    box-shadow: 0 16px 40px oklch(0 0 0 / .16), 0 2px 8px oklch(0 0 0 / .08);
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    animation: bran-resume-toast-in 220ms cubic-bezier(.22, 1, .36, 1) both;
    backdrop-filter: blur(12px);
}
#bran-resume-app [data-slot="toast"].is-exiting { animation: bran-resume-toast-out 160ms ease both; }
#bran-resume-app [data-slot="toast-icon"] { display: grid; width: 20px; height: 20px; place-items: center; color: var(--muted-foreground); }
#bran-resume-app [data-slot="toast-icon"] [data-slot="icon"] { width: 18px; height: 18px; }
#bran-resume-app [data-slot="toast"][data-variant="success"] [data-slot="toast-icon"] { color: var(--success-foreground); }
#bran-resume-app [data-slot="toast"][data-variant="warning"] [data-slot="toast-icon"] { color: var(--warning-foreground); }
#bran-resume-app [data-slot="toast"][data-variant="error"] [data-slot="toast-icon"] { color: var(--destructive); }
#bran-resume-app [data-slot="toast-content"] { display: grid; min-width: 0; gap: 2px; padding-top: 1px; }
#bran-resume-app [data-slot="toast-title"] { font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
#bran-resume-app [data-slot="toast-description"] { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.4; text-wrap: pretty; }
#bran-resume-app .bran-ui-toast-close { color: var(--muted-foreground); }
#bran-resume-app .bran-ui-toast-close:hover { color: var(--foreground); }
@keyframes bran-resume-toast-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } }
@keyframes bran-resume-toast-out { to { opacity: 0; transform: translate3d(8px, 0, 0) scale(.985); } }
#bran-resume-app [data-slot="alert-dialog"] { position: fixed; z-index: 110000; inset: 0; display: grid; place-items: center; padding: 24px; }
#bran-resume-app [data-slot="alert-dialog-overlay"] { position: absolute; inset: 0; background: oklch(.145 0 0 / .48); backdrop-filter: blur(2px); }
#bran-resume-app [data-slot="alert-dialog-content"] { position: relative; display: grid; width: min(420px, calc(100vw - 32px)); gap: 20px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 24px 64px oklch(0 0 0 / .24); }
#bran-resume-app [data-slot="alert-dialog-header"] { display: grid; gap: 8px; }
#bran-resume-app [data-slot="alert-dialog-title"] { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
#bran-resume-app [data-slot="alert-dialog-description"] { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
#bran-resume-app [data-slot="alert-dialog-footer"] { display: flex; justify-content: flex-end; gap: 8px; }
#bran-resume-app [data-slot="alert-dialog-footer"] [data-slot="button"] { min-width: 88px; }
#bran-resume-app [data-slot="input-group"] { position: relative; display: flex; min-width: 0; align-items: center; }
#bran-resume-app [data-slot="input-group-addon"] { position: absolute; z-index: 1; display: grid; place-items: center; color: var(--muted-foreground); font-size: 12px; pointer-events: none; }
#bran-resume-app [data-slot="input-group-addon"][data-align="inline-start"] { left: 10px; }
#bran-resume-app [data-slot="input-group-addon"][data-align="inline-end"] { right: 10px; }
#bran-resume-app [data-slot="input-group"]:has([data-align="inline-start"]) [data-slot="input"] { padding-left: 32px; }
#bran-resume-app [data-slot="input-group"]:has([data-align="inline-end"]) [data-slot="input"] { padding-right: 36px; }

#bran-resume-app [data-slot="avatar"] { position: relative; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; border-radius: 999px; }
#bran-resume-app [data-slot="avatar-image"] { width: 100%; height: 100%; object-fit: cover; }
#bran-resume-app [data-slot="avatar-fallback"] { display: grid; width: 100%; height: 100%; place-items: center; }

.bran-resume-shell {
    --resume-rail-width: 56px;
    --resume-left-width: 344px;
    --resume-right-width: 288px;
    min-height: calc(100vh - 32px);
    background: var(--background);
}

.bran-resume-shell.is-app {
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--background);
    overflow: hidden;
}

/* One-time launch choreography mirrors the canonical Rockstar CV editor timeline. */
#bran-resume-app.is-entrance-pending,
.bran-resume-shell.is-entrance-pending {
    opacity: 0;
    pointer-events: none;
    animation: bran-resume-entrance-failsafe 1ms linear 12s forwards;
}

.bran-resume-shell.is-entering {
    overflow: hidden;
}

.bran-resume-shell.is-entering > .bran-resume-topbar {
    animation: bran-resume-enter-header 360ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
}

.bran-resume-shell.is-entering .bran-resume-rail,
.bran-resume-shell.is-entering .bran-resume-left-header,
.bran-resume-shell.is-entering .bran-resume-left-surface {
    animation: bran-resume-enter-panel-left 420ms cubic-bezier(0.16, 1, 0.3, 1) 780ms both;
}

.bran-resume-shell.is-entering .bran-resume-right-header,
.bran-resume-shell.is-entering .bran-resume-right-surface,
.bran-resume-shell.is-entering .bran-resume-right-panel-toggle {
    animation: bran-resume-enter-panel-right 420ms cubic-bezier(0.16, 1, 0.3, 1) 780ms both;
}

.bran-resume-shell.is-entering .bran-resume-canvas-pane {
    animation: bran-resume-enter-artboard 480ms cubic-bezier(0.16, 1, 0.3, 1) 1200ms both;
}

@keyframes bran-resume-enter-header {
    from { opacity: 0; transform: translate3d(0, -16px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bran-resume-enter-panel-left {
    from { opacity: 0; transform: translate3d(-28px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bran-resume-enter-panel-right {
    from { opacity: 0; transform: translate3d(28px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bran-resume-enter-artboard {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bran-resume-entrance-failsafe {
    to { opacity: 1; pointer-events: auto; }
}

.bran-resume-topbar {
    z-index: 20;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 96%, transparent);
    box-shadow: 0 1px 3px oklch(0 0 0 / .04);
    backdrop-filter: blur(12px);
}

#bran-resume-app.is-modal-embedded .bran-resume-topbar {
    padding-right: 58px;
}

.bran-resume-brand { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: var(--radius-lg); background: var(--primary); color: var(--primary-foreground); font-size: 18px; font-weight: 700; letter-spacing: -.04em; }
.bran-resume-identity { display: flex; flex: 0 1 360px; min-width: 150px; align-items: center; gap: 8px; }
#bran-resume-app .bran-resume-title-input { min-width: 0; min-height: 26px; flex: 1 1 auto; padding: 2px 4px; border-color: transparent; background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
#bran-resume-app .bran-resume-title-input:hover:not(:disabled) { border-color: var(--border); background: var(--background); }
.bran-resume-code { display: inline-flex; min-height: 24px; flex: 0 0 auto; align-items: center; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 700; letter-spacing: .035em; line-height: 1; white-space: nowrap; }
.bran-resume-topbar-center { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; }
#bran-resume-app .bran-resume-zoom-select-tooltip {
    padding: 3px;
    border: 1px solid color-mix(in oklch, var(--border) 88%, var(--foreground));
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--muted) 92%, var(--foreground));
}
#bran-resume-app .bran-resume-zoom-select-tooltip > [data-slot="tooltip-trigger"] { display: flex; }
#bran-resume-app .bran-resume-zoom-select-tooltip [data-slot="select-wrapper"] { width: 112px; }
#bran-resume-app [data-slot="select"].bran-resume-zoom-select {
    min-height: 30px;
    height: 30px;
    padding: 0 28px 0 10px;
    border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
    border-radius: calc(var(--radius-md) - 1px);
    background: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 3px oklch(0 0 0 / .12);
    cursor: pointer;
    font-family: var(--resume-ui-font);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -.01em;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
#bran-resume-app [data-slot="select"].bran-resume-zoom-select:hover { border-color: color-mix(in oklch, var(--border) 62%, var(--foreground)); background: color-mix(in oklch, var(--background) 92%, var(--muted)); }
#bran-resume-app .bran-resume-zoom-select-tooltip [data-slot="select-wrapper"] > [data-slot="icon"] { right: 8px; width: 14px; height: 14px; color: var(--foreground); }
#bran-resume-app .bran-resume-focus-tooltip {
    padding: 3px;
    border: 1px solid color-mix(in oklch, var(--border) 88%, var(--foreground));
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--muted) 92%, var(--foreground));
}
#bran-resume-app .bran-resume-focus-tooltip > [data-slot="tooltip-trigger"] { display: flex; }
#bran-resume-app .bran-resume-focus-control[data-slot="button"] {
    width: 44px;
    min-width: 44px;
    min-height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-md) - 1px);
    background: transparent;
    color: var(--foreground);
    box-shadow: none;
}
#bran-resume-app .bran-resume-focus-control[data-slot="button"]:hover { border-color: color-mix(in oklch, var(--border) 65%, var(--foreground)); background: color-mix(in oklch, var(--background) 78%, var(--muted)); }
#bran-resume-app .bran-resume-focus-control[data-slot="button"][aria-pressed="true"] { border-color: color-mix(in oklch, var(--border) 65%, var(--foreground)); background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px oklch(0 0 0 / .16); }
#bran-resume-app .bran-resume-focus-control [data-slot="icon"] { width: 18px; height: 18px; }
#bran-resume-app .bran-resume-focus-tooltip[data-side="bottom"] > [data-slot="tooltip-content"] {
    top: calc(100% + 12px);
    min-height: 32px;
    gap: 4px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-lg);
    background: oklch(.205 0 0);
    color: oklch(.985 0 0);
    box-shadow: 0 6px 18px oklch(0 0 0 / .22);
    font-size: 12px;
    font-weight: 600;
}
#bran-resume-app .bran-resume-focus-tooltip[data-side="bottom"] > [data-slot="tooltip-content"]::before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    border-right: 5px solid transparent;
    border-bottom: 5px solid oklch(.205 0 0);
    border-left: 5px solid transparent;
    content: "";
    transform: translateX(-50%);
}
#bran-resume-app .bran-resume-focus-tooltip [data-slot="tooltip-shortcut"] { color: inherit; font-size: inherit; font-weight: inherit; }
.bran-resume-topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.bran-resume-identity--profile strong { color: var(--foreground); font-size: 15px; font-weight: 650; }
.bran-resume-history-controls { gap: 0 !important; }
.bran-resume-history-controls > [data-slot="tooltip"]:first-child [data-slot="button"] { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.bran-resume-history-controls > [data-slot="tooltip"]:last-child [data-slot="button"] { margin-left: -1px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.bran-resume-history-controls [data-slot="tooltip-trigger"] { display: flex; }
.bran-resume-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.bran-resume-workspace {
    position: relative;
    display: grid;
    grid-template: 56px minmax(0, 1fr) / var(--resume-rail-width) var(--resume-left-width) minmax(0, 1fr) var(--resume-right-width);
    grid-template-areas: "rail left-header canvas right-header" "rail left canvas right";
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-columns 240ms cubic-bezier(.22, 1, .36, 1);
}

#bran-resume-app .bran-resume-rail {
    grid-area: rail;
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--muted);
}

#bran-resume-app .bran-resume-rail [data-slot="tabs-trigger"] {
    position: relative;
    display: flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    font: inherit;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

#bran-resume-app .bran-resume-rail-tooltip,
#bran-resume-app .bran-resume-rail-tooltip > [data-slot="tooltip-trigger"] { width: 100%; align-items: center; justify-content: center; }
#bran-resume-app .bran-resume-rail-tooltip > [data-slot="tooltip-content"] { font-size: 12px; font-weight: 600; }
#bran-resume-app .bran-resume-rail:has([data-left-tab]:focus-visible) .bran-resume-rail-tooltip:not(:focus-within):hover > [data-slot="tooltip-content"] { opacity: 0; visibility: hidden; }
#bran-resume-app .bran-resume-rail [data-slot="tabs-trigger"] [data-slot="icon"] { width: 20px; height: 20px; }

#bran-resume-app .bran-resume-rail [data-slot="tabs-trigger"]:hover { background: color-mix(in oklch, var(--background) 72%, transparent); color: var(--foreground); }
#bran-resume-app .bran-resume-rail [data-slot="tabs-trigger"].is-selected { border-color: var(--border); background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px oklch(0 0 0 / .05); }
#bran-resume-app .bran-resume-rail [data-slot="tabs-trigger"].is-selected::before { position: absolute; left: 0; width: 3px; height: 24px; border-radius: 0 999px 999px 0; background: var(--primary); content: ""; }
.bran-resume-rail-spacer { flex: 1 1 auto; }
#bran-resume-app .bran-resume-panel-toggle-tooltip { z-index: 16; }
#bran-resume-app .bran-resume-left-panel-toggle { width: 100%; align-items: center; justify-content: center; }
#bran-resume-app .bran-resume-panel-toggle-button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--background) 94%, transparent);
    color: var(--muted-foreground);
    box-shadow: 0 2px 8px oklch(0 0 0 / .08);
    backdrop-filter: blur(10px);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
#bran-resume-app .bran-resume-panel-toggle-button:hover {
    border-color: var(--border);
    background: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 3px oklch(0 0 0 / .09);
}
#bran-resume-app .bran-resume-panel-toggle-button [data-slot="icon"] { width: 17px; height: 17px; }
#bran-resume-app .bran-resume-right-panel-toggle {
    position: absolute;
    right: 10px;
    bottom: 8px;
}

.bran-resume-left-header {
    grid-area: left-header;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    /* Match the 12px panel inset plus the 16px card-content inset below. */
    padding: 10px 28px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--background);
    overflow: hidden;
    transform: translateX(0);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear;
}

.bran-resume-left-header h2 { color: var(--foreground); font-size: 14px; font-weight: 600; line-height: 1.2; }
.bran-resume-left-header p { margin-top: 2px !important; color: var(--muted-foreground); font-size: 11px; line-height: 1.2; }

.bran-resume-left-surface {
    grid-area: left;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    border-right: 1px solid var(--border);
    background: color-mix(in oklch, var(--muted) 52%, var(--background));
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    transform: translateX(0);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear;
}

.bran-resume-left-surface:not(.is-active) { display: none; }
.bran-resume-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bran-resume-section-heading h3 { color: var(--foreground); font-size: 12px; font-weight: 600; }

.bran-resume-profile-picker { width: 100%; justify-content: flex-start; min-height: 56px; text-align: left; }
.bran-resume-profile-picker > span { display: grid; min-width: 0; gap: 2px; }
.bran-resume-profile-picker strong,
.bran-resume-profile-picker small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bran-resume-profile-picker small { color: var(--muted-foreground); font-size: 11px; font-weight: 400; }
#bran-resume-app .bran-resume-profile-new { width: 100%; }
.bran-resume-profile-workspace { grid-area: profile; min-width: 0; min-height: 0; overflow: auto; background: var(--canvas-background); overscroll-behavior: contain; }
.bran-resume-profile-content { display: grid; width: min(1120px, 100%); margin: 0 auto; gap: 18px; padding: 28px clamp(20px, 4vw, 54px) 64px; }
.bran-resume-profile-actions { position: sticky; z-index: 8; top: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in oklch, var(--background) 94%, transparent); box-shadow: 0 4px 16px oklch(0 0 0 / .08); backdrop-filter: blur(12px); }
.bran-resume-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.bran-resume-profile-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bran-resume-profile-section [data-slot="card-description"] { min-height: 34px; }
.bran-resume-profile-photo-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; }
.bran-resume-profile-photo-row > img,
.bran-resume-profile-photo-placeholder { display: grid; width: 88px; height: 88px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--muted); color: var(--muted-foreground); object-fit: cover; overflow: hidden; }
.bran-resume-profile-photo-placeholder .bran-ui-icon { width: 34px; height: 34px; }
.bran-resume-shell.is-profile-mode .bran-resume-workspace { grid-template: 56px minmax(0, 1fr) / var(--resume-rail-width) var(--resume-left-width) minmax(0, 1fr); grid-template-areas: "rail left-header profile" "rail left profile"; }
.bran-resume-shell.is-profile-mode.is-left-collapsed .bran-resume-workspace { grid-template-columns: var(--resume-rail-width) 0 minmax(0, 1fr); }

.bran-resume-right-header {
    grid-area: right-header;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: var(--background);
    overflow: hidden;
    transform: translateX(0);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear;
}

.bran-resume-right-header h2 { color: var(--foreground); font-size: 14px; font-weight: 600; line-height: 1.2; }
.bran-resume-right-header p { margin-top: 2px !important; color: var(--muted-foreground); font-size: 12px; line-height: 1.2; }
.bran-resume-right-header-actions { gap: 2px !important; }
.bran-resume-right-surface { grid-area: right; min-width: 0; min-height: 0; overflow: auto; padding: 18px 16px 68px; border-left: 1px solid var(--border); background: var(--background); overscroll-behavior: contain; scrollbar-gutter: stable; transform: translateX(0); transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear; }
#bran-resume-app .bran-resume-properties-empty { min-height: 280px; }
.bran-resume-properties-multi-layout { display: grid; gap: 20px; }
#bran-resume-app .bran-resume-properties-multi-layout .bran-resume-properties-multi { min-height: 0; padding: 8px 4px 0; }
#bran-resume-app .bran-resume-properties-multi-layout .bran-resume-properties-multi [data-slot="empty-content"] { margin-top: 12px; }
#bran-resume-app .bran-resume-selection-arrange { display: grid; gap: 14px; }
#bran-resume-app .bran-resume-selection-arrange > [data-slot="field-description"] { margin-bottom: 2px; }
.bran-resume-arrange-row { display: grid; gap: 8px; }
.bran-resume-arrange-row > span { color: var(--muted-foreground); font-size: 12px; font-weight: 500; line-height: 1.2; }
#bran-resume-app .bran-resume-arrange-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
#bran-resume-app .bran-resume-distribute-grid { display: grid; grid-template-columns: repeat(2, 32px); justify-content: start; gap: 8px; }
#bran-resume-app .bran-resume-arrange-grid [data-slot="tooltip"],
#bran-resume-app .bran-resume-distribute-grid [data-slot="tooltip"],
#bran-resume-app .bran-resume-arrange-button { width: 100%; }
.bran-resume-object-properties { display: grid; gap: 20px; }
#bran-resume-app .bran-resume-object-property-section { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; }
#bran-resume-app .bran-resume-object-property-section [data-slot="field-legend"] { padding: 0; font-size: 14px; font-weight: 600; }
#bran-resume-app .bran-resume-object-property-section > [data-slot="field-description"] { margin: 5px 0 16px; }
#bran-resume-app .bran-resume-object-property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
#bran-resume-app .bran-resume-property-field.is-wide { grid-column: 1 / -1; }
#bran-resume-app .bran-resume-property-field [data-slot="input"] { font-variant-numeric: tabular-nums; }
#bran-resume-app .bran-resume-color-control { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; }
#bran-resume-app .bran-resume-color-control [data-slot="input"][type="color"] { width: 42px; min-height: 36px; padding: 4px; cursor: pointer; }
#bran-resume-app .bran-resume-color-control [data-slot="input"][type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#bran-resume-app .bran-resume-color-control [data-slot="input"][type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--radius-sm); }
#bran-resume-app .bran-resume-property-action { width: 100%; }
#bran-resume-app .bran-resume-object-property-separator { margin: 0; }
#bran-resume-app .bran-resume-font-trigger-copy { display: grid; min-width: 0; gap: 2px; }
#bran-resume-app .bran-resume-font-trigger-copy strong { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
#bran-resume-app .bran-resume-font-trigger-copy small { color: var(--muted-foreground); font-family: var(--resume-ui-font); font-size: 11px; font-weight: 400; line-height: 1.1; }
#bran-resume-app .bran-resume-font-search [data-slot="input"] { min-height: 36px; padding-left: 34px; font-size: 12px; }
#bran-resume-app .bran-resume-font-option-copy { display: grid; min-width: 0; gap: 3px; }
#bran-resume-app .bran-resume-font-option-copy strong { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
#bran-resume-app .bran-resume-font-option-copy small { color: var(--muted-foreground); font-family: var(--resume-ui-font); font-size: 11px; font-weight: 400; line-height: 1.15; text-transform: capitalize; }

.bran-resume-element-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bran-resume-app .bran-resume-element-card { min-height: 104px; flex-direction: column; gap: 5px; padding: 12px 6px; white-space: normal; }
#bran-resume-app .bran-resume-element-card:hover { border-color: color-mix(in oklch, var(--editor-selection) 45%, var(--border)); background: var(--editor-selection-soft); }
#bran-resume-app .bran-resume-element-card:focus-visible,
#bran-resume-app .bran-resume-icon-option:focus-visible { border-color: var(--editor-selection); box-shadow: 0 0 0 3px color-mix(in oklch, var(--editor-selection) 20%, transparent); }
#bran-resume-app .bran-resume-element-card.is-selected { border-color: var(--editor-selection); background: var(--editor-selection-soft); }
.bran-resume-element-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--radius-lg); background: var(--muted); color: var(--foreground); }
.bran-resume-element-icon [data-slot="icon"],
.bran-resume-element-icon svg { width: 18px !important; height: 18px !important; }
.bran-resume-element-card strong { font-size: 12px; font-weight: 600; }
.bran-resume-element-card small { color: var(--muted-foreground); font-size: 11px; line-height: 1.25; }
.bran-resume-colors-panel { margin-top: 12px; }
.bran-resume-color-set { display: grid; gap: 12px; }
.bran-resume-color-set-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bran-resume-color-set-heading h3 { color: var(--foreground); font-size: 12px; font-weight: 650; line-height: 1.3; }
.bran-resume-color-set-heading p { margin-top: 3px; color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }
.bran-resume-color-count { display: inline-grid; min-width: 24px; height: 24px; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.bran-resume-document-color-list { display: grid; gap: 7px; }
.bran-resume-document-color { display: grid; grid-template-columns: 34px minmax(0, 1fr) 84px; gap: 8px; align-items: center; min-width: 0; padding: 7px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); }
#bran-resume-app .bran-resume-document-color-swatch { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
#bran-resume-app .bran-resume-document-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
#bran-resume-app .bran-resume-document-color-swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }
.bran-resume-document-color-copy { display: grid; min-width: 0; gap: 2px; }
.bran-resume-document-color-copy strong { overflow: hidden; color: var(--foreground); font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; }
.bran-resume-document-color-copy span { color: var(--muted-foreground); font-size: 10px; line-height: 1.2; }
#bran-resume-app .bran-resume-document-color-hex { min-width: 0; height: 32px; padding: 6px 7px; font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.bran-resume-palette-list { display: grid; gap: 8px; }
.bran-resume-palette { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.bran-resume-palette-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.bran-resume-palette h4 { color: var(--foreground); font-size: 12px; font-weight: 650; line-height: 1.25; }
.bran-resume-palette p { margin-top: 3px; color: var(--muted-foreground); font-size: 10px; line-height: 1.4; }
.bran-resume-palette-swatches { display: flex; gap: 3px; padding-top: 1px; }
.bran-resume-palette-swatch { display: block; width: 15px; height: 15px; border: 1px solid color-mix(in oklch, var(--border) 80%, transparent); border-radius: 999px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--background) 60%, transparent); }
#bran-resume-app .bran-resume-palette [data-action="apply-color-palette"] { width: 100%; }
.bran-resume-icon-picker { display: grid; gap: 12px; min-width: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.bran-resume-icon-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bran-resume-icon-picker-heading h3 { margin: 0; color: var(--foreground); font-size: 14px; font-weight: 600; }
.bran-resume-icon-picker-heading p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.4; }
#bran-resume-app .bran-resume-icon-search [data-slot="input"] { min-height: 36px; padding-left: 34px; font-size: 12px; }
.bran-resume-icon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 292px; overflow: auto; padding: 2px; scrollbar-gutter: stable; }
.bran-resume-icon-scope { grid-column: 1 / -1; margin: 0; padding: 2px 2px 4px; color: var(--muted-foreground); font-size: 12px; line-height: 1.4; }
#bran-resume-app .bran-resume-icon-option { position: relative; min-width: 0; min-height: 68px; flex-direction: column; gap: 7px; padding: 9px 6px; color: var(--foreground); font-size: 12px; font-weight: 500; white-space: normal; }
#bran-resume-app .bran-resume-icon-option:hover { border-color: color-mix(in oklch, var(--editor-selection) 45%, var(--border)); background: var(--editor-selection-soft); }
#bran-resume-app .bran-resume-icon-option:active { transform: translateY(1px); }
#bran-resume-app .bran-resume-icon-option.is-selected { border-color: var(--editor-selection); background: var(--editor-selection-soft); }
#bran-resume-app .bran-resume-icon-option:disabled { opacity: .55; cursor: not-allowed; }
.bran-resume-icon-preview { display: grid; width: 24px; height: 24px; place-items: center; color: var(--foreground); }
.bran-resume-icon-preview svg { width: 24px; height: 24px; }
.bran-resume-icon-selected { position: absolute; top: 6px; right: 6px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 999px; background: var(--editor-selection); color: var(--primary-foreground); }
.bran-resume-icon-selected [data-slot="icon"] { width: 10px !important; height: 10px !important; }
.bran-resume-icon-empty { display: grid; grid-column: 1 / -1; min-height: 116px; place-items: center; align-content: center; gap: 5px; padding: 20px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted-foreground); text-align: center; }
.bran-resume-icon-empty [data-slot="icon"] { width: 20px; height: 20px; }
.bran-resume-icon-empty strong { color: var(--foreground); font-size: 13px; font-weight: 600; }
.bran-resume-icon-empty span { font-size: 12px; }

.bran-resume-template-discovery { display: grid; gap: 10px; }
.bran-resume-template-filters { width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.bran-resume-template-filters [data-slot="button"] { flex: 1 0 auto; }
.bran-resume-template-list { display: grid; gap: 16px; margin-top: 12px; }
.bran-resume-template-group { display: grid; gap: 8px; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#bran-resume-app .bran-resume-template-group > [data-slot="item"] { margin-top: 0; }
#bran-resume-app .bran-resume-template-card { align-items: stretch; padding: 6px; }
#bran-resume-app .bran-resume-template-card.is-selected {
    border-color: var(--foreground);
    box-shadow: 0 0 0 1px var(--foreground);
}
#bran-resume-app .bran-resume-template-card > [data-slot="item-content"] { display: grid; }
#bran-resume-app .bran-resume-template { width: 100%; min-width: 0; min-height: 0; justify-content: start; padding: 6px; text-align: center; white-space: normal; display: grid; gap: 8px; }
.bran-resume-template-thumbnail,
.bran-resume-template-placeholder { display: grid; width: 100%; aspect-ratio: 3 / 4; height: auto; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground); object-fit: cover; }
.bran-resume-template-copy { display: grid; min-width: 0; gap: 3px; text-align: center; }
.bran-resume-template-copy strong { overflow: hidden; color: var(--foreground); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bran-resume-template-copy small { display: -webkit-box; overflow: hidden; color: var(--muted-foreground); font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bran-resume-template-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bran-resume-template-tools { display: grid; gap: 10px; }
.bran-resume-template-tool-actions { width: 100%; }
.bran-resume-template-tool-actions [data-slot="button"] { flex: 1 1 auto; }
.bran-resume-template-card--archived { border-style: dashed !important; opacity: .82; }
.bran-resume-archived-templates { display: grid; gap: 10px; margin-top: 16px; }

.bran-resume-grid-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bran-resume-sections [data-slot="card-content"] { display: grid; gap: 14px; }
.bran-resume-section { display: grid; gap: 14px; }
.bran-resume-section .bran-resume-item { display: grid; gap: 12px; background: color-mix(in oklch, var(--muted) 55%, var(--background)); }
.bran-resume-resources { display: grid; gap: 12px; margin-top: 12px; }
.bran-resume-layout-controls { display: grid; gap: 16px; }
.bran-resume-resources-heading { display: grid; gap: 3px; }
.bran-resume-resources-heading h3 { color: var(--foreground); font-size: 14px; font-weight: 650; line-height: 1.3; }
.bran-resume-resources-heading p { color: var(--muted-foreground); font-size: 12px; line-height: 1.45; }
.bran-resume-resource-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
#bran-resume-app .bran-resume-resource-card { height: 100%; margin-bottom: 0; }
#bran-resume-app .bran-resume-resource-card [data-slot="card-content"] { display: flex; min-height: 112px; align-items: flex-start; }
.bran-resume-resource-content { display: grid; width: 100%; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.bran-resume-resource-media { display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-md); background: var(--muted); color: var(--foreground); }
.bran-resume-resource-media [data-slot="icon"] { width: 16px; height: 16px; }
.bran-resume-resource-copy { display: grid; gap: 5px; min-width: 0; }
.bran-resume-resource-copy p { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.bran-resume-resource-copy .bran-resume-resource-eyebrow { color: var(--foreground); font-size: 11px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }
.bran-resume-page-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bran-resume-app .bran-resume-page-tabs [data-slot="tabs-trigger"] { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--muted-foreground); cursor: pointer; font-size: 12px; font-weight: 500; }
#bran-resume-app .bran-resume-page-tabs [data-slot="tabs-trigger"].is-active { border-color: var(--foreground); color: var(--foreground); box-shadow: 0 0 0 1px var(--foreground); }
.bran-resume-pages-panel [data-slot="button-group"] [data-slot="button"] { flex: 1 1 auto; }

.bran-resume-designer-panel [data-slot="card-content"] { display: grid; gap: 16px; }
#bran-resume-app .bran-resume-designer-action { width: 100%; min-height: 40px; }
.bran-resume-designer-result { display: grid; gap: 14px; margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); color: var(--foreground); }
.bran-resume-designer-result-heading,
.bran-resume-designer-result.is-tidy { grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start; }
.bran-resume-designer-result-heading { display: grid; }
.bran-resume-designer-result > [data-slot="icon"],
.bran-resume-designer-result-heading > [data-slot="icon"] { width: 17px; height: 17px; margin-top: 1px; color: var(--primary); }
.bran-resume-designer-result strong { font-size: 13px; font-weight: 650; line-height: 1.4; }
.bran-resume-designer-result p { margin-top: 2px; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.bran-resume-designer-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--border); }
.bran-resume-designer-metric { display: grid; gap: 2px; padding: 10px 8px; }
.bran-resume-designer-metric:nth-child(odd) { border-right: 1px solid var(--border); }
.bran-resume-designer-metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.bran-resume-designer-metric strong { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bran-resume-designer-metric span { color: var(--muted-foreground); font-size: 12px; line-height: 1.35; }
.bran-resume-designer-result-details { margin-top: 0 !important; }

.bran-resume-upload-drop { display: flex; min-height: 132px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius-xl); background: color-mix(in oklch, var(--muted) 55%, var(--background)); color: var(--muted-foreground); text-align: center; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.bran-resume-upload-drop:hover { border-color: var(--ring); background: var(--accent); }
.bran-resume-upload-drop.is-selected { border-style: solid; border-color: color-mix(in oklch, var(--success-foreground) 42%, var(--border)); background: var(--success); }
.bran-resume-upload-drop.is-selected:hover { border-color: color-mix(in oklch, var(--success-foreground) 62%, var(--border)); background: color-mix(in oklch, var(--success) 88%, var(--background)); }
.bran-resume-upload-drop [data-slot="input"] { position: absolute; width: 1px; height: 1px; min-height: 1px; padding: 0; opacity: 0; }

.bran-resume-ai-panel [data-slot="card-content"] { display: grid; gap: 16px; }
.bran-resume-ai-panel [data-slot="field-group"] { gap: 12px; }
.bran-resume-ai-panel [data-slot="textarea"] { min-height: 180px; }
.bran-resume-ai-paid-notice { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 12px; padding: 12px; border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--primary) 6%, var(--background)); color: var(--foreground); }
.bran-resume-ai-paid-notice-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-md); background: color-mix(in oklch, var(--primary) 10%, var(--background)); color: var(--primary); }
.bran-resume-ai-paid-notice-icon > [data-slot="icon"] { width: 16px; height: 16px; }
.bran-resume-ai-paid-notice strong { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 650; line-height: 1.35; }
.bran-resume-ai-paid-notice p { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.bran-resume-ai-consent { display: grid !important; grid-template: auto / 18px minmax(0, 1fr); gap: 9px !important; align-items: start; color: var(--foreground); cursor: pointer; }
.bran-resume-ai-consent > [data-slot="field-label"] { grid-area: 1 / 2; font-weight: 400 !important; line-height: 1.45 !important; }
.bran-resume-ai-consent > [data-slot="input"] { grid-area: 1 / 1; }
#bran-resume-app .bran-resume-ai-consent-checkbox[data-slot="input"],
#bran-resume-app .bran-resume-ai-edit-checkbox[data-slot="input"] { width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 1px 0 0; padding: 0; accent-color: var(--primary); box-shadow: none; }

#bran-resume-app .bran-ui-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    min-height: 24px;
    cursor: pointer;
}

#bran-resume-app .bran-ui-switch-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 40px;
    min-width: 40px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}

#bran-resume-app [data-slot="switch-track"] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--input);
    transition: border-color .15s ease, background-color .15s ease;
}

#bran-resume-app [data-slot="switch-thumb"] {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--background);
    border: 1px solid color-mix(in oklch, var(--border) 65%, transparent);
    box-shadow: 0 1px 2px oklch(0 0 0 / .2);
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

#bran-resume-app [data-slot="switch-track"],
#bran-resume-app [data-slot="switch-thumb"] { pointer-events: none; }

#bran-resume-app .bran-ui-switch-input:focus-visible + [data-slot="switch-track"] {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
}

#bran-resume-app .bran-ui-switch-input:checked + [data-slot="switch-track"] [data-slot="switch-thumb"] {
    transform: translateX(16px);
    border-color: color-mix(in oklch, var(--primary-foreground) 20%, var(--primary));
    background: color-mix(in oklch, var(--primary) 12%, var(--primary-foreground));
}

#bran-resume-app .bran-ui-switch-input:checked + [data-slot="switch-track"] {
    border-color: var(--primary);
    background: var(--primary);
}

#bran-resume-app .bran-ui-switch-input:not(:checked) + [data-slot="switch-track"] [data-slot="switch-thumb"] { transform: translateX(0); }

#bran-resume-app .bran-ui-switch-input:disabled {
    cursor: not-allowed;
}

#bran-resume-app .bran-ui-switch-input:disabled + [data-slot="switch-track"] { opacity: 0.5; }
.bran-resume-ai-privacy { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--muted); }
.bran-resume-ai-privacy > [data-slot="icon"] { width: 16px; height: 16px; margin: 2px auto 0; color: var(--muted-foreground); }
.bran-resume-ai-privacy strong { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; }
.bran-resume-ai-privacy p { color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
.bran-resume-ai-error { padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--destructive) 38%, var(--border)); border-radius: var(--radius-md); background: color-mix(in oklch, var(--destructive) 7%, var(--background)); color: var(--destructive); font-size: 12px; line-height: 1.45; }
.bran-resume-ai-panel [data-action="ai-analyze"] { width: 100%; }
.bran-resume-ai-result { display: grid; gap: 12px; padding-bottom: 16px; }
.bran-resume-ai-score-summary { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: 0 1px 2px oklch(0 0 0 / .03); }
.bran-resume-ai-score-value { display: grid; width: 72px; height: 72px; place-content: center; border: 1px solid var(--border); border-radius: 999px; background: var(--muted); text-align: center; }
.bran-resume-ai-score-value strong { display: block; font-size: 24px; font-weight: 680; line-height: 1; letter-spacing: -.03em; }
.bran-resume-ai-score-value span { margin-top: 4px; color: var(--muted-foreground); font-size: 10px; }
.bran-resume-ai-score-summary h3 { margin-bottom: 5px; font-size: 14px; font-weight: 650; line-height: 1.25; }
.bran-resume-ai-score-summary p { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.bran-resume-ai-score-breakdown { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.bran-resume-ai-score-row { display: grid; gap: 5px; }
.bran-resume-ai-score-row > div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted-foreground); font-size: 11px; }
.bran-resume-ai-score-row strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.bran-resume-ai-score-track { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: var(--secondary); }
.bran-resume-ai-score-track > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.bran-resume-ai-list, .bran-resume-ai-keywords { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.bran-resume-ai-list h3, .bran-resume-ai-keywords h3, .bran-resume-ai-review-heading h3 { margin-bottom: 8px; font-size: 12px; font-weight: 650; }
.bran-resume-ai-list ul { display: grid; gap: 7px; margin: 0; padding: 0 0 0 16px; }
.bran-resume-ai-list li { color: var(--muted-foreground); font-size: 12px; line-height: 1.45; }
.bran-resume-ai-keywords > div { display: flex; flex-wrap: wrap; gap: 6px; }
.bran-resume-ai-keywords [data-slot="badge"] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bran-resume-ai-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px 0; }
.bran-resume-ai-review-heading h3 { margin: 0; }
.bran-resume-ai-review-heading p { margin-top: 2px; color: var(--muted-foreground); font-size: 11px; }
.bran-resume-ai-edit { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.bran-resume-ai-edit-toggle { display: grid !important; grid-template: auto / 18px minmax(0, 1fr); gap: 8px !important; align-items: center; cursor: pointer; }
.bran-resume-ai-edit-toggle > [data-slot="field-label"] { grid-area: 1 / 2; font-weight: 600 !important; }
.bran-resume-ai-edit-toggle > [data-slot="input"] { grid-area: 1 / 1; }
.bran-resume-ai-edit-copy { display: grid; gap: 5px; }
.bran-resume-ai-edit-copy > span { color: var(--muted-foreground); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bran-resume-ai-edit-copy > p { padding: 9px 10px; border-radius: var(--radius-md); background: var(--muted); color: var(--foreground); font-size: 12px; line-height: 1.48; white-space: pre-wrap; }
.bran-resume-ai-rationale { color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }
.bran-resume-ai-apply { display: grid; gap: 8px; padding: 4px 2px 0; }
.bran-resume-ai-apply [data-action="ai-apply"] { width: 100%; }
.bran-resume-ai-apply > p { color: var(--muted-foreground); font-size: 11px; line-height: 1.45; text-align: center; }
.bran-resume-upload-drop [data-slot="attachment-media"] { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--radius-lg); background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px oklch(0 0 0 / .05); }
.bran-resume-upload-drop.is-selected [data-slot="attachment-media"] { color: var(--success-foreground); }
.bran-resume-upload-drop [data-slot="attachment-content"] { display: grid; min-width: 0; max-width: 100%; justify-items: center; gap: 3px; }
.bran-resume-upload-drop [data-slot="attachment-title"] { max-width: 100%; color: var(--foreground); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.bran-resume-upload-drop [data-slot="attachment-description"] { color: var(--muted-foreground); font-size: 11px; }
.bran-resume-upload-drop.is-selected [data-slot="attachment-description"] { color: var(--success-foreground); font-weight: 550; }
#bran-resume-app .bran-resume-import-file-button { width: 100%; margin-top: 10px; }

.bran-resume-canvas-pane { grid-area: canvas; display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--canvas-background); }
.bran-resume-canvas-toolbar { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--background); }
.bran-resume-canvas-toolbar > div { display: flex; align-items: center; gap: 8px; }
.bran-resume-canvas-toolbar strong { font-size: 13px; font-weight: 600; }
.bran-resume-canvas-size { color: var(--muted-foreground); font-size: 12px; }
.bran-resume-canvas-scroll { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; cursor: default; overscroll-behavior: contain; }
.bran-resume-canvas-scroll:active { cursor: grabbing; }
.bran-resume-canvas { min-width: max-content; min-height: 100%; padding: 36px 48px 96px; background-color: var(--canvas-background); background-image: radial-gradient(var(--canvas-dot) .8px, transparent .8px); background-size: 16px 16px; }
.bran-resume-canvas-stage { width: max-content; min-width: 100%; transform-origin: top center; zoom: var(--resume-canvas-zoom, 1); }
.bran-resume-page { position: relative; width: var(--resume-page-width); height: var(--resume-page-height); margin: 0 auto 32px; overflow: hidden; border: 1px solid color-mix(in oklch, var(--border) 80%, transparent); background: var(--resume-page-bg, #fff); box-shadow: 0 12px 30px oklch(0 0 0 / .14), 0 2px 6px oklch(0 0 0 / .08); transition: border-color 150ms ease, box-shadow 150ms ease; }
.bran-resume-page.is-active-page { border-color: color-mix(in oklch, var(--editor-selection) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklch, var(--editor-selection) 45%, transparent), 0 12px 30px oklch(0 0 0 / .14), 0 2px 6px oklch(0 0 0 / .08); }
.bran-resume-page.is-drop-target { border-color: var(--editor-selection); box-shadow: 0 0 0 4px color-mix(in oklch, var(--editor-selection) 18%, transparent), 0 16px 36px oklch(0 0 0 / .16), 0 2px 6px oklch(0 0 0 / .08); }
.bran-resume-page.is-image-drop-target { border-color: var(--editor-selection); box-shadow: 0 0 0 4px color-mix(in oklch, var(--editor-selection) 22%, transparent), 0 16px 36px oklch(0 0 0 / .16), 0 2px 6px oklch(0 0 0 / .08); }
.bran-resume-page.is-image-drop-target::before { position: absolute; z-index: 300000; inset: 12px; display: grid; place-items: center; border: 2px dashed color-mix(in oklch, var(--editor-selection) 70%, var(--background)); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--editor-selection) 12%, var(--background)); color: color-mix(in oklch, var(--editor-selection) 72%, var(--foreground)); content: "Drop image to add"; font-size: 14px; font-weight: 650; letter-spacing: -.01em; pointer-events: none; }
.bran-resume-page-object-layer { position: absolute; inset: 0; }

.bran-resume-document { color: #111827; font-family: Arial, sans-serif; }
.bran-resume-object { position: absolute; z-index: 1; overflow: visible; margin: 0; padding: 0; box-sizing: border-box; white-space: pre-wrap; word-break: break-word; touch-action: none; user-select: none; }
#bran-resume-app .bran-resume-object:not(.is-locked) { cursor: move; }
.bran-resume-frame-content { position: absolute; z-index: 0; inset: 0; display: block; overflow: hidden; box-sizing: border-box; }
.bran-resume-frame-content--image { border-radius: inherit; }
.bran-resume-frame-content--image img { display: block; width: 100%; height: 100%; pointer-events: none; }
.bran-resume-frame-content--icon svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.bran-resume-frame-content--line svg { display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.bran-resume-frame-content--shape { pointer-events: none; }
.bran-resume-shape--ellipse .bran-resume-frame-content--shape { border-radius: 50% !important; }
.bran-resume-shape--line .bran-resume-frame-content--shape { background: transparent !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; }
[data-slot="editable"].bran-resume-text-content { width: 100%; height: 100%; overflow: hidden; white-space: inherit; word-break: inherit; }
[data-slot="editable"].bran-resume-text-content[contenteditable="true"] { overflow: auto; outline: 2px solid var(--editor-selection); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklch, var(--editor-selection) 20%, transparent); cursor: text; touch-action: auto; user-select: text; }
.bran-resume-object.is-text-editing { touch-action: auto; }
.bran-resume-object.is-selected:not(.is-group-member-selected) { z-index: 100000 !important; overflow: visible; outline: 1px solid var(--editor-selection); outline-offset: 1px; }
.bran-resume-object.is-selected:not(.is-group-member-selected)::after { position: absolute; inset: -2px; border: 1px dashed var(--editor-selection); content: ""; pointer-events: none; }
.bran-resume-object.is-selection-primary:not(.is-group-member-selected) { z-index: 100001 !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--editor-selection) 14%, transparent); }
.bran-resume-object.is-group-member-selected { outline: 0; box-shadow: none; }
.bran-resume-group-selection { position: absolute; z-index: 100002; box-sizing: border-box; border: 1px solid var(--editor-selection); outline: 1px dashed color-mix(in oklch, var(--editor-selection) 76%, transparent); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklch, var(--editor-selection) 12%, transparent); pointer-events: none; }
.bran-resume-group-overlay-label { position: absolute; top: -26px; left: -3px; display: flex; height: 22px; align-items: stretch; gap: 4px; pointer-events: none; }
.bran-resume-group-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-sm); background: var(--editor-selection); color: var(--primary-foreground); font: 650 12px/1.4 var(--resume-ui-font); letter-spacing: normal; white-space: nowrap; }
#bran-resume-app [data-slot="button"].bran-resume-group-drag-handle { width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0; border-color: var(--editor-selection); border-radius: var(--radius-sm); background: var(--background); color: var(--editor-selection); box-shadow: 0 1px 2px color-mix(in oklch, var(--foreground) 12%, transparent); cursor: grab; pointer-events: auto; touch-action: none; transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; }
#bran-resume-app [data-slot="button"].bran-resume-group-drag-handle:hover:not(:disabled) { background: color-mix(in oklch, var(--editor-selection) 10%, var(--background)); color: color-mix(in oklch, var(--editor-selection) 88%, var(--foreground)); }
#bran-resume-app [data-slot="button"].bran-resume-group-drag-handle:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent); }
#bran-resume-app [data-slot="button"].bran-resume-group-drag-handle:active:not(:disabled) { background: color-mix(in oklch, var(--editor-selection) 18%, var(--background)); box-shadow: none; cursor: grabbing; transform: none; }
#bran-resume-app [data-slot="button"].bran-resume-group-drag-handle:disabled { cursor: not-allowed; }
#bran-resume-app .bran-resume-group-drag-handle .bran-ui-icon { width: 14px; height: 14px; }
#bran-resume-app .bran-resume-group-selection .bran-resume-frame-toolbar,
#bran-resume-app .bran-resume-group-selection .bran-resume-handle,
#bran-resume-app .bran-resume-group-selection .bran-resume-group-drag-handle { pointer-events: auto; }
.bran-resume-object.is-marquee-preview:not(.is-selected) { outline: 1px dashed var(--editor-selection); outline-offset: 1px; box-shadow: 0 0 0 3px color-mix(in oklch, var(--editor-selection) 10%, transparent); }
.bran-resume-object.is-locked { cursor: pointer; }
.bran-resume-selection-marquee { position: fixed; z-index: 500; border: 1px dashed var(--editor-selection); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--editor-selection) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--background) 55%, transparent) inset; pointer-events: none; }
#bran-resume-app.is-marquee-selecting .bran-resume-canvas-scroll,
#bran-resume-app.is-marquee-selecting .bran-resume-canvas { cursor: crosshair; user-select: none; }
#bran-resume-app [data-slot="button"].bran-resume-handle { position: absolute; z-index: 210; width: 10px; min-width: 10px; height: 10px; min-height: 10px; margin: 0; padding: 0; border: 1px solid var(--editor-selection); border-radius: 2px; background: var(--background); box-shadow: none; appearance: none; transform: translate(-50%, -50%); }
#bran-resume-app .bran-resume-shape--line.is-selected [data-slot="button"].bran-resume-handle { border-radius: 999px; background: color-mix(in oklch, var(--background) 28%, transparent); }
#bran-resume-app [data-slot="button"].bran-resume-handle:active:not(:disabled) { transform: translate(-50%, -50%); }
.bran-resume-handle[data-handle="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.bran-resume-handle[data-handle="n"] { top: 0; left: 50%; cursor: ns-resize; }
.bran-resume-handle[data-handle="ne"] { top: 0; left: 100%; cursor: nesw-resize; }
.bran-resume-handle[data-handle="e"] { top: 50%; left: 100%; cursor: ew-resize; }
.bran-resume-handle[data-handle="se"] { top: 100%; left: 100%; cursor: nwse-resize; }
.bran-resume-handle[data-handle="s"] { top: 100%; left: 50%; cursor: ns-resize; }
.bran-resume-handle[data-handle="sw"] { top: 100%; left: 0; cursor: nesw-resize; }
.bran-resume-handle[data-handle="w"] { top: 50%; left: 0; cursor: ew-resize; }
#bran-resume-app .bran-resume-frame-toolbar { position: absolute; z-index: 220; top: -40px; right: 0; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 8px 24px oklch(0 0 0 / .14); transform: translateX(var(--resume-frame-toolbar-shift-x, 0px)); }
#bran-resume-app .bran-resume-frame-toolbar--image { z-index: 230; pointer-events: auto; }
#bran-resume-app .bran-resume-frame-toolbar.is-inside-top { top: 8px; }
#bran-resume-app .bran-resume-frame-toolbar [data-slot="button"] { min-height: 30px; }
#bran-resume-app .bran-resume-frame-toolbar > [data-slot="tooltip"]:last-child > [data-slot="tooltip-content"] { right: 0; left: auto; transform: translateY(3px); }
#bran-resume-app .bran-resume-frame-toolbar > [data-slot="tooltip"][data-side="bottom"]:last-child > [data-slot="tooltip-content"] { transform: translateY(-3px); }
#bran-resume-app .bran-resume-frame-toolbar > [data-slot="tooltip"]:last-child:hover > [data-slot="tooltip-content"],
#bran-resume-app .bran-resume-frame-toolbar > [data-slot="tooltip"]:last-child:focus-within > [data-slot="tooltip-content"] { transform: translateY(0); }
#bran-resume-app .bran-resume-frame-toolbar [data-action="delete"]:hover { background: color-mix(in oklch, var(--destructive) 12%, var(--background)); color: var(--destructive); }
#bran-resume-app.is-option-dragging .bran-resume-object.is-selected { cursor: copy; }
#bran-resume-app.is-object-dragging .bran-resume-canvas-scroll,
#bran-resume-app.is-object-dragging .bran-resume-canvas { cursor: grabbing; user-select: none; }
#bran-resume-app.is-object-dragging .bran-resume-group-drag-handle { cursor: grabbing; }
#bran-resume-app.is-image-uploading .bran-resume-canvas-scroll,
#bran-resume-app.is-image-uploading .bran-resume-canvas { cursor: progress; }
.bran-resume-image-placeholder { display: grid; width: 100%; height: 100%; place-items: center; border: 1px dashed var(--border); background: var(--muted); color: var(--muted-foreground); font-size: 11px; }

#bran-resume-app .bran-resume-empty { width: min(520px, calc(100vw - 120px)); min-height: 360px; margin: 64px auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: 0 12px 30px oklch(0 0 0 / .08); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.bran-resume-shell.is-left-collapsed .bran-resume-workspace { grid-template-columns: var(--resume-rail-width) 0 minmax(0, 1fr) var(--resume-right-width); }
.bran-resume-shell.is-right-collapsed .bran-resume-workspace { grid-template-columns: var(--resume-rail-width) var(--resume-left-width) minmax(0, 1fr) 0; }
.bran-resume-shell.is-left-collapsed.is-right-collapsed .bran-resume-workspace,
.bran-resume-shell.is-focus-mode .bran-resume-workspace { grid-template-columns: var(--resume-rail-width) 0 minmax(0, 1fr) 0; }
.bran-resume-shell.is-left-collapsed .bran-resume-left-header,
.bran-resume-shell.is-left-collapsed .bran-resume-left-surface,
.bran-resume-shell.is-focus-mode .bran-resume-left-header,
.bran-resume-shell.is-focus-mode .bran-resume-left-surface {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-14px);
    visibility: hidden;
    transition: opacity 150ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 240ms;
}
.bran-resume-shell.is-right-collapsed .bran-resume-right-header,
.bran-resume-shell.is-right-collapsed .bran-resume-right-surface,
.bran-resume-shell.is-focus-mode .bran-resume-right-header,
.bran-resume-shell.is-focus-mode .bran-resume-right-surface {
    opacity: 0;
    pointer-events: none;
    transform: translateX(14px);
    visibility: hidden;
    transition: opacity 150ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 240ms;
}
.bran-resume-shell.is-focus-mode .bran-resume-panel-toggle-tooltip {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.bran-resume-shell.is-panel-transitioning .bran-resume-workspace { will-change: grid-template-columns; }

.bran-resume-shell.is-free-access .bran-resume-page::after {
    content: "PREVIEW";
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    color: rgba(17, 24, 39, 0.1);
    font: 800 54px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .18em;
    transform: rotate(-32deg);
    pointer-events: none;
    user-select: none;
}

@media print {
    body:has(.bran-resume-shell.is-free-access) #bran-resume-app { display: none !important; }
    body:has(.bran-resume-shell.is-free-access)::after {
        content: "Access all resume templates to view or download a PDF.";
        display: block;
        padding: 32px;
        color: #111827;
        font: 600 16px/1.5 ui-sans-serif, system-ui, sans-serif;
    }
}

@media (max-width: 1280px) {
    .bran-resume-shell { --resume-left-width: 304px; --resume-right-width: 280px; }
    .bran-resume-published-state { display: none !important; }
    .bran-resume-topbar-center { justify-content: flex-start; }
    #bran-resume-app .bran-resume-element-card { min-height: 96px; }
}

@media (max-width: 1180px) {
    .bran-resume-workspace,
    .bran-resume-shell.is-right-collapsed .bran-resume-workspace { grid-template: 56px minmax(0, 1fr) / var(--resume-rail-width) var(--resume-left-width) minmax(0, 1fr); grid-template-areas: "rail left-header canvas" "rail left canvas"; }
    .bran-resume-shell.is-left-collapsed .bran-resume-workspace,
    .bran-resume-shell.is-left-collapsed.is-right-collapsed .bran-resume-workspace,
    .bran-resume-shell.is-focus-mode .bran-resume-workspace { grid-template-columns: var(--resume-rail-width) 0 minmax(0, 1fr); }
    .bran-resume-right-header,
    .bran-resume-right-surface,
    .bran-resume-right-panel-toggle { display: none !important; }
    .bran-resume-shell.is-profile-mode .bran-resume-workspace,
    .bran-resume-shell.is-profile-mode.is-left-collapsed .bran-resume-workspace { grid-template: 56px minmax(0, 1fr) / var(--resume-rail-width) var(--resume-left-width) minmax(0, 1fr); grid-template-areas: "rail left-header profile" "rail left profile"; }
}

@media (max-width: 1040px) {
    .bran-resume-shell { --resume-left-width: 280px; }
    .bran-resume-save-state { display: none !important; }
    #bran-resume-app .bran-resume-topbar-actions [data-action="print"] { width: 36px; min-width: 36px; padding: 0; font-size: 0; }
    #bran-resume-app .bran-resume-topbar-actions [data-action="print"] [data-slot="icon"] { width: 16px; height: 16px; }
    #bran-resume-app .bran-resume-topbar-actions [data-action="view-page"] { width: 36px; min-width: 36px; padding: 0; font-size: 0; }
    #bran-resume-app .bran-resume-topbar-actions [data-action="view-page"] [data-slot="icon"] { width: 16px; height: 16px; }
}

@media (max-width: 820px) {
    .bran-resume-shell.is-app { grid-template-rows: auto minmax(0, 1fr); }
    .bran-resume-topbar { flex-wrap: wrap; min-height: 106px; padding: 8px 10px; }
    .bran-resume-identity { flex: 1 1 180px; }
    .bran-resume-topbar-center { order: 3; flex: 1 1 100%; justify-content: flex-start; }
    .bran-resume-topbar-actions { margin-left: auto; }
    .bran-resume-workspace { grid-template: minmax(0, 1fr) / var(--resume-rail-width) minmax(0, 1fr); grid-template-areas: "rail canvas"; }
    .bran-resume-shell.is-profile-mode .bran-resume-workspace { grid-template: minmax(0, 1fr) / var(--resume-rail-width) minmax(0, 1fr); grid-template-areas: "rail profile"; }
    .bran-resume-left-header,
    .bran-resume-left-surface,
    .bran-resume-right-header,
    .bran-resume-right-surface { display: none !important; }
    .bran-resume-panel-toggle-tooltip { display: none !important; }
    .bran-resume-canvas { padding: 28px 24px 72px; }
    .bran-resume-page { margin-right: 0; margin-left: 0; }
    .bran-resume-profile-content { padding: 18px 16px 48px; }
}

@media (max-width: 560px) {
    .bran-resume-shell { --resume-rail-width: 56px; }
    .bran-resume-topbar { gap: 6px; }
    #bran-resume-app.is-modal-embedded .bran-resume-topbar { padding-right: 52px; }
    .bran-resume-brand { width: 32px; height: 32px; flex-basis: 32px; }
    .bran-resume-identity { min-width: 120px; }
    .bran-resume-topbar-actions { gap: 3px; }
    .bran-resume-history-controls { display: none !important; }
    #bran-resume-app .bran-resume-topbar-actions [data-action="save"] { width: 36px; min-width: 36px; padding: 0; font-size: 0; }
    #bran-resume-app .bran-resume-topbar-actions [data-action="save"] [data-slot="icon"] { width: 16px; height: 16px; }
    #bran-resume-app .bran-resume-rail { padding-inline: 4px; }
    #bran-resume-app .bran-resume-rail [data-slot="tabs-trigger"] { min-height: 44px; }
    .bran-resume-canvas { padding: 20px 14px 60px; }
    #bran-resume-app .bran-resume-empty { width: min(420px, calc(100vw - 88px)); margin: 28px auto; }
    .bran-resume-topbar--profile { min-height: 56px; }
    .bran-resume-profile-grid,
    .bran-resume-profile-sections { grid-template-columns: 1fr; }
    .bran-resume-profile-photo-row { grid-template-columns: 72px minmax(0, 1fr); }
    .bran-resume-profile-photo-row > img,
    .bran-resume-profile-photo-placeholder { width: 72px; height: 72px; }
    .bran-resume-profile-actions { position: static; }
    #bran-resume-app [data-slot="alert-dialog"] { padding: 16px; }
    #bran-resume-app [data-slot="alert-dialog-content"] { padding: 20px; }
    #bran-resume-app [data-slot="toast-viewport"] { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
}

@media (prefers-reduced-motion: reduce) {
    #bran-resume-app.is-entrance-pending,
    .bran-resume-shell.is-entrance-pending,
    .bran-resume-shell.is-entering,
    .bran-resume-shell.is-entering > .bran-resume-topbar,
    .bran-resume-shell.is-entering .bran-resume-rail,
    .bran-resume-shell.is-entering .bran-resume-left-header,
    .bran-resume-shell.is-entering .bran-resume-left-surface,
    .bran-resume-shell.is-entering .bran-resume-right-header,
    .bran-resume-shell.is-entering .bran-resume-right-surface,
    .bran-resume-shell.is-entering .bran-resume-right-panel-toggle,
    .bran-resume-shell.is-entering .bran-resume-canvas-pane {
        opacity: 1;
        transform: none;
        animation: none;
        pointer-events: auto;
    }

    #bran-resume-app *,
    #bran-resume-app *::before,
    #bran-resume-app *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}