:root {
    --page-bg: #f5f7fb;
    --surface-bg: #ffffff;
    --soft-bg: #f8fafc;
    --control-bg: #eef2ff;

    --text-color: #1f2937;
    --secondary-text: #6b7280;
    --muted-text: #9ca3af;

    --border-color: #e5e7eb;
    --accent-color: #5f66ea;

    --control-hover-bg: #dbeafe;
}

body.dark {
    --page-bg: #0a0804;
    --surface-bg: #000000;
    --soft-bg: #070503;
    --control-bg: #110d00;
    --control-hover-bg: #241501;

    --text-color: #f9fafb;
    --secondary-text: #d1d5db;
    --muted-text: #9ca3af;

    --border-color: #1a1814;
    --accent-color: #9ca3ff;
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
    background: var(--page-bg);
    color: var(--text-color);
    min-height: 100vh;
    overflow: hidden;
}

body, html {
    height: 100%;
}

button,
input,
textarea {
    font: inherit;
}

.app-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--page-bg);
    box-shadow: none;
}

.header-main,
.header-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.header-main .title-input {
    margin-left: auto;
    margin-right: auto;
}

#viewModeLabel {
    white-space: nowrap;
    flex-shrink: 0;
}

.title-input {
    border: none;
    background: transparent;
    padding: 8px 0;
    min-width: 220px;
    font-size: 22px;
    outline: none;
}

#viewModeLabel {
    white-space: nowrap;
    flex-shrink: 0;
}

#backToDatabaseBtn,
#duplicateTypingBtn {
    white-space: nowrap;
    flex-shrink: 0;
}

.header-actions {
    display: flex;
    gap: 8px;
}

button {
    border: none;
    border-radius: 999px;
    padding: 7px 11px;
    background: var(--control-bg);
    color: var(--text-color);
    cursor: pointer;
    font-size: 13px;
}

button:hover {
    background: var(--control-hover-bg);
}

.header-actions button {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.projects-menu {
    display: none;
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 40;
    width: min(300px, calc(100vw - 24px));
    max-height: min(320px, calc(100vh - 90px));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px 10px;
    background: var(--surface-bg);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.projects-menu.open {
    display: block;
}

.account-menu {
    display: none;
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 40;
    width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    background: var(--surface-bg);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.account-menu.open {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-menu input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7px 8px;
    box-sizing: border-box;
    margin: 0;
}

.account-menu > button {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    box-sizing: border-box;
}

.account-menu .password-wrapper {
    width: 100%;
}

.account-menu .password-wrapper button {
    margin: 0;
}

.account-menu .status {
    margin: 0;
    font-size: 11px;
    color: var(--accent-color);
}

.database-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.database-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 10px;
    background: var(--soft-bg);
}

.database-item-title {
    font-weight: 700;
    font-size: 12px;
}

.database-item-meta {
    font-size: 10px;
    color: var(--secondary-text);
}

.project-group {
    margin-bottom: 8px;
}

.project-group:first-child {
    margin-top: 0;
}

.projects-menu-header {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}

.projects-toolbar-btn,
.project-action-btn {
    border: none;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--control-bg);
    color: var(--text-color);
    font-size: 11px;
    cursor: pointer;
}

.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: var(--soft-bg);
    padding: 7px 9px;
    border-radius: 10px;
    margin-bottom: 5px;
    font-size: 12px;
    cursor: pointer;
}

.project-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.project-item-preview {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--secondary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secondary-text);
    margin-bottom: 6px;
    cursor: pointer;
}

.folder-title-label {
    flex: 1;
}

.project-group-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 4px;
}

.project-group.collapsed .project-group-items {
    display: none;
}

.project-folder-toggle {
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.template-pill {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--soft-bg);
    padding: 7px 9px;
    border-radius: 10px;
    margin-bottom: 5px;
    font-size: 12px;
}

.template-pill.active {
    background: var(--control-hover-bg);
}

.app-shell {
    display: grid;
    grid-template-columns: minmax(260px, 280px) minmax(0, 960px) minmax(260px, 280px);
    gap: 6px;
    padding: 12px 16px 12px;
    align-items: stretch;
    height: calc(100vh - 74px);
    overflow: hidden;
    justify-content: center;
    box-sizing: border-box;
}

.sidebar,
.center-panel {
    background: var(--surface-bg);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.sidebar {
    border-radius: 6px;
    box-shadow: none;
    border: none;
    outline: none;
}

.center-panel {
    background: var(--page-bg);
    box-shadow: none;
}

.count-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    line-height: 1.1;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 0;
    padding: 0 1px;
    order: 0;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 2px;
    position: relative;
    top: 2px;
    order: 2;
}

.progress-bar > span {
    display: block;
    height: 100%;
    background: var(--control-bg);
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 12px;
}

.results-panel {
    gap: 0;
    background: var(--page-bg);
    box-shadow: none;
}

.results-photo-area {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--secondary-text);
    font-size: 12px;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.results-photo-area.has-images {
    justify-content: flex-start;
    align-items: stretch;
}

.results-photo-area.no-images {
    border-color: transparent;
}

.results-photo-placeholder {
    padding: 8px 12px;
    border-radius: 999px;
    background: transparent;
    font-size: 11px;
    align-self: center;
}

.add-image-btn {
    margin-top: 8px;
    align-self: center;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-color);
    padding: 0;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.add-image-btn::after {
    content: "";
}

.results-photo-area:hover .add-image-btn,
.results-photo-area:focus-within .add-image-btn {
    opacity: 1;
    pointer-events: auto;
}

.results-photo-area:hover .add-image-btn::after,
.results-photo-area:focus-within .add-image-btn::after {
    content: " Add image";
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    justify-content: center;
}

.image-preview-card {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    border-radius: 8px;
    background: transparent;
    cursor: grab;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.image-preview-card:active {
    cursor: grabbing;
}

.image-preview {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    display: block;
}

.image-resize-handle {
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: 12px;
    color: var(--accent-color);
    cursor: nwse-resize;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.image-preview-card:hover .image-resize-handle,
.image-preview-card:focus-within .image-resize-handle {
    opacity: 1;
    pointer-events: auto;
}

.results-list {
    display: none;
}

.result-chip {
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--soft-bg);
    font-size: 12px;
    text-align: center;
    white-space: normal;
    overflow: visible;
    line-height: 1.3;
}

.database-page {
    padding: 24px 20px 32px;
}

.database-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.database-card-header h1 {
    margin: 0 0 6px;
    font-size: 22px;
}

.database-card-header p {
    margin: 0 0 16px;
    color: var(--secondary-text);
}

.database-entry-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.database-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--soft-bg);
    border: 1px solid var(--border-color);
}

.database-item-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.database-item-meta {
    font-size: 12px;
    color: var(--secondary-text);
}

.header-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-color);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.page-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.view-page {
    padding: 24px 20px 32px;
}

.view-card {
    max-width: 960px;
    margin: 0 auto;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.view-title {
    margin: 0 0 8px;
    font-size: 24px;
}

.view-meta,
.view-notes,
.view-preview,
.view-empty {
    margin-bottom: 12px;
    color: var(--secondary-text);
}

.view-preview {
    font-weight: 700;
    color: var(--accent-color);
}

.view-selections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.view-selection-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--soft-bg);
}

.center-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    padding-top: 4px;
    margin-top: 4px;
}

.center-top-stats {
    width: min(100%, 890px);
    margin: -6px auto 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.typing-preview {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-color);
    text-align: center;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    align-self: center;
    order: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

.coin-container {
    width: 100%;
    max-width: 955px;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    overflow: visible;
    max-height: none;
    padding-right: 2px;
    padding-top: 10px;
    margin: 2px auto 0;
}

.coin-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.coin-title-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: min(100%, 320px);
    margin: 0 auto;
}

.coin-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-text);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.coin-definition-input {
    flex: 1;
    min-width: 0;
    border-radius: 6px;
    padding: 3px 5px;
    font-size: 10px;
border: 1px solid var(--border-color);
background: var(--soft-bg);
color: var(--secondary-text);
    text-align: right;
    direction: rtl;
}

.coin-option-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.coin-option-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: min(100%, 955px);
    margin: 0 auto;
}

.coin-option-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 955px);
}

.option-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
border: none;
background: transparent;    border-radius: 0;
    padding: 8px 14px;
    min-height: 53px;
    width: 100%;
    box-sizing: border-box;
    min-width: 260px;
    padding-left: 16px;
    padding-right: 16px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
    cursor: pointer;
    margin-right: -1px;
}

.option-card.selected {
    background: var(--control-bg);
    box-shadow: none;
}

.option-card.slider-mid-selected {
    background: var(--surface-bg);
    box-shadow: inset 0 0 0 1px rgba(95, 102, 234, 0.1);
}

/* SIMPLE MODE — FIXED RAINBOW REVEAL */

.option-card.slider-half-selected,
.option-card.slider-full-selected {
    position: relative;
    overflow: hidden;
background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.option-card.slider-half-selected::before,
.option-card.slider-full-selected::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;

    /*
       This gradient is ALWAYS the width of a full card.
       Changing half/full only changes how much is revealed.
    */
    width: 100%;

background: linear-gradient(
    90deg,
    rgba(255, 90, 90, 0.12) 0%,
    rgba(255, 180, 70, 0.12) 20%,
    rgba(160, 210, 70, 0.12) 40%,
    rgba(60, 200, 180, 0.12) 60%,
    rgba(90, 125, 255, 0.12) 80%,
    rgba(165, 90, 255, 0.12) 100%
);
}


/* LEFT SIDE
   Full = reveal entire gradient.
   Half = reveal only center half.
*/

.option-card.slider-full-selected:not(.reverse)::before {
    left: 0;
}

.option-card.slider-half-selected:not(.reverse)::before {
    left: 0;

-webkit-mask-image: linear-gradient(
    to right,
    transparent 35%,
    rgba(0, 0, 0, 0.25) 44%,
    rgba(0, 0, 0, 0.7) 51%,
    black 56%
);
mask-image: linear-gradient(
    to right,
    transparent 35%,
    rgba(0, 0, 0, 0.25) 44%,
    rgba(0, 0, 0, 0.7) 51%,
    black 56%
);
}


/* RIGHT SIDE — mirrored gradient */

.option-card.slider-full-selected.reverse::before,
.option-card.slider-half-selected.reverse::before {
    right: 0;

background: linear-gradient(
    90deg,
    rgba(165, 90, 255, 0.12) 0%,
    rgba(90, 125, 255, 0.12) 20%,
    rgba(60, 200, 180, 0.12) 38%,
    rgba(160, 210, 70, 0.12) 55%,
    rgba(255, 180, 70, 0.12) 72%,
    rgba(255, 90, 90, 0.12) 88%,
    transparent 100%
);
}

.option-card.slider-half-selected.reverse::before {
    right: 0;

-webkit-mask-image: linear-gradient(
    to left,
    transparent 35%,
    rgba(0, 0, 0, 0.25) 44%,
    rgba(0, 0, 0, 0.7) 51%,
    black 56%
);
mask-image: linear-gradient(
    to left,
    transparent 35%,
    rgba(0, 0, 0, 0.25) 44%,
    rgba(0, 0, 0, 0.7) 51%,
    black 56%
);
}

/* Stronger fade at the outer ends of full selections */

.option-card.slider-full-selected:not(.reverse)::before {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%
    );
}

.option-card.slider-full-selected.reverse::before {
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 12%
    );
    mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 12%
    );
}

.option-card.selected .option-button,
.option-card.slider-half-selected .option-button,
.option-card.slider-full-selected .option-button {
    color: var(--accent-color);
}

.coin-option-row .option-card:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.coin-option-row .option-card:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.coin-option-grid > .option-card {
    min-width: 176px;
    min-height: 53px;
    padding: 5px 8px;
}

.coin-option-grid > .option-card:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.coin-option-grid > .option-card:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.state-definition-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 955px);
    margin: 10px auto 0;
}

.state-definition-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.state-definition-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary-text);
    text-align: center;
}

.state-definition-input {
    min-height: 64px;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1.3;
    background: transparent;
    color: var(--secondary-text);
    resize: none;
    text-align: center;
    outline: none;
    box-shadow: none;
}

.option-button {
    background: transparent;
    border: none;
    border-radius: 0;

    font-size: 14px;
    font-weight: 600;

    padding: 18px 14px;
    margin: -18px -14px;

    width: auto;
    min-width: 18px;

    text-align: center;
    flex-shrink: 0;

    cursor: pointer;
    pointer-events: auto;
    user-select: none;

    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.option-button:hover,
.option-button:active,
.option-button:focus,
.option-button:focus-visible {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.option-button {
    background: transparent;
    color: inherit;
}

.option-definition {
    flex: 1;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;

    font-family: inherit;
    font-size: 11px;
    color: var(--secondary-text);

    min-width: 0;
height: 14px;
max-height: 28px;
padding: 0;
    margin: 0;

    line-height: 14px;

    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;

    box-sizing: border-box;
}

.coin-pair-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 220px);
    margin-top: 0;
    position: static;
    transform: none;
}

.coin-pair-slider {
    width: 100%;
    height: 4px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--border-color);
    border-radius: 999px;
    accent-color: var(--border-color);
}

.coin-pair-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: var(--border-color);
}

.coin-pair-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--border-color);
    border: 1px solid var(--muted-text);
}

.coin-pair-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--border-color);
}

.coin-pair-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    border: 1px solid var(--muted-text);
}

.notes-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding-bottom: 6px;
}

.notes-panel h2 {
    margin: 0;
    font-size: 16px;
}

.notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notes-bullet-btn {
    border: none;
    background: transparent;
    color: var(--accent-color);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

 .notes-toolbar {
    display: flex;
    gap: 6px;
}

.notes-toolbar button {
    padding: 5px 8px;
    border-radius: 999px;
     background: var(--control-bg);
    font-size: 11px;
}

textarea {
    width: 100%;
    min-height: 0;
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    resize: none;
    font-size: 12px;
    line-height: 1.35;
background: var(--soft-bg);
color: var(--secondary-text);
    overflow: auto;
}

.notes-panel.no-images textarea {
    border-color: transparent;
}

#notesArea:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

textarea::placeholder {
    color: var(--muted-text);
}

.results-panel,
.notes-panel {
    width: 100%;
}

@media (max-width: 1120px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
}
.app-brand {
    font-size: 22px;
    font-weight: 400;
    white-space: nowrap;
    padding: 8px 0;
    line-height: 1;
}

.header-main {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.title-input {
    text-align: center;
    max-width: 500px;
    width: 100%;
}

#viewModeLabel {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.left-definition {
    margin-left: auto;
    width: 62%;
}

.right-definition {
    margin-right: auto;
    width: 62%;
    text-align: left;
    direction: ltr;
}

body,
body * {
    font-weight: 400 !important;
}
.password-wrapper {
    display: flex;
    gap: 5px;
}

.password-wrapper input {
    flex: 1;
}

.password-wrapper button {
    cursor: pointer;
}
/* =========================
   OP Studio Popups
========================= */

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);

    display: none;
    align-items: flex-start;
    justify-content: center;

    padding-top: 120px;

    z-index: 9999;
}

.popup-overlay.open {
    display: flex;
}

.popup-box {
    width: 340px;
    max-width: 90vw;

    background: var(--surface-bg);
    color: var(--text-color);

    border-radius: 14px;
    padding: 25px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.25);

    text-align: center;

    animation: popupAppear 0.2s ease-out;
}

.popup-box h2 {
    margin: 0 0 20px;
    font-size: 22px;
}

.popup-box p {
    margin: 0 0 20px;
}

.popup-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.popup-buttons button {
    background: var(--control-bg);
    color: var(--text-color);
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.15s;
}

.popup-buttons button:hover {
    opacity: 0.8;
}


@keyframes popupAppear {

    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}
.view-mode-banner{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 20px;

background: var(--control-bg);
color: var(--text-color);

    gap:12px;

}

.view-mode-banner button{

background: var(--surface-bg);
color: var(--text-color);

    border:none;

    border-radius:8px;

    padding:8px 14px;

    cursor:pointer;

    font-weight:600;

}

.header-main {
    display: flex;
    align-items: center;
    min-width: 0;
}

.header-main .title-input {
    flex: 0 1 auto;
    min-width: 0;
}
/* Published typing header layout */
.header-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
}

#viewModeLabel {
    white-space: nowrap;
    flex: 0 0 auto;
}


.header-main .title-input {
    flex: 0 1 auto;
    min-width: 120px;
}

#viewModeLabel {
    white-space: nowrap;
    flex-shrink: 0;
}


#backToDatabaseBtn,
#duplicateTypingBtn {
    white-space: nowrap;
    flex-shrink: 0;
}


/* Center title when viewing a published typing */

/* Public Database results */
.database-entry-list {
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    box-sizing: border-box;
}

/* Database empty/search state */
.database-empty-state {
    padding: 40px 20px;
    text-align: center;
    opacity: 0.7;
}

/* Keep usernames looking like clickable profile links */
.typing-card-user {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.typing-card-user:hover {
    text-decoration: underline;
}
/* Public database results */
.database-entry-list {
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

/* Keep the database page itself from becoming unnecessarily huge */
.database-page {
    min-height: 0;
}

.database-card {
    min-height: 0;
}

/* Filter layout */
.database-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.database-search-row,
.database-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.database-search-row input {
    flex: 1;
    min-width: 220px;
}

.database-filters select,
.database-filters button,
.database-search-row select {
    min-height: 38px;
}

/* Small information line on each typing */
.typing-card-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 10px;
    font-size: 0.85em;
    opacity: 0.75;
}

/* Username button should look like a username rather than a normal button */
.typing-card-user {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.revealed-type {
    margin-top: 14px;
}

.revealed-type-box {
    padding: 16px;
    border-radius: 14px;
    background: var(--soft-bg);
    border: 1px solid var(--border-color);
}

.revealed-type-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}

.revealed-type-subtitle {
    text-align: center;
    font-size: 13px;
    opacity: 0.65;
    margin-bottom: 14px;
}

.revealed-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.revealed-type-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
}

.revealed-type-label {
    font-size: 12px;
    opacity: 0.65;
}

.revealed-type-option strong {
    font-size: 14px;
}

@media (max-width: 600px) {
    .revealed-type-options {
        grid-template-columns: 1fr;
    }
}
/* =========================
   Database Type Reveal
   ========================= */

.revealed-type {
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--soft-bg);
    border: 1px solid var(--border-color);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

.reveal-type-btn {
    margin-top: 12px;
}
.revealed-type {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
/* =========================
   Profile Page
   ========================= */

.profile-page {
    width: min(1000px, 92%);
    margin: 0 auto;
    padding: 30px 0 60px;
}

.profile-header {
    margin-bottom: 30px;
}

.profile-header h1 {
    margin: 15px 0 8px;
}

.profile-back-btn {
    cursor: pointer;
}

.profile-typings-section h2 {
    margin-bottom: 18px;
}

.profile-typing-card {
    padding: 20px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.profile-typing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.profile-typing-header h3 {
    margin: 0;
}

.profile-typing-info {
    margin: 10px 0 16px;
}

.profile-typing-card button {
    cursor: pointer;
    margin-right: 8px;
}

.notifications-panel {
    position: fixed;
    top: 80px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;

background: var(--surface-bg);
border: 1px solid var(--border-color);
border-radius: 12px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

    display: none;
    z-index: 1000;
}

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

.notifications-panel-header {
    position: sticky;
    top: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 16px;

    background: inherit;
    border-bottom: 1px solid var(--border-color);
}

.notifications-panel-header h2 {
    margin: 0;
}

.notifications-panel-header button {
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
}

.notifications-list {
    padding: 8px;
}

.notification-item {
    width: 100%;
    display: block;

    padding: 12px;
    margin-bottom: 6px;

    border: none;
    border-radius: 8px;

    background: transparent;

    text-align: left;
    cursor: pointer;
}

.notification-item:hover {
    background: rgba(128, 128, 128, 0.12);
}

.notification-item.unread {
    font-weight: 600;
}

.notification-message {
    font-size: 14px;
}

.notification-date {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.65;
}

.notification-empty {
    padding: 20px;
    text-align: center;
    opacity: 0.7;
}

.notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 5px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* =========================
   Messaging
   ========================= */

.messages-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 520px;
}

.conversation-list {
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.chat-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.chat-header h2 {
    margin: 0;
    font-size: 18px;
}

.message-list {
    flex: 1;
    min-height: 380px;
    max-height: 500px;
    overflow-y: auto;

    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-item {
    display: flex;
    width: 100%;
}

.message-mine {
    justify-content: flex-end;
}

.message-theirs {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 16px;
}

.message-mine .message-bubble {
    border-bottom-right-radius: 4px;
    background: var(--accent-color);
}

.message-theirs .message-bubble {
    border-bottom-left-radius: 4px;
    background: var(--soft-bg);
}

.message-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-date {
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.6;
}

.message-form {
    display: flex;
    gap: 8px;

    padding: 12px 16px;

    border-top: 1px solid var(--border-color);
}

.message-form input {
    flex: 1;
    min-width: 0;
}

.message-form button {
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .messages-layout {
        grid-template-columns: 1fr;
    }

    .conversation-list {
        max-height: 180px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .message-bubble {
        max-width: 85%;
    }
}

.conversation-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    background: currentColor;
    vertical-align: middle;
}

.chat-header-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chat-profile-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

/* =========================
   Public Database Card Layout
   ========================= */

.database-page {
    width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}

.database-card {
    width: min(1500px, 100%);
    min-height: 78vh;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.database-entry-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.database-entry-card {
    min-width: 0;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.database-entry-card h2 {
    margin: 2px 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.typing-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.typing-card-user {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.typing-card-user:hover {
    background: transparent;
    box-shadow: none;
}

.typing-card-date {
    font-size: 0.8rem;
    opacity: 0.7;
    white-space: nowrap;
}

.typing-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.88rem;
}

.typing-card-info span {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.database-entry-card .reveal-type-btn,
.database-entry-card .view-typing-btn,
.database-entry-card .delete-typing-btn {
    width: 100%;
    margin: 0;
}

.database-entry-card .delete-typing-btn {
    margin-top: 2px;
}

/* Two cards when the screen gets narrower */
@media (max-width: 1100px) {
    .database-entry-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* One card on small/mobile screens */
@media (max-width: 650px) {
    .database-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .database-entry-list {
        grid-template-columns: 1fr;
    }
}

.typing-access-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.typing-access-modal {
    width: min(460px, calc(100vw - 32px));
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 12px;
    background: var(--surface-bg);
color: var(--text-color);
}

.typing-access-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.typing-access-header h2 {
    margin: 0;
}

.typing-access-users {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.typing-access-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
}

.typing-access-actions {
    display: flex;
    justify-content: flex-end;
}

/* =========================
   Notes list icon
   ========================= */

.notes-bullet-btn {
    position: relative;
    width: 34px;
    height: 30px;
    padding: 0;

    font-size: 0;

    background: transparent !important;
    color: var(--secondary-text) !important;
    border-color: transparent !important;
}

/* Three circular bullets */
.notes-bullet-btn::before {
    content: "";
    position: absolute;

    left: 10px;
    top: 9px;

    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: var(--secondary-text);

box-shadow:
    0 5px 0 var(--secondary-text),
    0 10px 0 var(--secondary-text);
}

/* Three horizontal lines */
.notes-bullet-btn::after {
    content: "";
    position: absolute;

    left: 16px;
    top: 9px;

    width: 9px;
    height: 2px;

    background: var(--secondary-text);

box-shadow:
    0 5px 0 var(--secondary-text),
    0 10px 0 var(--secondary-text);
}

/* =========================
   Lighter panel scrollbars
   ========================= */

#notesArea,
.results-list,
.image-preview-container {
    scrollbar-color: #cbd0d6 transparent;
    scrollbar-width: thin;
}

#notesArea::-webkit-scrollbar,
.results-list::-webkit-scrollbar,
.image-preview-container::-webkit-scrollbar {
    width: 8px;
}

#notesArea::-webkit-scrollbar-track,
.results-list::-webkit-scrollbar-track,
.image-preview-container::-webkit-scrollbar-track {
    background: transparent;
}

#notesArea::-webkit-scrollbar-thumb,
.results-list::-webkit-scrollbar-thumb,
.image-preview-container::-webkit-scrollbar-thumb {
    background: #cbd0d6;
    border-radius: 999px;
}

#notesArea::-webkit-scrollbar-thumb:hover,
.results-list::-webkit-scrollbar-thumb:hover,
.image-preview-container::-webkit-scrollbar-thumb:hover {
    background: #b8bec6;
}

/* =========================
   Wider side panels
   Keep coin-facing edges fixed
   ========================= */

.results-panel {
    width: calc(100% + 45px);
    margin-left: -45px;
    box-sizing: border-box;
}

.notes-panel {
    width: calc(100% + 45px);
    margin-right: -45px;
    box-sizing: border-box;
}

/* =========================
   Lighter scrollbars
   ========================= */

#notesArea,
.results-list,
.image-preview-container {
    scrollbar-color: #cbd0d6 transparent;
    scrollbar-width: thin;
}

#notesArea::-webkit-scrollbar,
.results-list::-webkit-scrollbar,
.image-preview-container::-webkit-scrollbar {
    width: 8px;
}

#notesArea::-webkit-scrollbar-track,
.results-list::-webkit-scrollbar-track,
.image-preview-container::-webkit-scrollbar-track {
    background: transparent;
}

#notesArea::-webkit-scrollbar-thumb,
.results-list::-webkit-scrollbar-thumb,
.image-preview-container::-webkit-scrollbar-thumb {
    background: #cbd0d6;
    border-radius: 999px;
}

#notesArea::-webkit-scrollbar-thumb:hover,
.results-list::-webkit-scrollbar-thumb:hover,
.image-preview-container::-webkit-scrollbar-thumb:hover {
    background: #b8bec6;
}


/* =========================
   Wider outer side panels
   ========================= */

/*
   LEFT:
   Keep the edge beside the coins fixed.
   Expand only toward the left side
   of the screen.
*/
.results-panel {
    width: calc(100% + 45px);
    margin-left: -45px;
    box-sizing: border-box;
}

/*
   RIGHT:
   Keep the edge beside the coins fixed.
   Expand only toward the right side
   of the screen.
*/
.notes-panel {
    width: calc(100% + 45px);
    margin-right: -45px;
    box-sizing: border-box;
}

.title-input {
    resize: none;

    /* Keep it visually one line */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    /* Normal typing behavior */
    direction: ltr;
    text-align: center;
    unicode-bidi: plaintext;

    /* Title text follows the shared theme palette */
color: var(--text-color);

    /* Give the text much more room */
    width: min(520px, 48vw);
    max-width: 100%;

    box-sizing: border-box;

    /* More breathing room before text
       reaches the invisible edges */
    padding-left: 14px;
    padding-right: 14px;

    line-height: 1.35;
}

.title-input {
    scrollbar-width: none;
}

.title-input::-webkit-scrollbar {
    display: none;
}

/* =========================
   Dark mode cleanup
   ========================= */

/* 1. Remove purple tips leaking
   out of halfway-selected coins */


/* Make sure the half highlight itself
   cannot poke outside rounded edges */



/* 3. Remove separate bubbles behind
   the top header buttons */


/* Keep them readable without looking
   like individual colored capsules */


/* 4. Remove separate bubble/background
   behind coin section titles */
/* =========================
   Final dark-mode coin cleanup
   ========================= */

/* O / D, Di / De, etc.
   No separate bubble behind the label */

/* Don't bring the bubble back on hover/focus */


/* Half-selected cards also carry the
   "selected" class, so explicitly remove
   the full-selection outline from them. */

#clearBtn {
    display: none !important;
}

/* Final fix: keep halfway highlight
   slightly inside the rounded coin edge */

/* =========================
   YouTube workspace
   ========================= */

.youtube-player {
}

.youtube-player {
    width: 100%;
    aspect-ratio: 16 / 9;

    position: relative;
    overflow: hidden;

    border-radius: 10px;
    background: #111;
    flex: 0 0 auto;

}

.youtube-player iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
    display: block;

    z-index: 1;
}

/* Search button overlays only a tiny
   top-left portion of the player. */

#youtubeBrowseBtn {
    position: absolute;
    top: 8px;
    left: 55px;

    z-index: 10;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px;
    margin: 0;

    border: none;
    border-radius: 6px;
    outline: none;
    box-shadow: none;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0.85;

    transition:
        opacity 0.12s ease,
        background 0.12s ease;
}

#youtubeBrowseBtn:hover,
#youtubeBrowseBtn:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}

.youtube-search-icon {
    display: block;

    width: 18px;
    height: 18px;

    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;

    filter: drop-shadow(
        0 1px 2px rgba(0, 0, 0, 0.7)
    );
}

/* Search overlay */

.youtube-browse-panel {
    position: absolute;
    inset: 0;

    z-index: 4;

    display: none;
    flex-direction: column;

    background: rgba(17, 24, 39, 0.97);
    color: white;

    overflow: hidden;
}

.youtube-browse-panel.open {
    display: flex;
}

.youtube-browse-header {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 8px;
}

#youtubeSearchInput {
    flex: 1;
    min-width: 0;
    width: 100%;

    border: none;
    border-radius: 999px;

    padding: 7px 10px;

    background: #fff;
    color: #111827;

    outline: none;
}

.youtube-close-btn {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 0;

    background: transparent;
    color: white;

    box-shadow: none;
    outline: none;

    font-size: 20px;
}

.youtube-close-btn:hover {
    background: transparent;
}

.youtube-browse-results {
    flex: 1;
    overflow-y: auto;

    padding: 4px 8px 8px;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.youtube-result-item {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    padding: 6px;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: white;

    text-align: left;
}

.youtube-result-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.youtube-result-thumb {
    flex: 0 0 72px;

    width: 72px;
    aspect-ratio: 16 / 9;

    border-radius: 5px;

    object-fit: cover;
    display: block;
}

.youtube-result-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.youtube-result-text strong {
    font-size: 11px;
}

.youtube-result-text span {
    font-size: 9px;
    opacity: 0.7;
}


/* =========================
   Notification bell
   ========================= */

#notificationsPageBtn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.notification-bell-icon {
    width: 17px;
    height: 17px;

    fill: none;
   stroke: var(--text-color);

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    position: relative;
    top: 2px;
}


/* =========================
   Add-image dark hover cleanup
   ========================= */

.youtube-player {
    transform: translateY(31.59375px);
}

#youtubeBrowseBtn {
    transform: translateY(-31.09375px);
}

#notesArea {
    transform: translateY(-8.50625px);
    clip-path: inset(1.6px 0 0 0);
}

/* YouTube search bar above player */
.youtube-player {
    overflow: visible;
}

.youtube-player iframe {
    border-radius: 10px;
    overflow: hidden;
}

.youtube-browse-panel,
.youtube-browse-panel.open {
    display: flex;
    position: absolute;

    left: 0;
    right: 0;
    top: -31.09375px;
    bottom: auto;

    height: 31.09375px;

    background: transparent;
    color: inherit;
    overflow: visible;

    z-index: 20;
}

.youtube-browse-header {
    width: 100%;
    height: 31.09375px;

    padding: 0;
    gap: 4px;

    box-sizing: border-box;
}

#youtubeSearchInput {
    height: 28px;
    padding: 4px 9px;

    border-radius: 7px;
    border: none;

    background: transparent;
    color: inherit;

    box-shadow: none;
    outline: none;
}

.youtube-close-btn {
    display: none;
}

.youtube-browse-results {
    position: absolute;
    top: 31.09375px;
    left: 0;
    right: 0;

    max-height: 260px;
    overflow-y: auto;

    padding: 4px 6px;

    background: rgba(17, 24, 39, 0.96);
    border-radius: 8px;
}

#youtubeBrowseBtn {
    display: none !important;
}

/* YouTube search-row controls */

#youtubeBrowseBtn {
    display: none !important;
}

.youtube-browse-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.youtube-control-btn {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px;

    border: none;
    border-radius: 7px;

    background: transparent;
    color: var(--secondary-text);

    box-shadow: none;
    outline: none;

    cursor: pointer;

    opacity: 0.75;
    transition:
        opacity 0.12s ease,
        background 0.12s ease;
}

.youtube-control-btn:hover {
    opacity: 1;
    background: var(--control-hover-bg);
}

.youtube-control-btn svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#youtubeSearchInput {
    flex: 1;
}

/* YouTube on/off state */

body.youtube-disabled #youtubePlayer {
    display: none !important;
}

body.youtube-disabled #youtubeSearchInput,
body.youtube-disabled #youtubeExpandBtn,
body.youtube-disabled .youtube-browse-results {
    display: none !important;
}

body.youtube-disabled #youtubeToggleBtn {
    position: absolute;
    top: 0;
    left: 0;
}

.youtube-toggle-btn.off {
    opacity: 0.45;
}

/* Keep YouTube power control fixed in search row position */

#youtubeToggleBtn {
    position: absolute;
    z-index: 30;

    left: 0;
    top: 0;

    transform: translateY(0);

    width: 28px;
    height: 28px;
}

.youtube-browse-header {
    padding-left: 33px;
}

/* OFF must not reposition the power button */
body.youtube-disabled #youtubeToggleBtn {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(0);
}

.results-panel {
    position: relative;
}

/* Expanded YouTube mode */

body.youtube-expanded .center-panel {
    padding: 10px 12px;
    margin-top: 4px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    overflow: hidden;
}

/* Hide only the top stats while expanded */
body.youtube-expanded .center-top-stats {
    display: none !important;
}

/* Large YouTube player stays at the top */
body.youtube-expanded .center-panel #youtubePlayer {
    width: min(100%, 900px);

    aspect-ratio: 16 / 9;

    transform: none !important;

    margin: 0 auto 8px;

    flex: 0 0 auto;
}

/* Coins use all remaining space below the video */
body.youtube-expanded #coinContainer {
    display: grid !important;

    flex: 1 1 auto;
    min-height: 0;

    width: 100%;
    max-width: 955px;

    margin: 0 auto;

    overflow-y: auto;
    overflow-x: hidden;

    padding-top: 4px;
    padding-right: 6px;
    padding-bottom: 8px;
}

body.youtube-expanded .center-panel #youtubePlayer {
    order: 1;
}

body.youtube-expanded #coinContainer {
    order: 2;
}

/* Final expanded YouTube alignment */

body.youtube-expanded .center-panel {
    margin-top: 0;

    padding:
    40px
    12px
    10px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    height: 100%;
    min-height: 0;
    overflow: hidden;
}


/* YouTube: same horizontal bounds as coin area */
body.youtube-expanded .center-panel #youtubePlayer {
    order: 1;

    width: 100%;
    max-width: 955px;

    box-sizing: border-box;

    margin:
        0 auto 8px;

    transform: none !important;

    flex: 0 0 auto;

    aspect-ratio: 16 / 9;
}


/* Coins fill ONLY the remaining height */
body.youtube-expanded #coinContainer {
    order: 2;

    width: 100%;
    max-width: 955px;

    box-sizing: border-box;

    flex: 1 1 0;
    min-height: 0;

    margin: 0 auto;
    padding:
        4px
        2px
        0;

    overflow-y: auto;
    overflow-x: hidden;
}


/* Stats stay hidden in expanded mode */
body.youtube-expanded .center-top-stats {
    display: none !important;
}

/* Match expanded YouTube width to visible coin bounds */

body.youtube-expanded .center-panel #youtubePlayer {
    width: 100%;
max-width: 955px;

    margin-left: auto;
    margin-right: auto;
}


/* Keep coin content visually centered even with scrollbar */

body.youtube-expanded #coinContainer {
    width: 100%;
    max-width: 955px;

    padding-left: 0;
    padding-right: 0;

    scrollbar-gutter: auto;

    box-sizing: border-box;
}

body.youtube-expanded .center-panel #youtubePlayer,
body.youtube-expanded .center-panel #youtubeIframe {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

body.youtube-expanded .center-panel #youtubeIframe {
    display: block;
}

body.youtube-expanded .center-panel #youtubePlayer {
    overflow: visible;
    background: transparent !important;
}

/* Restore exact YouTube player dimensions */

#youtubePlayer {
    background: transparent !important;
    overflow: visible;
}

#youtubeIframe {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    border-radius: 10px;
}

body.youtube-expanded .center-panel #youtubePlayer {
    overflow: visible;
}

#youtubePlayer,
.youtube-player {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#youtubePlayer::before,
#youtubePlayer::after,
.youtube-player::before,
.youtube-player::after {
    content: none !important;
    display: none !important;
}

/* Hide empty YouTube search-results overlay */
.youtube-browse-results:not(:has(.youtube-result-item)) {
    display: none !important;
}

/* Fine-tune expanded YouTube vertical position */
body.youtube-expanded .center-panel {
    padding-top: 41px !important;
    padding-bottom: 0 !important;
}

/* Align YouTube power button with search bar — little mode only */
body:not(.youtube-expanded) #youtubeToggleBtn {
    top: 11.55px !important;
    left: 12px !important;
    transform: none !important;

    width: 28px;
    height: 28px;
}

/* YouTube OFF: fixed image top alignment */
body.youtube-disabled #imageUploadArea {
    padding-top: 31.0958282470703125px !important;
    justify-content: flex-start !important;
}

body.youtube-disabled #imagePreviewContainer {
    margin-top: 0 !important;
    align-self: stretch;
}

/* Expanded YouTube: image stays at same normal top position */
body.youtube-expanded #imageUploadArea {
    padding-top: 29px !important;
    justify-content: flex-start !important;
}

body.youtube-expanded #imagePreviewContainer {
    margin-top: 0 !important;
    align-self: stretch;
    justify-content: flex-start !important;
}

/* Keep the actual image's rounded corners */
body.youtube-disabled .image-preview-card,
body.youtube-disabled .image-preview,
body.youtube-expanded .image-preview-card,
body.youtube-expanded .image-preview {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Image size changes downward, not from its top */
/* Image always grows downward from the same fixed top */
body.youtube-disabled .image-preview-card,
body.youtube-expanded .image-preview-card {
    transform-origin: top center !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.youtube-expanded .image-preview {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: top center !important;
    border-radius: 10px !important;
}

/* Little YouTube ON: place image properly below visible player */
body:not(.youtube-disabled):not(.youtube-expanded) #imageUploadArea {
    margin-top: 31.09375px !important;
}

/* Pin image resize handle to bottom-right corner */
.image-preview-card {
    position: relative !important;
}

.image-resize-handle {
    position: absolute !important;
    right: 3px !important;
    bottom: 1px !important;
}

/* YouTube OFF + no image: keep Add image centered */
body.youtube-disabled #imageUploadArea:not(.has-images) {
    padding-top: 0 !important;
    justify-content: center !important;
    align-items: center !important;
}

body.youtube-disabled #imageUploadArea:not(.has-images) #imagePlaceholder {
    margin: 0 !important;
}

/* Expanded YouTube: keep image centered while resizing */
body.youtube-expanded #imagePreviewContainer {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

body.youtube-expanded .image-preview-card {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================================
   EXPANDED YOUTUBE — KEEP LIVE IFRAME MOUNTED
   ===================================================== */

/*
   Never move #youtubePlayer out of the results panel.
   In expanded mode, visually place that same live
   iframe over the center panel.
*/
body.youtube-expanded #youtubePlayer {
    position: fixed !important;

    left: var(--yt-expanded-left) !important;
    top: var(--yt-expanded-top) !important;

    width: var(--yt-expanded-width) !important;
    height: var(--yt-expanded-height) !important;

    max-width: none !important;
    aspect-ratio: auto !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 20 !important;
}


/*
   Reserve the exact space the player previously
   occupied inside the center panel.
*/
body.youtube-expanded .center-panel {
    padding-top: var(--yt-expanded-space) !important;
    padding-bottom: 0 !important;
}


/*
   Coins fill the remaining center-panel height.
*/
body.youtube-expanded #coinContainer {
    flex: 1 1 0 !important;
    min-height: 0 !important;

    width: 100% !important;
    max-width: 955px !important;

    margin: 0 auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/*
   Player remains visible even though its real DOM
   parent is still the left results panel.
*/
body.youtube-expanded .results-panel {
    overflow: visible !important;
}

/* Expanded mode: lower ONLY the left image */
body.youtube-expanded #imagePreviewContainer {
    transform: translateY(2.09375px) !important;
}

/* Let image use the same horizontal width as small YouTube */
#imageUploadArea.has-images #imagePreviewContainer {
    width: calc(100% + 20px) !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}

/* Keep YouTube power button pixel-identical in every mode */
#youtubeToggleBtn {
    position: absolute !important;
    top: 11.55px !important;
    left: 12px !important;
    transform: none !important;

    width: 28px !important;
    height: 28px !important;
}

/* Hide YouTube search results after the search panel closes */
.youtube-browse-panel:not(.open) .youtube-browse-results {
    display: none !important;
}

/* =========================
   Notes + control cleanup
   ========================= */

/* Remove Notes panel background completely */
.notes-panel {
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove gray Notes textarea background */
#notesArea {
    background: transparent !important;
}

/* Move Notes title slightly to the right */
/* Align Notes header controls with textarea writing width */
.notes-header {
    padding-left: 2px;
    padding-right: 8px;
    box-sizing: border-box;
}

.notes-header h2 {
    transform: none;
}


/* Custom bullet/list icon:
   its visible pieces are pseudo-elements,
   so recolor those directly. */


/* YouTube power/close + expand/minimize:
   no resting button bubble or outline in dark mode. */

/* Keep resting/focus states clean */


/* Parenthesized animal half-selection:
   exactly 50% of the card's total surface area,
   centered horizontally and vertically. */
.option-card.special-half-selected {
    position: relative;
    overflow: hidden;
background: transparent !important;
    box-shadow: none !important;
    isolation: isolate;
}

.option-card.special-half-selected::before {
    content: "";
    position: absolute;

    width: 70.710678%;
    height: 70.710678%;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background: linear-gradient(
        90deg,
        rgba(255, 90, 90, 0.12) 0%,
        rgba(255, 180, 70, 0.12) 20%,
        rgba(160, 210, 70, 0.12) 40%,
        rgba(60, 200, 180, 0.12) 60%,
        rgba(90, 125, 255, 0.12) 80%,
        rgba(165, 90, 255, 0.12) 100%
    );

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 18%,
        black 82%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 18%,
        black 82%,
        transparent 100%
    );

    pointer-events: none;
    z-index: -1;
}

/* ONLY (P) and (B) */
.option-card.special-half-selected.special-rainbow-reversed::before {
    background: linear-gradient(
        90deg,
        rgba(165, 90, 255, 0.12) 0%,
        rgba(90, 125, 255, 0.12) 20%,
        rgba(60, 200, 180, 0.12) 40%,
        rgba(160, 210, 70, 0.12) 60%,
        rgba(255, 180, 70, 0.12) 80%,
        rgba(255, 90, 90, 0.12) 100%
    );
}

/* ONLY (P) and (B) — full selection */
.option-card.slider-full-selected.special-rainbow-reversed::before {
    background: linear-gradient(
        90deg,
        rgba(165, 90, 255, 0.12) 0%,
        rgba(90, 125, 255, 0.12) 20%,
        rgba(60, 200, 180, 0.12) 40%,
        rgba(160, 210, 70, 0.12) 60%,
        rgba(255, 180, 70, 0.12) 80%,
        rgba(255, 90, 90, 0.12) 100%
    );
}

.option-card.special-half-selected .option-button {
    color: var(--accent-color);
}

/* Bottom four — full/double-click selection:
   return to the normal full rainbow behavior */
.option-card.slider-full-selected:not(.special-half-selected)::before {
    width: 100%;
    height: auto;
    top: 0;
    bottom: 0;
    transform: none;
}

/* Full LEFT selection — fade both outer edges */
.option-card.slider-full-selected:not(.reverse)::before {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%
    );
}

.option-card.slider-full-selected.reverse::before {
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 12%
    );

    mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 12%
    );
}

/* Bottom 4 ONLY — full selection fades on BOTH sides */
.special-option-grid
.option-card.slider-full-selected:not(.reverse)::before {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

.special-option-grid
.option-card.slider-full-selected.reverse::before {
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

/* Four parenthesized animal definitions */
.option-card textarea.special-option-definition {
    height: 3.1em;
    min-height: 3.1em;
    max-height: none;

    resize: none;
    overflow: hidden;

    line-height: 1.35;
    padding-top: 2px;
    padding-bottom: 2px;

    flex: 1;
}

/* Database cards:
   updated indicator never affects card size */
.database-entry-card {
    position: relative;
}

/* Small, secondary update indicator */
.typing-card-updated {
    position: absolute;

    top: 7px;
    right: 9px;

    font-size: 9px;
    line-height: 1;

    opacity: 0.42;

    white-space: nowrap;
    pointer-events: auto;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    box-shadow: none;
}

/* Keep database titles from changing card height */
.database-entry-card h2 {
    line-height: 1.25;
    min-height: 2.5em;
    max-height: 2.5em;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    text-overflow: ellipsis;
}

#notesArea {
    padding-left: 2px;
    padding-top: 0;
    line-height: 1.1 !important;
    font-size: 13.1px;
}

.notes-header {
    transform: translateY(-7.6px);
    padding-top: 2px;
    margin-top: -2px;
}

#notesArea {
    border-radius: 0 !important;
}

/* Settings menu */

.settings-menu {
    display: none;
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 40;
    width: min(340px, calc(100vw - 24px));
    padding: 12px;
background: var(--surface-bg);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.settings-menu.open {
    display: block;
}

.settings-menu-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-label-group strong {
    font-size: 12px;
}

.settings-label-group span {
    font-size: 10px;
    color: var(--muted-text);
}

#coinSelectionMode {
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 7px;
    background: var(--control-bg);
    color: var(--text-color);
    font-size: 11px;
}

#settingsBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

.settings-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Database content tabs */

.database-content-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.database-content-tab {
    padding: 9px 16px;
    border: 1px solid var(--border-color, #d6d6d6);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    opacity: 0.65;
}

.database-content-tab:hover {
    opacity: 1;
}

.database-content-tab.active {
    opacity: 1;
    font-weight: 600;
    background: rgba(127, 127, 127, 0.12);
}

/* =========================
   Published Definitions Preview
========================= */

.definition-preview-modal {
    width: min(1040px, calc(100vw - 48px));
    max-width: 1040px;
    height: auto;
    max-height: none;

    padding: 18px 28px;

    overflow: hidden;

    box-sizing: border-box;

background: var(--page-bg);
color: var(--text-color);

    display: flex;
    flex-direction: column;
}

.definition-preview-modal .typing-access-header {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.definition-preview-coins {
    width: 100%;
    max-width: 955px;

    overflow: visible;

    margin: 0 auto;
    padding: 10px 2px 16px 0;

    box-sizing: border-box;
}

.definition-preview-modal .typing-access-actions {
    flex: 0 0 auto;
    width: 100%;
    max-width: 955px;
    margin: 8px auto 0;
}

.definition-preview-modal .copy-definitions-btn {
    margin-left: auto;
}

#accountBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-typings-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#profileTypings {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px 46px;

    max-height: 430px;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 8px 6px 8px 0;
}

#profileTypings .database-entry-card {
    min-width: 0;
}

/* Database bookmark icon */
.database-entry-card {
    position: relative;
}

.bookmark-typing-btn {
    position: absolute;
    top: 38px;
    right: 14px;

    padding: 0;
    margin: 0;

    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

/* Show an empty bookmark while interacting with the card */
.database-entry-card:hover .bookmark-typing-btn,
.bookmark-typing-btn:focus-visible {
    opacity: 1;
}

.bookmark-typing-btn:hover {
    transform: scale(1.12);
}

/* A saved bookmark always remains visible */
.bookmark-typing-btn.bookmarked {
    opacity: 1;
}

.option-card textarea.option-definition:not(.special-option-definition) {
    border-radius: 0;
}

.coin-option-row {
    position: relative;
}

.coin-certainty-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;

    width: 22px;
    height: 22px;
    padding: 0;

    border-radius: 50%;
    border: none;
    background: var(--surface-bg);

    font-size: 12px;
    line-height: 20px;
    text-align: center;

    cursor: pointer;
}

.option-card.precise-selected {
    background:
        linear-gradient(
            to left,
            var(--selected-color, #dbeafe)
                0%,
            var(--selected-color, #dbeafe)
                var(--precise-fill),
            var(--coin-normal-bg, white)
                var(--precise-fill),
            var(--coin-normal-bg, white)
                100%
        );
}

.option-card.precise-selected.reverse {
    background:
        linear-gradient(
            to right,
            var(--selected-color, #dbeafe)
                0%,
            var(--selected-color, #dbeafe)
                var(--precise-fill),
            var(--coin-normal-bg, white)
                var(--precise-fill),
            var(--coin-normal-bg, white)
                100%
        );
}

/* Notes — extremely subtle scrollbar */
#notesArea {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.08) transparent;
}

/* Scrollbar width */
#notesArea::-webkit-scrollbar {
    width: 5px;
}

/* Completely remove arrow buttons */
#notesArea::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* No visible track */
#notesArea::-webkit-scrollbar-track {
    background: transparent !important;
}

/* Invisible until Notes is hovered */
#notesArea::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 999px;
}

/* Very faint when Notes is hovered */
#notesArea:hover::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.08) !important;
}

/* Still faint when mouse is directly over the bar */
#notesArea:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.08) !important;
}

/* Notes — hide native scrollbar completely */
#notesArea {
    scrollbar-width: none;
}

#notesArea::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Notes panel needs to anchor our custom indicator */
.notes-panel {
    position: relative;
}

/* Custom Notes scrollbar */
.notes-scroll-indicator {
    position: absolute;
    right: 3px;
    width: 6px;
    min-height: 20px;

    border-radius: 999px;
    background: rgba(156, 163, 175, 0.08);

    opacity: 0;
    pointer-events: auto;
cursor: grab;
z-index: 10;

    transition: opacity 0.15s ease;
}

.notes-scroll-indicator:active {
    cursor: grabbing;
}

/* Only show while hovering Notes */
.notes-panel:hover .notes-scroll-indicator {
    opacity: 1;
}

/* Notes top/bottom fade overlays */
.notes-fade {
    position: absolute;
    left: 0;
    right: 8px;
    height: 28px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notes-fade-top {
    background: linear-gradient(
        to bottom,
        var(--soft-bg) 0%,
        transparent 100%
    );
}

.notes-fade.visible {
    opacity: 1;
}

/* ==================================================
   DATABASE — CLEAN LAYOUT
   ================================================== */

.database-page {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 34px 40px 60px;
    background: var(--page-bg);
}

/* Main database area — no giant outlined card */
.database-card {
    width: min(1400px, 100%);
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Typings / Definitions ---------- */

.database-tabs {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    padding: 3px;
    margin-bottom: 24px;

    background: var(--soft-bg);
    border-radius: 9px;
}

.database-tabs button {
    padding: 7px 14px;
    margin: 0;

    border: none;
    border-radius: 7px;

    background: transparent;
    color: var(--secondary-text);

    font-size: 13px;
    box-shadow: none;
}

.database-tabs button:hover {
    background: var(--control-bg);
    color: var(--text-color);
}

.database-tabs button.active {
    background: var(--surface-bg);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

/* ---------- Heading ---------- */

.database-card-header {
    margin-bottom: 18px;
}

.database-card-header h1 {
    margin: 0 0 4px;
    font-size: 23px;
    line-height: 1.2;
    color: var(--text-color);
}

.database-card-header p {
    margin: 0;
    font-size: 13px;
    color: var(--secondary-text);
}

/* ---------- Search + filters ---------- */

.database-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.database-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.database-search-row input {
    flex: 1;
    min-width: 0;
}

.database-search-row input,
.database-search-row select,
.database-filters select {
    height: 36px;
    box-sizing: border-box;

    padding: 0 11px;

    border: none;
    border-radius: 8px;

    background: var(--soft-bg);
    color: var(--text-color);

    outline: none;
    box-shadow: none;
}

.database-search-row input:focus,
.database-search-row select:focus,
.database-filters select:focus {
    background: var(--control-bg);
}

/* Keep sort reasonably small */
.database-search-row select {
    flex: 0 0 130px;
}

.database-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.database-filters select {
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
}

.database-filters button {
    min-height: 34px;
    margin: 0;
    padding: 0 12px;

    border: none;
    border-radius: 8px;

    background: var(--control-bg);
    color: var(--text-color);

    box-shadow: none;
}

.database-filters button:hover {
    background: var(--control-hover-bg);
}

/* Remove native-looking focus outlines */
.database-page input:focus,
.database-page select:focus,
.database-page button:focus {
    outline: none;
}

/* Mobile */
@media (max-width: 700px) {
    .database-page {
        padding: 20px 14px 40px;
    }

    .database-search-row {
        flex-wrap: wrap;
    }

    .database-search-row select {
        flex: 1 1 120px;
    }
}
/* Database — centered layout */

.database-card-header {
    text-align: center;
}

.database-toolbar {
    width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.database-tabs {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.database-entry-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.database-entry-card {
    min-height: 0;
    height: auto;
    align-self: start;
    gap: 6px;
    padding: 12px;
}

.database-entry-card .reveal-type-btn {
    margin-top: 8px;
}

.database-entry-card .view-typing-btn {
    margin-top: 0;
}

/* Database header — match Studio title */

.database-page .page-title {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    padding: 8px 0;
    margin: 0;
    text-align: left;
}

/* Database — compact top alignment */

.database-page {
    padding-top: 6px;
}

.database-content-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    width: fit-content;
    margin: 0 auto 8px;
}

.database-content-tab {
    border: none;
    border-radius: 7px;
    padding: 6px 12px;

    background: transparent;
    color: var(--secondary-text);

    box-shadow: none;
}

.database-content-tab.active {
    background: var(--control-bg);
    color: var(--text-color);
}

.database-card-header:empty {
    display: none;
}

.database-toolbar {
    width: min(1200px, 100%);
    margin: 0 auto 18px;
}

/* Public Database title — match OP Studio */
.app-header .page-title {
    font-size: 22px;
}

/* ==================================================
   DATABASE — SLEEK TYPING CARDS
   ================================================== */

.database-entry-card {
    position: relative;

    padding: 15px 16px 13px;
    gap: 8px;

    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;

    box-shadow: none;

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

.database-entry-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.06);
}


/* Username + bookmark/date area */

.typing-card-header {
    margin-bottom: 1px;
}


/* Typing title */

.database-entry-card h2 {
    margin: 2px 0 5px;

    font-size: 15px;
    line-height: 1.3;

    color: var(--text-color);
}


/* Reveal Type becomes the centerpiece */

.database-entry-card .reveal-type-btn {
    width: 100%;
    min-height: 40px;

    margin: 2px 0 5px;
    padding: 8px 10px;

    border: none;
    border-radius: 9px;

    background: var(--soft-bg);
    color: var(--text-color);

    box-shadow: none;
}

.database-entry-card .reveal-type-btn:hover {
    background: var(--control-bg);
}


/* View Typing — small quiet action */

.database-entry-card .view-typing-btn {
    width: fit-content;
    min-height: 0;

    margin: 0;
    padding: 5px 9px;

    border: none;
    border-radius: 7px;

    background: transparent;
    color: var(--accent-color);

    box-shadow: none;
}

.database-entry-card .view-typing-btn:hover {
    background: var(--control-bg);
}

/* ==================================================
   PROFILE — PUBLISHED TYPINGS
   ================================================== */

#profileTypings,
#profileDefinitions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

#profileTypings .database-entry-card,
#profileDefinitions .database-entry-card {
    min-width: 0;
    height: auto;
    align-self: start;
}

@media (max-width: 900px) {
    #profileTypings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #profileTypings {
        grid-template-columns: 1fr;
    }
}

#profileTypings .profile-view-typing-btn {
    width: fit-content;
    min-height: 0;

    margin: 0;
    padding: 5px 9px;

    border: none;
    border-radius: 7px;

    background: transparent;
    color: var(--accent-color);

    box-shadow: none;
}

#profileTypings .profile-view-typing-btn:hover {
    background: var(--control-bg);
}

/* PROFILE DEFINITIONS — match Typings controls exactly */

.profile-definition-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    width: 100%;
    margin-bottom: 12px;
}

#profileDefinitionSearch {
    flex: 1 1 calc(100% - 153px);
    min-width: 0;
}

#profileDefinitionSort {
    flex: 0 0 145px;
}

#profileDefinitionDateFilter {
    flex: 0 0 auto;
    width: auto;
}

#clearProfileDefinitionFilters {
    flex: 0 0 auto;
}

.profile-definition-controls input,
.profile-definition-controls select,
.profile-definition-controls button {
    min-height: 42px;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    background: var(--soft-bg);
    color: var(--text-color);
    font: inherit;
    box-sizing: border-box;
}

.profile-definition-controls input {
    font-size: inherit;
}

.profile-definition-controls select {
    cursor: pointer;
}

#clearProfileDefinitionFilters {
    background: var(--control-bg);
}

/* ==================================================
   PROFILE — PUBLISHED TYPINGS SEARCH AREA
   Match Public Database
   ================================================== */

.profile-typings-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 100%;
    margin: 0 0 18px;
}

.profile-typing-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profileTypingSearch {
    flex: 1;
    min-width: 0;
}

#profileTypingSearch,
#profileTypingSort,
#profileTypingTypeFilter,
#profileTypingPossibilitiesFilter,
#profileTypingDateFilter {
    height: 36px;
    box-sizing: border-box;

    padding: 0 11px;

    border: none;
    border-radius: 8px;

    background: var(--soft-bg);
    color: var(--text-color);

    outline: none;
    box-shadow: none;
}

#profileTypingSearch:focus,
#profileTypingSort:focus,
#profileTypingTypeFilter:focus,
#profileTypingPossibilitiesFilter:focus,
#profileTypingDateFilter:focus {
    background: var(--control-bg);
}

.profile-typing-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-typing-filters button {
    min-height: 34px;
    margin: 0;
    padding: 0 12px;

    border: none;
    border-radius: 8px;

    background: var(--control-bg);
    color: var(--text-color);

    box-shadow: none;
}

.profile-typing-filters button:hover {
    background: var(--control-hover-bg);
}

/* ==================================================
   PROFILE — CENTER HEADER CONTENT
   ================================================== */

.profile-header,
.profile-info,
.profile-main-info {
    text-align: center;
}

#profileUsername,
#profileBio {
    text-align: center;
}

.profile-stats {
    justify-content: center;
}

.profile-actions {
    justify-content: center;
}

/* Published Typings heading */
.profile-typings-section > h2,
.profile-typings-section > h3 {
    text-align: center;
}

/* Profile navigation — top right */

#backToTypingBtn,
#backToDatabaseBtn {
    position: fixed;
    top: 14px;
    z-index: 1000;
}

#backToDatabaseBtn {
    right: 14px;
}

#backToTypingBtn {
    right: 135px;
}

/* Profile — move identity area upward */

.profile-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

#profileHeader {
    text-align: center;
    margin-top: -38px;
    margin-bottom: 12px;
}

#profileUsername {
    margin-top: 0;
    margin-bottom: 5px;
}

#profileBio {
    margin-bottom: 8px;
}

.profile-stats {
    justify-content: center;
    margin-top: 10px;
}

.profile-typings-section {
    margin-top: 8px;
}

.profile-typings-section > h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 12px;
}

/* ==================================================
   PROFILE — TITLE ROW
   ================================================== */

#profileHeader {
    position: relative;
    text-align: left;

    padding-right: 430px;

    /* slightly lower than our previous position */
    margin-top: -28px;
    margin-bottom: 14px;
}

#profileUsername {
    margin: 4px 0 5px;
    text-align: left;
}

#profileBio {
    margin: 0;
    text-align: left;
}


/* Edit Profile + stats */

#editProfileBtn {
    position: absolute;
    top: 2px;
    right: 330px;
}

.profile-stats {
    position: absolute;
    top: 0;
    right: 0;

    display: flex;
    align-items: center;
    gap: 22px;

    margin: 0;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 62px;
}

.profile-stat strong {
    line-height: 1.1;
}

.profile-stat span {
    font-size: 12px;
    color: var(--secondary-text);
}

/* Profile — Typings / Definitions */

.profile-content-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    width: fit-content;
    margin: 0 auto 8px;
}

.profile-content-tab {
    border: none;
    border-radius: 7px;

    padding: 6px 12px;

    background: transparent;
    color: var(--secondary-text);

    box-shadow: none;
}

.profile-content-tab.active {
    background: var(--control-bg);
    color: var(--text-color);
}

/* ==================================================
   PROFILE — CENTERED TITLE + CONTENT ROW
   ================================================== */

#profileHeader {
    text-align: center;
    padding-right: 0;
}

#profileUsername {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#profileBio {
    text-align: center;
}


/* Original edit button is still used by JS,
   but the row button is what we display */

#editProfileBtn {
    display: none !important;
}


/* Main row */

.profile-content-row {
    position: relative;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: 100%;
    margin: 10px 0 12px;
}


/* Center tabs */

.profile-content-tabs {
    grid-column: 2;

    display: flex;
    align-items: center;
    gap: 4px;

    width: fit-content;
    margin: 0;
}


/* Left controls */

.profile-row-left {
    grid-column: 1;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}


/* Right stats */

.profile-row-right {
    grid-column: 3;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}


/* Stats */

.profile-content-row .profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 60px;
}

.profile-content-row .profile-stat strong {
    line-height: 1.1;
}

.profile-content-row .profile-stat span {
    margin-top: 2px;
    font-size: 12px;
    color: var(--secondary-text);
}


/* Tabs */

.profile-content-tab {
    border: none;
    border-radius: 7px;

    padding: 6px 12px;

    background: transparent;
    color: var(--secondary-text);
}

.profile-content-tab.active {
    background: var(--control-bg);
    color: var(--text-color);
}

.profile-content-tab:focus,
.profile-content-tab:focus-visible {
    outline: none;
}

.profile-content-tab {
    border: none;
}

#profileDefinitionDateFilter {
    min-width: 0;
    width: 160px;
}

#clearProfileDefinitionFilters {
    white-space: nowrap;
}