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

        :root {
            --bg: #08080a;
            --bg2: #0d0d10;
            --bg3: #111116;
            --bg4: #16161c;
            --accent: #1864ff;
            --accent-glow: rgba(24, 100, 255, .45);
            --white: #f4f4f5;
            --dim: #71717a;
            --dimmer: #3f3f46;
            --border: rgba(255, 255, 255, .07);
            --sidebar-w: 76px;
            --panel-w: 320px;
            --font-serif: 'Instrument Serif', serif;
            --font-sans: 'Inter', sans-serif;
            --font-mono: 'Space Mono', monospace;
            --radius: 14px;
            --success: #22c55e
        }

        html,
        body {
            height: 100%;
            overflow: hidden
        }

        body {
            background: var(--bg);
            color: var(--white);
            font-family: var(--font-sans);
            -webkit-font-smoothing: antialiased;
            display: flex;
            flex-direction: column
        }

        a {
            text-decoration: none;
            color: inherit
        }

        input,
        textarea,
        select,
        button {
            font-family: var(--font-sans)
        }

        /* ─── TOP BAR ─── */
        .topbar {
            height: 52px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px 0 0;
            background: var(--bg2);
            border-bottom: 1px solid var(--border);
            z-index: 50
        }

        .topbar-logo {
            width: var(--sidebar-w);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .topbar-logo .dot {
            color: var(--accent)
        }

        .topbar-center {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .75rem;
            color: var(--dim)
        }

        .topbar-center .tool-name {
            color: var(--white);
            font-weight: 500
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .tb-btn {
            font-size: .78rem;
            font-weight: 500;
            padding: 6px 16px;
            border-radius: 100px;
            border: 1px solid var(--border);
            color: var(--dim);
            cursor: pointer;
            background: transparent;
            transition: all .2s
        }

        .tb-btn:hover {
            border-color: rgba(255, 255, 255, .18);
            color: var(--white)
        }

        .tb-btn.primary {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff
        }

        .tb-btn.primary:hover {
            background: #3a7fff;
            box-shadow: 0 0 20px var(--accent-glow)
        }

        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--accent2, #6366f1));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            font-weight: 600;
            cursor: pointer
        }

        .studio-user {
            position: relative;
        }

        .studio-avatar-btn {
            border: 1px solid rgba(255, 255, 255, .14);
            padding: 0;
            overflow: visible;
            position: relative;
        }

        .studio-avatar-btn:hover {
            border-color: rgba(255, 255, 255, .3);
        }

        #studio-avatar-initials {
            font-family: var(--font-serif);
            line-height: 1;
        }

        #studio-avatar-img {
            display: none;
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
            border-radius: 50%;
        }

        .studio-avatar-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 999px;
            background: #ef4444;
            color: #fff;
            font-size: .58rem;
            display: none;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            border: 1px solid rgba(255, 255, 255, .2);
            z-index: 2;
            pointer-events: none;
        }

        .studio-user-menu {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 250px;
            background: #0d0d10;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 12px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
            z-index: 100;
            padding: 8px;
        }

        .studio-user-menu.open {
            display: block;
        }

        .studio-user-head {
            padding: 10px 12px 9px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            margin-bottom: 6px;
        }

        .studio-user-name {
            font-size: .84rem;
            font-weight: 600;
            color: var(--white);
            line-height: 1.2;
            margin-bottom: 3px;
        }

        .studio-user-email {
            font-size: .72rem;
            color: var(--dim);
            line-height: 1.2;
        }

        .studio-menu-item {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 9px 12px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: var(--dim);
            font-size: .8rem;
            text-align: left;
            cursor: pointer;
            transition: all .2s;
        }

        .studio-menu-item.plan-item {
            color: var(--white);
            font-weight: 600;
        }

        .studio-menu-usage {
            padding: 0 12px 10px;
            margin-top: -2px;
            margin-bottom: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .studio-menu-usage-label {
            display: block;
            font-size: .68rem;
            color: var(--dim);
            margin-bottom: 6px;
            font-family: var(--font-mono);
            letter-spacing: .03em;
        }

        .studio-menu-usage-track {
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            overflow: hidden;
        }

        .studio-menu-usage-fill {
            height: 100%;
            width: 0;
            border-radius: 999px;
            background: linear-gradient(90deg, #1864ff 0%, #4f46e5 100%);
            transition: width .25s ease;
        }

        .studio-menu-item:hover {
            background: rgba(255, 255, 255, .05);
            color: var(--white);
        }

        .studio-menu-item-inline {
            justify-content: space-between;
            gap: 10px;
        }

        .studio-menu-item-badge {
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border-radius: 999px;
            display: none;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-size: .62rem;
            font-weight: 700;
            color: var(--white);
            background: var(--accent);
            border: 1px solid rgba(255, 255, 255, .18);
        }

        .studio-menu-item-danger {
            margin-top: 4px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            border-radius: 0 0 8px 8px;
            padding-top: 10px;
            color: #f87171;
        }

        .studio-lang-group {
            border-top: 1px solid rgba(255, 255, 255, .08);
            margin-top: 6px;
            padding: 8px 10px 4px;
        }

        .studio-lang-title {
            font-size: .66rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--dim);
            font-family: var(--font-mono);
            margin-bottom: 8px;
        }

        .studio-lang-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
        }

        .studio-lang-btn {
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 8px;
            background: transparent;
            color: var(--dim);
            font-size: .76rem;
            padding: 7px 9px;
            text-align: left;
            cursor: pointer;
        }

        .studio-lang-btn:hover {
            border-color: rgba(255, 255, 255, .28);
            color: var(--white);
        }

        .studio-lang-btn.active {
            border-color: rgba(24, 100, 255, .45);
            color: #9bc4ff;
            background: rgba(24, 100, 255, .1);
        }

        /* ─── BODY LAYOUT ─── */
        .studio-body {
            flex: 1;
            display: flex;
            overflow: hidden
        }

        /* ─── SIDEBAR ─── */
        .sidebar {
            width: var(--sidebar-w);
            flex-shrink: 0;
            background: var(--bg2);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 0 24px;
            gap: 4px;
            overflow-y: auto;
            overflow-x: hidden
        }

        .sidebar-bottom {
            margin-top: auto;
            width: 100%;
            padding: 10px 0 10px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .sidebar-utility-btn {
            width: 40px;
            height: 40px;
            min-height: 40px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg3);
            color: var(--dim);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 0;
        }

        .sidebar-utility-btn:hover {
            color: var(--white);
            border-color: rgba(255, 255, 255, .25);
        }

        .sidebar-utility-icon {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }

        .sidebar-utility-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 999px;
            background: #ef4444;
            color: #fff;
            font-size: .58rem;
            display: none;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
        }

        .studio-notifications-panel {
            position: fixed;
            left: calc(var(--sidebar-w) + 10px);
            bottom: 16px;
            width: min(360px, calc(100vw - var(--sidebar-w) - 24px));
            background: #0d0d10;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 12px;
            box-shadow: 0 18px 38px rgba(0, 0, 0, .45);
            z-index: 280;
            display: none;
            overflow: hidden;
        }

        .studio-notifications-panel.open {
            display: block;
        }

        .studio-notifications-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .studio-notifications-title {
            font-size: .78rem;
            font-family: var(--font-mono);
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--dim);
        }

        .studio-notifications-actions {
            display: flex;
            gap: 6px;
        }

        .studio-notifications-action {
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 7px;
            background: transparent;
            color: var(--dim);
            font-size: .68rem;
            padding: 5px 7px;
            cursor: pointer;
        }

        .studio-notifications-action:hover {
            color: var(--white);
            border-color: rgba(255, 255, 255, .26);
        }

        .studio-notifications-list {
            max-height: 320px;
            overflow: auto;
            padding: 8px;
            display: grid;
            gap: 6px;
        }

        .studio-notification-item {
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--bg3);
            padding: 8px 9px;
            display: grid;
            grid-template-columns: 9px 1fr;
            gap: 8px;
        }

        .studio-notification-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-top: 4px;
        }

        .studio-notification-dot.unread {
            background: #22c55e;
        }

        .studio-notification-dot.read {
            background: #52525b;
        }

        .studio-notification-title {
            font-size: .78rem;
            color: var(--white);
            margin-bottom: 4px;
            font-weight: 600;
        }

        .studio-notification-msg {
            font-size: .73rem;
            color: var(--dim);
            line-height: 1.45;
        }

        .studio-notification-time {
            margin-top: 5px;
            font-size: .65rem;
            color: #71717a;
            font-family: var(--font-mono);
        }

        .studio-notification-empty {
            border: 1px dashed var(--border);
            border-radius: 9px;
            padding: 12px;
            font-size: .75rem;
            color: var(--dim);
            text-align: center;
        }

        .sidebar::-webkit-scrollbar {
            display: none
        }

        .tool-btn {
            position: relative;
            width: 52px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            cursor: pointer;
            transition: background .2s;
            border: 1px solid transparent;
            color: var(--dim);
            flex-shrink: 0
        }

        .tool-btn:hover {
            background: var(--bg3);
            color: var(--white)
        }

        .tool-btn.active {
            background: rgba(24, 100, 255, .12);
            border-color: rgba(24, 100, 255, .3);
            color: var(--accent)
        }

        .tool-btn.blocked {
            opacity: .45;
            border-color: rgba(239, 68, 68, .28);
            color: var(--dimmer);
        }

        .tool-btn.blocked .active-dot {
            display: none !important;
        }

        .tool-btn.blocked:hover {
            background: rgba(239, 68, 68, .08);
            color: #fca5a5;
        }

        .tool-btn svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0
        }

        .tool-btn span {
            font-size: .52rem;
            font-weight: 500;
            text-align: center;
            line-height: 1.2;
            letter-spacing: .01em
        }

        .tool-btn .active-dot {
            position: absolute;
            right: 6px;
            top: 6px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            display: none
        }

        .tool-btn.active .active-dot {
            display: block
        }

        .sidebar-sep {
            width: 36px;
            height: 1px;
            background: var(--border);
            margin: 6px 0;
            flex-shrink: 0
        }

        /* ─── PANEL ─── */
        .panel {
            width: var(--panel-w);
            flex-shrink: 0;
            background: var(--bg2);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden
        }

        .panel-head {
            padding: 20px 20px 16px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0
        }

        .panel-tool-tag {
            font-family: var(--font-mono);
            font-size: .62rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 8px
        }

        .panel-tool-name {
            font-family: var(--font-serif);
            font-size: 1.4rem;
            margin-bottom: 4px
        }

        .panel-tool-desc {
            font-size: .8rem;
            color: var(--dim);
            line-height: 1.5
        }

        .panel-body {
            flex: 1;
            min-width: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 20px
        }

        .panel-body::-webkit-scrollbar {
            width: 4px
        }

        .panel-body::-webkit-scrollbar-track {
            background: transparent
        }

        .panel-body::-webkit-scrollbar-thumb {
            background: var(--dimmer);
            border-radius: 4px
        }

        /* form elements */
        .field {
            min-width: 0;
            max-width: 100%;
            margin-bottom: 18px
        }

        .field label {
            display: block;
            font-size: .72rem;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--dim);
            margin-bottom: 8px
        }

        .field-note {
            margin: -6px 0 14px;
            font-size: .73rem;
            color: var(--dim);
            line-height: 1.35;
        }

        .field input[type=text],
        .field input[type=number],
        .field textarea,
        .field select {
            width: 100%;
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: .85rem;
            color: var(--white);
            outline: none;
            transition: border-color .2s, box-shadow .2s
        }

        .field input:focus,
        .field textarea:focus,
        .field select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(24, 100, 255, .1)
        }

        .field textarea {
            resize: vertical;
            min-height: 120px
        }

        .prompt-editor {
            position: relative;
            width: 100%;
            overflow: visible;
        }

        .prompt-render {
            position: absolute;
            inset: 0;
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 10px 12px;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: anywhere;
            overflow: auto;
            font-family: var(--font-sans);
            font-size: .85rem;
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: normal;
            color: var(--white);
            pointer-events: none;
            z-index: 1;
        }

        .prompt-placeholder {
            color: var(--dimmer);
        }

        .prompt-mention-token {
            color: #9ec2ff;
            font-weight: 700;
        }

        .prompt-editor-input {
            position: relative;
            z-index: 2;
            background: transparent !important;
            color: transparent !important;
            caret-color: var(--white);
            line-height: 1.5;
        }

        .prompt-editor-input::placeholder {
            color: transparent !important;
            opacity: 0;
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: var(--dimmer)
        }

        .field select {
            cursor: pointer;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717a' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center
        }

        /* upload area */
        .upload-area {
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            border: 1.5px dashed var(--border);
            border-radius: 12px;
            padding: 28px 16px;
            text-align: center;
            cursor: pointer;
            transition: border-color .2s, background .2s;
            margin-bottom: 18px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: var(--bg3);
            image-rendering: auto;
            position: relative;
            overflow: hidden;
        }

        .upload-area.featured-upload {
            height: 210px;
            min-height: 210px;
            max-height: 210px;
            padding: 36px 18px;
            max-width: 520px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .upload-area.featured-upload .upload-icon {
            width: 44px;
            height: 44px;
            margin-bottom: 6px;
        }

        .upload-area.featured-upload p {
            font-size: .85rem;
        }

        .upload-area.has-image {
            border-style: solid;
            border-color: var(--accent);
        }

        .upload-area.has-image::before {
            content: '';
            position: absolute;
            inset: 0;
            background: transparent;
            z-index: 1;
            transition: opacity 0.2s;
        }

        .upload-area.has-image:hover::before {
            background: rgba(0, 0, 0, 0.06);
        }

        .upload-content {
            position: relative;
            z-index: 2;
        }

        .upload-area:hover {
            border-color: var(--accent);
            background-color: rgba(24, 100, 255, .04)
        }

        .upload-area.is-dragover {
            border-color: var(--accent);
            background-color: rgba(24, 100, 255, .12);
        }

        /* Slots 2+ do Edit enquanto o upload 1 estiver vazio. pointer-events:none
           bloqueia clique E drag-and-drop de uma vez, sem mexer nos listeners. */
        .upload-area.upload-locked {
            opacity: .4;
            pointer-events: none;
            filter: grayscale(1);
        }

        /* Explicito: o slot do personagem (People) so existe no modo Inserir e e
           escondido via [hidden]. .upload-area nao define display hoje, mas se um dia
           definir (flex/grid), o [hidden] do browser seria sobrescrito silenciosamente. */
        .upload-area[hidden] {
            display: none;
        }

        .upload-icon {
            width: 36px;
            height: 36px;
            margin: 0 auto 10px;
            color: var(--dim);
            transition: color 0.2s;
        }

        .upload-area.has-image .upload-icon {
            display: none;
            pointer-events: none;
        }

        .upload-area p {
            font-size: .8rem;
            color: var(--dim);
            line-height: 1.5;
            transition: color 0.2s;
        }

        .upload-area.has-image p {
            color: #fff;
            display: none;
            pointer-events: none;
        }

        .upload-area p strong {
            display: block;
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
            color: var(--accent);
            font-weight: 500
        }

        .upload-area small {
            font-size: .7rem;
            color: var(--dimmer);
            transition: color 0.2s;
        }

        .upload-area.has-image small {
            color: rgba(255, 255, 255, 0.7);
            display: none;
            pointer-events: none;
        }

        .upload-clear {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(8, 8, 10, .82);
            color: #fff;
            font-size: .95rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 4;
            opacity: 0;
            pointer-events: none;
            transition: all .2s;
        }

        .upload-area.has-image .upload-clear {
            opacity: 1;
            pointer-events: auto;
        }

        .upload-remove-slot {
            position: absolute;
            top: 7px;
            left: 7px;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(8, 8, 10, .82);
            color: #fff;
            font-size: .62rem;
            font-weight: 600;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 4;
            opacity: .9;
            transition: all .2s;
        }

        .upload-remove-slot:hover {
            border-color: rgba(255, 255, 255, .35);
            background: rgba(8, 8, 10, .95);
        }

        .upload-field-grid {
            position: relative;
            min-width: 0;
            max-width: 100%;
            margin-bottom: 18px;
        }

        .upload-field-grid>label {
            display: block;
            padding-right: 32px;
            margin-bottom: 10px;
        }

        .upload-grid-dynamic {
            display: grid;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 18px;
        }

        .upload-grid-dynamic .upload-area {
            margin-bottom: 0;
            aspect-ratio: 1 / 1;
            min-height: 0;
            padding: 18px 14px;
            border-radius: 12px;
        }

        .upload-grid-dynamic .upload-icon {
            width: 28px;
            height: 28px;
            margin-bottom: 8px;
        }

        .upload-grid-dynamic .upload-area p {
            font-size: .74rem;
            line-height: 1.3;
        }

        .upload-grid-dynamic .upload-area small {
            font-size: .64rem;
        }

        .upload-add-btn {
            appearance: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 22px;
            height: 22px;
            border: 1px solid rgba(24, 100, 255, .35);
            border-radius: 999px;
            background: rgba(24, 100, 255, .04);
            color: #9ebfff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: border-color .2s, background .2s, color .2s, opacity .2s;
            z-index: 3;
        }

        .upload-add-btn.inline-mode {
            position: static;
            width: 24px;
            height: 24px;
            justify-self: start;
            align-self: start;
            margin-top: 2px;
            z-index: auto;
        }

        .upload-add-btn:hover {
            border-color: var(--accent);
            background: rgba(24, 100, 255, .14);
            color: #d7e4ff;
        }

        .upload-add-btn .upload-add-plus {
            font-size: .95rem;
            line-height: 1;
        }

        .upload-add-btn .upload-add-text {
            display: none;
        }

        .prompt-mention-menu {
            position: absolute;
            z-index: 1200;
            display: none;
            left: 8px;
            right: 8px;
            bottom: 8px;
            max-height: 220px;
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #0d0e12;
            box-shadow: 0 14px 28px rgba(0, 0, 0, .45);
            padding: 6px;
        }

        .prompt-mention-item {
            width: 100%;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: #d4d8e0;
            text-align: left;
            padding: 8px 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .prompt-mention-item .alias {
            color: #9ec2ff;
            font-family: var(--font-mono);
            font-size: .74rem;
            letter-spacing: .02em;
        }

        .prompt-mention-item .meta {
            color: var(--dim);
            font-size: .72rem;
        }

        .prompt-mention-item:hover,
        .prompt-mention-item.active {
            background: rgba(24, 100, 255, .14);
        }

        .upload-add-btn.disabled,
        .upload-add-btn:disabled {
            opacity: .45;
            cursor: not-allowed;
            border-color: var(--border);
            background: rgba(255, 255, 255, .03);
            color: var(--dim);
        }

        @media (max-width: 1200px) {
            .upload-grid-dynamic {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 720px) {
            .upload-grid-dynamic {
                grid-template-columns: 1fr;
            }
        }

        .upload-clear:hover {
            border-color: rgba(255, 255, 255, .35);
            background: rgba(8, 8, 10, .95);
        }

        /* slider */
        .range-field {
            margin-bottom: 18px
        }

        .range-field label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px
        }

        .range-field label span {
            font-size: .72rem;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--dim)
        }

        .range-field label em {
            font-style: normal;
            font-size: .8rem;
            font-family: var(--font-mono);
            color: var(--white)
        }

        .range-field.is-disabled {
            opacity: .58;
        }

        input[type=range] {
            width: 100%;
            -webkit-appearance: none;
            height: 4px;
            border-radius: 4px;
            background: var(--bg3);
            outline: none;
            border: 1px solid var(--border)
        }

        input[type=range]:disabled {
            cursor: not-allowed;
            filter: saturate(.6);
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
            box-shadow: 0 0 8px var(--accent-glow)
        }

        /* toggle switch */
        .toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px
        }

        .toggle-row label {
            font-size: .82rem;
            color: var(--dim)
        }

        .sw {
            position: relative;
            width: 40px;
            height: 22px;
            flex-shrink: 0
        }

        .sw input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute
        }

        .sw-track {
            position: absolute;
            inset: 0;
            border-radius: 100px;
            background: var(--bg3);
            border: 1px solid var(--border);
            cursor: pointer;
            transition: background .2s
        }

        .sw input:checked+.sw-track {
            background: var(--accent)
        }

        .sw-track::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #fff;
            top: 3px;
            left: 3px;
            transition: transform .2s
        }

        .sw input:checked+.sw-track::after {
            transform: translateX(18px)
        }

        /* chips */
        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 18px
        }

        .chip {
            font-size: .75rem;
            padding: 5px 12px;
            border-radius: 100px;
            border: 1px solid var(--border);
            color: var(--dim);
            cursor: pointer;
            transition: all .2s
        }

        .chip:hover {
            border-color: rgba(255, 255, 255, .18);
            color: var(--white)
        }

        .chip.sel {
            background: rgba(24, 100, 255, .12);
            border-color: rgba(24, 100, 255, .35);
            color: var(--accent)
        }

        .chip.disabled-engine {
            opacity: .45;
            cursor: not-allowed;
            border-style: dashed;
            color: var(--dimmer);
        }

        .chip.disabled-engine:hover {
            border-color: var(--border);
            color: var(--dimmer);
        }

        .sidebar-library-link span {
            max-width: 48px;
            font-size: .48rem;
            overflow-wrap: anywhere;
        }

        #tp-video .video-model-chips .chip {
            flex: 1 1 120px;
            text-align: center;
        }

        #tp-video .field-optional {
            color: var(--dimmer);
            font-size: .68rem;
            font-weight: 400;
            text-transform: none;
        }

        #tp-video .video-plan-note {
            min-height: 18px;
            margin-top: -4px;
        }

        .texture-first-step {
            margin-top: 0;
        }

        .texture-mode-switch {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 8px;
        }

        .texture-mode-option {
            min-width: 0;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg3);
            color: var(--white);
            text-align: left;
            cursor: pointer;
            transition: border-color .2s, background .2s, color .2s;
        }

        .texture-mode-option:hover {
            border-color: rgba(255, 255, 255, .22);
        }

        .texture-mode-option.is-selected {
            border-color: rgba(24, 100, 255, .55);
            background: rgba(24, 100, 255, .12);
            color: var(--accent);
        }

        .texture-mode-option strong,
        .texture-mode-option span {
            display: block;
        }

        .texture-mode-option strong {
            font-size: .78rem;
            line-height: 1.25;
        }

        .texture-mode-option span {
            margin-top: 5px;
            color: var(--dimmer);
            font-size: .68rem;
            line-height: 1.45;
        }

        .texture-flow-hint {
            margin: 0 0 18px;
            color: var(--dimmer);
            font-size: .72rem;
            line-height: 1.5;
        }

        .texture-map-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: 4px 0 10px;
        }

        .texture-map-heading>div>strong,
        .texture-map-heading>div>span {
            display: block;
        }

        .texture-map-heading>div>strong {
            color: var(--white);
            font-size: .78rem;
        }

        .texture-map-heading>div>span {
            margin-top: 3px;
            color: var(--dimmer);
            font-size: .68rem;
        }

        .texture-select-all {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--dim);
            font-size: .7rem;
            cursor: pointer;
            white-space: nowrap;
        }

        .texture-map-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 18px;
        }

        .texture-map-option {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            min-width: 0;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg3);
            cursor: pointer;
            transition: border-color .2s, background .2s;
        }

        .texture-map-option:has(input:checked) {
            border-color: rgba(24, 100, 255, .45);
            background: rgba(24, 100, 255, .1);
        }

        .texture-map-option input,
        .texture-select-all input {
            accent-color: var(--accent);
        }

        .texture-map-option input {
            margin: 2px 0 0;
            flex: 0 0 auto;
        }

        .texture-map-option span,
        .texture-map-option strong,
        .texture-map-option small {
            display: block;
            min-width: 0;
        }

        .texture-map-option strong {
            color: var(--white);
            font-size: .73rem;
            line-height: 1.25;
        }

        .texture-map-option small {
            margin-top: 3px;
            color: var(--dimmer);
            font-size: .65rem;
            line-height: 1.35;
        }

        @media (max-width: 520px) {
            .texture-mode-switch,
            .texture-map-grid {
                grid-template-columns: 1fr;
            }

            .texture-map-heading {
                align-items: flex-end;
            }
        }

        #tp-upscale #upscale-mode.chips {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            flex-wrap: nowrap !important;
            gap: 8px;
        }

        #tp-upscale #upscale-mode .chip {
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            padding: 10px 6px;
            border-radius: 10px;
            font-size: .76rem;
            line-height: 1;
        }

        .upscale-slider-field {
            margin-top: 4px;
        }

        .upscale-slider-field .creativity-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .upscale-slider-field .creativity-slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            border-radius: 999px;
            background: var(--bg3);
            cursor: pointer;
            outline: none;
        }

        .upscale-slider-field .creativity-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            border: 2px solid var(--bg2);
            cursor: pointer;
            transition: transform .15s;
        }

        .upscale-slider-field .creativity-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        .upscale-slider-field .creativity-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            border: 2px solid var(--bg2);
            cursor: pointer;
        }

        .upscale-slider-field .creativity-value {
            min-width: 44px;
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-size: .85rem;
            font-weight: 600;
            color: var(--white);
        }

        .upscale-slider-field .creativity-hint {
            display: block;
            margin-top: 6px;
            color: var(--dimmer);
            font-size: .72rem;
        }

        /* Inpaint mask painter — panel button + fullscreen overlay
           (Selector kept unscoped so the People "Inserir" panel reuses the
           exact same look.) */
        .btn-mask-open {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--white);
            border-radius: 10px;
            font-size: .8rem;
            font-weight: 600;
            cursor: pointer;
            transition: border-color .2s, background .2s, color .2s;
        }

        .btn-mask-open:hover {
            border-color: rgba(24, 100, 255, .45);
            background: rgba(24, 100, 255, .12);
            color: var(--accent);
        }

        .inpaint-mask-overlay {
            position: fixed;
            inset: 0;
            z-index: 1500;
            background: rgba(0, 0, 0, .92);
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            padding: 16px 24px 12px;
            gap: 12px;
        }

        .inpaint-mask-overlay[hidden] {
            display: none;
        }

        body.mask-overlay-open {
            overflow: hidden;
        }

        .inpaint-mask-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 8px 12px;
            background: rgba(13, 13, 16, .85);
            border: 1px solid var(--border);
            border-radius: 12px;
        }

        .mask-tool-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 12px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--dim);
            border-radius: 8px;
            font-size: .76rem;
            cursor: pointer;
            transition: border-color .2s, background .2s, color .2s;
        }

        .mask-tool-btn:hover {
            border-color: rgba(255, 255, 255, .22);
            color: var(--white);
        }

        .mask-tool-btn.is-active {
            background: rgba(24, 100, 255, .2);
            border-color: rgba(24, 100, 255, .5);
            color: var(--accent);
        }

        .mask-tool-clear {
            margin-left: auto;
        }

        .mask-tool-done {
            background: rgba(24, 100, 255, .25);
            border-color: rgba(24, 100, 255, .55);
            color: var(--white);
            font-weight: 600;
        }

        .mask-tool-done:hover {
            background: rgba(24, 100, 255, .4);
            color: #fff;
        }

        .mask-brush-row {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 220px;
        }

        .mask-brush-label {
            font-size: .76rem;
            color: var(--dim);
        }

        .mask-brush-slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            border-radius: 999px;
            background: var(--bg3);
            cursor: pointer;
            outline: none;
        }

        .mask-brush-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            border: 2px solid var(--bg2);
            cursor: pointer;
        }

        .mask-brush-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            border: 2px solid var(--bg2);
            cursor: pointer;
        }

        .mask-brush-value {
            min-width: 30px;
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-size: .8rem;
            font-weight: 600;
            color: var(--white);
        }

        .inpaint-mask-canvas-wrap {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .inpaint-mask-canvas-wrap img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            pointer-events: none;
        }

        .inpaint-mask-canvas-wrap canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            cursor: crosshair;
            opacity: .55;
            touch-action: none;
            border-radius: 8px;
        }

        .inpaint-mask-hint {
            text-align: center;
            color: var(--dim);
            font-size: .78rem;
            margin: 0;
        }

        #tp-people #people-engine.chips {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            flex-wrap: nowrap !important;
            gap: 8px;
        }

        #tp-people #people-engine .chip {
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            padding: 10px 6px;
            border-radius: 10px;
            font-size: .76rem;
            line-height: 1;
        }

        #tp-people #people-engine .chip {
            min-width: 0;
            min-height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            padding: 12px 8px;
            border-radius: 12px;
            font-size: .92rem;
            font-weight: 600;
            line-height: 1;
        }

        /* separator */
        .section-sep {
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--dimmer);
            margin: 4px 0 14px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border)
        }

        /* generate button */
        .generate-btn {
            margin: 0 20px 20px;
            padding: 13px;
            border-radius: 12px;
            background: var(--accent);
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: .875rem;
            font-weight: 600;
            width: calc(100% - 40px);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all .3s
        }

        .generate-btn:hover {
            background: #3a7fff;
            box-shadow: 0 0 28px var(--accent-glow)
        }

        .generate-btn.is-upgrade-cta {
            background: linear-gradient(90deg, #f59e0b, #f97316);
        }

        .generate-btn.is-upgrade-cta:hover {
            background: linear-gradient(90deg, #f6ad2c, #fb8a35);
            box-shadow: 0 0 28px rgba(245, 158, 11, .35);
        }

        .generate-btn:disabled {
            background: #24252c;
            color: #b4b7c2;
            border: 1px solid rgba(255, 255, 255, .08);
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }

        .generate-btn:disabled:hover {
            background: #24252c;
            box-shadow: none;
        }

        .generate-btn.loading {
            background: var(--bg3);
            color: var(--dim);
            cursor: default;
            pointer-events: none
        }

        .gen-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--dimmer);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin .7s linear infinite
        }

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

        /* ─── MAIN AREA ─── */
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--bg);
            position: relative;
        }

        /* generating overlay */
        .gen-overlay {
            position: absolute;
            inset: 0;
            background: rgba(8, 8, 10, .85);
            backdrop-filter: blur(4px);
            display: none !important;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            z-index: 200;
            pointer-events: none !important;
        }

        .gen-overlay.show {
            display: none !important;
        }

        .gen-overlay .big-spinner {
            width: 48px;
            height: 48px;
            border: 3px solid var(--dimmer);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin .9s linear infinite
        }

        .gen-overlay p {
            font-size: .9rem;
            color: var(--dim)
        }

        /* ─── LIGHTBOX MODAL ─── */
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .lightbox.show {
            display: flex;
        }

        .lightbox-close {
            position: absolute;
            top: 24px;
            right: 24px;
            background: transparent;
            border: none;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            z-index: 1001;
            transition: color 0.2s;
        }

        .lightbox-close:hover {
            color: var(--accent);
        }

        .lightbox-img-wrap {
            position: relative;
            max-width: 90vw;
            max-height: 85vh;
        }

        .lightbox-img-wrap.is-loading-preview::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 8px;
            background: linear-gradient(110deg, rgba(17, 17, 22, .18) 8%, rgba(255, 255, 255, .08) 18%, rgba(17, 17, 22, .18) 33%);
            background-size: 200% 100%;
            animation: histShimmer 1.1s linear infinite;
            pointer-events: none;
        }

        .lightbox-img-wrap img {
            max-width: 100%;
            max-height: 85vh;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            object-fit: contain;
        }

        .lightbox-img-wrap > video {
            display: block;
            width: min(90vw, 1280px);
            max-height: 85vh;
            border-radius: 8px;
            background: #000;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
        }

        .lightbox-img-wrap > video[hidden] {
            display: none;
        }

        .lightbox-status {
            position: absolute;
            left: 16px;
            bottom: 16px;
            z-index: 3;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(13, 13, 16, .9);
            border: 1px solid rgba(255, 255, 255, .12);
            color: var(--dim);
            font-size: .73rem;
            backdrop-filter: blur(12px);
        }

        .lightbox-compare[hidden] {
            display: none;
        }

        .lightbox-compare {
            width: min(90vw, 1400px);
            height: min(85vh, 900px);
        }

        .lightbox-cmp-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 8px;
            background: #050507;
            user-select: none;
            touch-action: none;
            cursor: ew-resize;
        }

        .lightbox-cmp-wrap:focus-visible {
            outline: 2px solid rgba(255, 255, 255, .9);
            outline-offset: 3px;
        }

        .lightbox-cmp-base,
        .lightbox-cmp-top {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #050507;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        .lightbox-cmp-top {
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
        }

        .lightbox-cmp-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            background: rgba(255, 255, 255, .85);
            z-index: 10;
            pointer-events: none;
        }

        .lightbox-cmp-handle::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 26px;
            height: 26px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, .9);
            background: rgba(13, 13, 16, .9);
            box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
        }

        .lightbox-cmp-label {
            position: absolute;
            top: 18px;
            z-index: 12;
            font-family: var(--font-mono);
            font-size: .68rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .92);
            padding: 7px 10px;
            border-radius: 999px;
            background: rgba(13, 13, 16, .72);
            border: 1px solid rgba(255, 255, 255, .14);
            backdrop-filter: blur(10px);
        }

        .lightbox-cmp-label-before {
            left: 18px;
        }

        .lightbox-cmp-label-after {
            right: 18px;
        }

        .lightbox-actions {
            /* Fixed to the viewport (not the image wrap) so the buttons stay
               visible even when the lightboxed image is tall (e.g. 4K+ upscale). */
            position: fixed;
            bottom: 16px;
            right: 16px;
            z-index: 1002;
            display: flex;
            gap: 8px;
        }

        .pact-btn {
            background: rgba(13, 13, 16, .9);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 7px 14px;
            font-size: .78rem;
            color: var(--dim);
            cursor: pointer;
            transition: all .2s;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .pact-btn:hover {
            border-color: rgba(255, 255, 255, .18);
            color: var(--white)
        }

        .pact-btn.is-active {
            background: rgba(24, 100, 255, .16);
            border-color: rgba(24, 100, 255, .4);
            color: var(--accent)
        }

        .pact-btn svg {
            width: 13px;
            height: 13px
        }

        /* ─── HISTORY ─── */
        .history {
            flex: 1;
            background: var(--bg2);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .history-header {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            border-bottom: 1px solid var(--border);
        }

        .history-title {
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--dim);
            margin-right: 4px;
        }

        .history-count {
            font-size: .72rem;
            color: var(--dimmer);
            font-family: var(--font-mono);
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: 100px;
            padding: 1px 8px;
        }

        .hist-filter-menu {
            position: relative;
            margin-left: 4px;
        }

        .hist-filter-toggle {
            height: 28px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--white);
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .02em;
            cursor: pointer;
            padding: 0 10px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            transition: all .2s;
        }

        .hist-filter-toggle:hover {
            border-color: rgba(255, 255, 255, .2);
        }

        .hist-filter-toggle svg {
            width: 12px;
            height: 12px;
            color: var(--dim);
            transition: transform .2s;
        }

        .hist-filter-menu.open .hist-filter-toggle svg {
            transform: rotate(180deg);
        }

        .hist-filter-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            min-width: 220px;
            max-height: 280px;
            overflow-y: auto;
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 6px;
            display: none;
            z-index: 60;
            box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
        }

        .hist-filter-menu.open .hist-filter-dropdown {
            display: block;
        }

        .hist-filter-item {
            width: 100%;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 8px;
            color: var(--dim);
            font-size: .72rem;
            text-align: left;
            padding: 7px 9px;
            cursor: pointer;
            transition: all .2s;
        }

        .hist-filter-item:hover {
            background: rgba(255, 255, 255, .05);
            color: var(--white);
        }

        .hist-filter-item.active {
            background: rgba(24, 100, 255, .12);
            border-color: rgba(24, 100, 255, .3);
            color: var(--accent);
        }

        .hist-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
            margin-left: auto;
        }

        .hist-action-btn {
            min-width: 28px;
            height: 28px;
            padding: 0 9px;
            border-radius: 8px;
            background: var(--bg3);
            border: 1px solid var(--border);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dim);
            transition: all .2s;
        }

        .hist-select-toggle {
            min-width: 86px;
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .02em;
            color: var(--white);
        }

        .only-select-mode {
            display: none;
        }

        .history.selection-mode .only-select-mode {
            display: flex;
        }

        .hist-action-btn:hover {
            border-color: rgba(255, 255, 255, .2);
            color: var(--white);
        }

        .hist-action-btn svg {
            width: 13px;
            height: 13px;
        }

        .history-grid {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 14px 20px 16px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            align-content: start;
        }

        .history-load-more-wrap {
            padding: 0 20px 14px;
            display: none;
            justify-content: center;
            border-top: 1px solid rgba(255, 255, 255, .03);
        }

        .history-load-more-wrap.visible {
            display: flex;
        }

        .hist-load-more-btn {
            min-width: 160px;
            height: 32px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--white);
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .02em;
            cursor: pointer;
            transition: all .2s;
        }

        .hist-load-more-btn:hover {
            border-color: rgba(255, 255, 255, .2);
            background: rgba(255, 255, 255, .05);
        }

        .history-grid::-webkit-scrollbar {
            width: 4px;
        }

        .history-grid::-webkit-scrollbar-track {
            background: transparent;
        }

        .history-grid::-webkit-scrollbar-thumb {
            background: var(--dimmer);
            border-radius: 4px;
        }

        .hist-item {
            aspect-ratio: 1;
            perspective: 1000px;
            cursor: pointer;
            position: relative;
        }

        .hist-item-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
            border-radius: 10px;
        }

        .hist-item.flip .hist-item-inner {
            transform: rotateY(180deg);
        }

        .hist-item-front,
        .hist-item-back {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg3);
            border: 1px solid var(--border);
            transition: border-color .25s, transform .25s;
        }

        .hist-item.flip .hist-item-front {
            pointer-events: none;
        }

        .hist-item.flip .hist-item-back {
            pointer-events: auto;
        }

        .hist-item:hover .hist-item-front {
            border-color: rgba(255, 255, 255, .18);
        }

        .hist-item.selected .hist-item-front,
        .hist-item.selected .hist-item-back {
            border-color: var(--accent);
        }

        .hist-item-front img,
        .hist-item-front video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
            position: relative;
            z-index: 1;
            opacity: 0;
            transition: transform 0.3s, opacity 0.18s ease;
            will-change: opacity, transform;
        }

        .hist-item-front .hist-item-placeholder {
            opacity: 0;
            transition: opacity .2s;
        }

        .hist-item.is-thumb-ready .hist-item-front img,
        .hist-item.is-thumb-ready .hist-item-front video,
        .hist-item-front img.is-ready,
        .hist-item-front video.is-ready {
            opacity: 1;
        }

        .hist-item.is-pending {
            cursor: default;
        }

        .hist-item.is-pending .hist-item-front {
            border-style: dashed;
            border-color: rgba(24, 100, 255, .35);
        }

        .hist-item-placeholder {
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, #111116 8%, #1a1a22 18%, #111116 33%);
            background-size: 200% 100%;
            animation: histShimmer 1.1s linear infinite;
            z-index: 0;
        }

        .hist-item.is-media-loading .hist-item-placeholder {
            opacity: 1;
        }

        .hist-item.is-thumb-ready .hist-item-placeholder {
            opacity: 0;
        }

        /* Generating state: animated accent sweep so a pending card reads as
           "working" instead of sitting as a flat black tile. */
        .hist-item.is-pending .hist-item-placeholder {
            opacity: 1;
            background: linear-gradient(110deg,
                #0c0c11 28%,
                rgba(24, 100, 255, .14) 42%,
                rgba(120, 165, 255, .30) 50%,
                rgba(24, 100, 255, .14) 58%,
                #0c0c11 72%);
            background-size: 200% 100%;
            animation: histShimmer 1.25s linear infinite;
        }

        .hist-item.is-pending .hist-item-front {
            animation: genBorderPulse 1.6s ease-in-out infinite;
        }

        @keyframes histShimmer {
            to {
                background-position-x: -200%;
            }
        }

        @keyframes genBorderPulse {
            0%, 100% {
                border-color: rgba(24, 100, 255, .25);
                box-shadow: 0 0 0 0 rgba(24, 100, 255, 0);
            }
            50% {
                border-color: rgba(24, 100, 255, .65);
                box-shadow: 0 0 14px 0 rgba(24, 100, 255, .18);
            }
        }

        .hist-item:hover:not(.flip) .hist-item-front img,
        .hist-item:hover:not(.flip) .hist-item-front video {
            transform: scale(1.05);
        }

        .hist-item-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(8, 8, 10, .9) 0%, transparent 50%);
            opacity: 0;
            transition: opacity .2s;
            padding: 8px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .hist-item:hover .hist-item-overlay {
            opacity: 1;
        }

        .hist-item-overlay.pending {
            opacity: 1;
            background: linear-gradient(to top, rgba(8, 8, 10, .6) 0%, rgba(8, 8, 10, .05) 65%);
        }

        .hist-item.is-pending .hist-item-actions,
        .hist-item.is-pending .hist-item-select,
        .hist-item.is-pending .hist-item-clicker {
            display: none !important;
        }

        .hist-item-tool {
            font-size: .63rem;
            color: var(--accent);
            font-family: var(--font-mono);
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .hist-item-time {
            font-size: .6rem;
            color: var(--dimmer);
        }

        .hist-item-actions {
            display: flex;
            gap: 4px;
            position: absolute;
            top: 6px;
            right: 6px;
            opacity: 0;
            transition: opacity .2s;
            z-index: 10;
        }

        .hist-item-clicker {
            position: absolute;
            inset: 0;
            z-index: 5;
        }

        .hist-item:hover .hist-item-actions {
            opacity: 1;
        }

        .history.selection-mode .hist-item-actions {
            display: none;
        }

        .hist-act {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: rgba(13, 13, 16, .85);
            border: 1px solid var(--border);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dim);
            transition: color .2s;
        }

        .hist-act:hover {
            color: var(--white);
        }

        .hist-act svg {
            width: 13px;
            height: 13px;
        }

        .hist-item-back {
            transform: rotateY(180deg);
            background: rgba(13, 13, 16, 0.95);
            display: flex;
            flex-direction: column;
            padding: 10px;
            gap: 6px;
            overflow: hidden;
        }

        .hist-item-back::-webkit-scrollbar {
            width: 2px;
        }

        .hist-item-back::-webkit-scrollbar-thumb {
            background: var(--dimmer);
        }

        .hist-back-title {
            font-size: 0.65rem;
            color: var(--dim);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 2px;
            text-align: center;
        }

        .hist-back-btns {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(9, minmax(0, 1fr));
            gap: 5px;
            flex: 1;
            min-height: 0;
        }

        .hist-back-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 0 8px;
            font-size: 0.67rem;
            line-height: 1.25;
            color: var(--dim);
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 0;
        }

        .hist-back-btn:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .hist-back-btn.is-current,
        .hist-back-btn:disabled {
            background: rgba(24, 100, 255, .12);
            border-color: rgba(24, 100, 255, .3);
            color: var(--accent);
            cursor: default;
        }

        .hist-back-close {
            position: absolute;
            top: 4px;
            right: 4px;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: #fff;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }

        .hist-back-close:hover {
            background: var(--accent);
        }

        .hist-item-select {
            position: absolute;
            top: 8px;
            left: 8px;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            background: rgba(0, 0, 0, 0.3);
            cursor: pointer;
            z-index: 20;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
        }

        .history.selection-mode .hist-item-select {
            opacity: 1;
            pointer-events: auto;
        }

        .hist-item-select:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, 0.2);
        }

        .hist-item-select svg {
            width: 12px;
            height: 12px;
            color: #fff;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .hist-item.selected .hist-item-select {
            background: var(--accent);
            border-color: var(--accent);
        }

        .hist-item.selected .hist-item-select svg {
            opacity: 1;
        }

        .hist-empty {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
            color: var(--dimmer);
            font-size: .82rem;
            gap: 8px;
        }

        /* ─── TOOL PANELS (hidden by default, shown via JS) ─── */
        .tool-panel {
            display: none
        }

        .tool-panel.active {
            display: block
        }

        /* scrollbar global */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px
        }

        ::-webkit-scrollbar-track {
            background: transparent
        }

        ::-webkit-scrollbar-thumb {
            background: var(--dimmer);
            border-radius: 4px
        }

        /* Tooltip */
        .tool-btn[data-tip] {
            position: relative
        }

        .tool-btn[data-tip]::after {
            content: attr(data-tip);
            position: absolute;
            left: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%);
            background: var(--bg4);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 5px 10px;
            font-size: .72rem;
            white-space: nowrap;
            color: var(--white);
            pointer-events: none;
            opacity: 0;
            transition: opacity .15s;
            z-index: 200
        }

        .tool-btn[data-tip]:hover::after {
            opacity: 1
        }

        /* ── Topbar icon buttons (language + theme) next to the avatar ─────────── */
        .tb-icon-btn {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: var(--bg3);
            color: var(--dim);
            cursor: pointer;
            transition: color .2s, border-color .2s, background .2s;
            flex: 0 0 auto;
        }

        .tb-icon-btn:hover {
            color: var(--white);
            border-color: rgba(24, 100, 255, .45);
        }

        .tb-icon-btn svg {
            width: 18px;
            height: 18px;
        }

        .studio-lang-root {
            position: relative;
            display: inline-flex;
        }

        .studio-lang-menu {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 150px;
            background: var(--bg2);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 4px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
            z-index: 300;
        }

        .studio-lang-root.open .studio-lang-menu {
            display: block;
        }

        .studio-lang-option {
            display: block;
            width: 100%;
            text-align: left;
            background: transparent;
            border: 0;
            color: var(--dim);
            padding: 7px 10px;
            border-radius: 6px;
            font-size: .82rem;
            cursor: pointer;
        }

        .studio-lang-option:hover {
            background: var(--bg3);
            color: var(--white);
        }

        .studio-lang-option.active {
            color: var(--accent);
        }

        .studio-menu-item-upgrade {
            color: var(--accent);
            font-weight: 600;
        }

        /* ── Light-mode fixes ─────────────────────────────────────────────────── */
        :root[data-theme="light"] .studio-menu-usage-track {
            background: var(--bg3);
        }

        /* flipped history card "more options" back was a hardcoded near-black */
        :root[data-theme="light"] .hist-item-back {
            background: var(--bg2);
        }

        /* loading-thumbnail shimmer (already-generated history images) used a dark
           base -> black card on light while the thumb loads */
        :root[data-theme="light"] .hist-item-placeholder {
            background: linear-gradient(110deg, #e9edf4 8%, #f3f5f9 18%, #e9edf4 33%);
            background-size: 200% 100%;
        }

        /* generating (pending) card placeholder used a dark base -> black on light */
        :root[data-theme="light"] .hist-item.is-pending .hist-item-placeholder {
            background: linear-gradient(110deg,
                #e9edf4 28%,
                rgba(24, 100, 255, .14) 42%,
                rgba(24, 100, 255, .30) 50%,
                rgba(24, 100, 255, .14) 58%,
                #e9edf4 72%);
            background-size: 200% 100%;
        }