/* Zippy Gizmos combined widget css - generated by combined.php, do not edit */

/* == calculator == */
/* Calculator Gizmo Styles */

/* === DISPLAY === */
.gizmo-calc-display {
    background: var(--header-bg);
    color: var(--header-text);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    text-align: right;
    overflow: hidden;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gizmo-calc-expression {
    font-size: 0.85rem;
    opacity: 0.7;
    min-height: 1.2em;
    word-break: break-all;
    font-family: 'Courier New', Courier, monospace;
}

.gizmo-calc-result {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.2;
    word-break: break-all;
}

/* === BUTTON GRID === */
.gizmo-calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.gizmo-calc-grid--sci {
    grid-template-columns: repeat(5, 1fr);
}

/* === BUTTONS === */
.gizmo-calc-btn {
    padding: 12px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-align: center;
    user-select: none;
    line-height: 1.2;
}

.gizmo-calc-btn:hover {
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.gizmo-calc-btn:active {
    transform: translateY(0);
    opacity: 0.85;
}

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

.gizmo-calc-btn--operator:hover {
    background: var(--accent-secondary);
}

.gizmo-calc-btn--equals {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.gizmo-calc-btn--equals:hover {
    filter: brightness(1.1);
}

.gizmo-calc-btn--clear {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.gizmo-calc-btn--clear:hover {
    filter: brightness(1.1);
}

.gizmo-calc-btn--sci {
    background: var(--bg-secondary);
    color: var(--accent-primary);
    font-size: 0.8rem;
    border-color: var(--border-color);
}

.gizmo-calc-btn--sci:hover {
    background: var(--accent-primary);
    color: #fff;
}

.gizmo-calc-btn--wide {
    grid-column: span 2;
}

/* === MODE TOGGLE === */
.gizmo-calc-modes {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.gizmo-calc-mode-btn {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.gizmo-calc-mode-btn--active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* === HISTORY === */
.gizmo-calc-history {
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.gizmo-calc-history__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.gizmo-calc-history__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-calc-history__clear {
    padding: 4px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--danger);
    border-radius: 4px;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    transition: all 0.2s;
}

.gizmo-calc-history__clear:hover {
    background: var(--danger);
    color: #fff;
}

.gizmo-calc-history__list {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gizmo-calc-history__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.gizmo-calc-history__item:hover {
    background: var(--border-color);
}

.gizmo-calc-history__expr {
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

.gizmo-calc-history__result {
    color: var(--accent-primary);
    font-weight: 600;
    white-space: nowrap;
}

.gizmo-calc-history__empty {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 16px;
    font-size: 0.9rem;
}

/* === BACK LINK === */
/* === KEYBOARD HINT === */
.gizmo-calc-keyboard-hint {
    margin-top: 12px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* === WIDGET MODE (compact) === */
.gizmo-calc--widget .gizmo-calc-display {
    padding: 8px 12px;
    min-height: 48px;
    margin-bottom: 8px;
}

.gizmo-calc--widget .gizmo-calc-expression {
    font-size: 0.75rem;
}

.gizmo-calc--widget .gizmo-calc-result {
    font-size: 1.4rem;
}

.gizmo-calc--widget .gizmo-calc-grid {
    gap: 4px;
}

.gizmo-calc--widget .gizmo-calc-btn {
    padding: 8px 4px;
    font-size: 0.9rem;
}

.gizmo-calc--full .gizmo-calc-display {
    padding: 16px 20px;
    min-height: 80px;
}

.gizmo-calc--full .gizmo-calc-result {
    font-size: 2.2rem;
}

.gizmo-calc--full .gizmo-calc-btn {
    padding: 16px 10px;
    font-size: 1.1rem;
}

.gizmo-calc--full .gizmo-calc-grid {
    gap: 8px;
}

/* === ERROR STATE === */
.gizmo-calc-result--error {
    color: var(--danger) !important;
    font-size: 1.2rem !important;
}


/* == alarm == */
/* Alarm Clock Gizmo Styles */

/* === CLOCK DISPLAY === */
.gizmo-alarm-clock {
    font-family: 'Courier New', Courier, monospace;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: 2px;
}

.gizmo-alarm-ampm {
    font-size: 0.4em;
    font-weight: 400;
    vertical-align: super;
    margin-left: 4px;
    color: var(--accent-primary);
}

.gizmo-alarm-date {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 4px;
    margin-bottom: 16px;
}

/* === NEXT ALARM INDICATOR === */
.gizmo-alarm-next {
    text-align: center;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.gizmo-alarm-next__label {
    color: var(--accent-primary);
    font-weight: 600;
}

.gizmo-alarm-next--none {
    opacity: 0.5;
    font-style: italic;
}

/* === ADD ALARM FORM === */
.gizmo-alarm-form {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.gizmo-alarm-form__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gizmo-alarm-form__label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gizmo-alarm-form__time {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'Courier New', Courier, monospace;
}

.gizmo-alarm-form__time:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
}

.gizmo-alarm-form__input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
    flex: 1;
    min-width: 120px;
}

.gizmo-alarm-form__input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
}

.gizmo-alarm-form__btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.gizmo-alarm-form__btn:hover {
    background: var(--accent-secondary);
}

/* === ALARM LIST === */
.gizmo-alarm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gizmo-alarm-list__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.gizmo-alarm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}

.gizmo-alarm-item--disabled {
    opacity: 0.5;
}

.gizmo-alarm-item__time {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 90px;
}

.gizmo-alarm-item__label {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gizmo-alarm-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === TOGGLE SWITCH === */
.gizmo-alarm-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.gizmo-alarm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.gizmo-alarm-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-color);
    border-radius: 24px;
    transition: background 0.3s;
}

.gizmo-alarm-toggle__slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.gizmo-alarm-toggle input:checked + .gizmo-alarm-toggle__slider {
    background: var(--success);
}

.gizmo-alarm-toggle input:checked + .gizmo-alarm-toggle__slider::before {
    transform: translateX(20px);
}

/* === DELETE BUTTON === */
.gizmo-alarm-delete {
    padding: 4px 8px;
    border: 1px solid var(--danger);
    border-radius: 4px;
    background: transparent;
    color: var(--danger);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.gizmo-alarm-delete:hover {
    background: var(--danger);
    color: #fff;
}

/* === EMPTY STATE === */
.gizmo-alarm-empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 24px;
    font-size: 0.9rem;
}

/* === ALARM OVERLAY - appears on any page === */
.gizmo-alarm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: gizmo-alarm-fadein 0.3s ease;
}

@keyframes gizmo-alarm-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gizmo-alarm-overlay__box {
    background: var(--bg-card, #fff);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    animation: gizmo-alarm-pulse 1.5s ease-in-out infinite;
}

@keyframes gizmo-alarm-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 30px rgba(229, 62, 62, 0.3); }
}

.gizmo-alarm-overlay__icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    animation: gizmo-alarm-shake 0.5s ease-in-out infinite;
}

@keyframes gizmo-alarm-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.gizmo-alarm-overlay__time {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
    margin-bottom: 0.25rem;
}

.gizmo-alarm-overlay__label {
    color: var(--text-secondary, #4a5568);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.gizmo-alarm-overlay__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.gizmo-alarm-overlay__stop {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: var(--danger, #e53e3e);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s;
}

.gizmo-alarm-overlay__stop:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.gizmo-alarm-overlay__snooze {
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #1a202c);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.gizmo-alarm-overlay__snooze:hover {
    background: var(--border-color, #e2e8f0);
    transform: scale(1.05);
}

/* === RINGING INDICATOR === */
.gizmo-alarm-ringing {
    animation: gizmo-alarm-border-flash 1s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes gizmo-alarm-border-flash {
    0%, 100% { box-shadow: 0 0 0 2px var(--danger); }
    50% { box-shadow: 0 0 12px 2px var(--danger); }
}

/* === BACK LINK === */
/* === WIDGET MODE (compact) === */
.gizmo-alarm--widget .gizmo-alarm-clock {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.gizmo-alarm--widget .gizmo-alarm-date {
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.gizmo-alarm--widget .gizmo-alarm-next {
    padding: 6px 10px;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.gizmo-alarm--widget .gizmo-alarm-form {
    flex-direction: column;
    gap: 6px;
}

.gizmo-alarm--widget .gizmo-alarm-form__group {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.gizmo-alarm--widget .gizmo-alarm-form__label {
    display: none;
}

.gizmo-alarm--widget .gizmo-alarm-form__time {
    padding: 6px 8px;
    font-size: 0.9rem;
    flex: 1;
}

.gizmo-alarm--widget .gizmo-alarm-form__btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.gizmo-alarm--full .gizmo-alarm-clock {
    font-size: 4.5rem;
    margin-bottom: 4px;
}

.gizmo-alarm--full .gizmo-alarm-date {
    font-size: 1rem;
    margin-bottom: 24px;
}


/* == stopwatch == */
/* ===== Stopwatch & Timer Gizmo ===== */

/* === Display === */
.gizmo-sw-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    padding: 0.75rem 0;
    letter-spacing: 2px;
    user-select: none;
}

.gizmo-sw-display--large {
    font-size: 4rem;
    padding: 1.5rem 0;
}

.gizmo-sw-display--timer {
    transition: color 0.3s;
}

.gizmo-sw-display--danger {
    color: var(--danger);
}

/* === Controls === */
.gizmo-sw-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.gizmo-sw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s, opacity 0.2s;
    line-height: 1.4;
    min-width: 80px;
}

.gizmo-sw-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.gizmo-sw-btn:active {
    transform: translateY(0);
}

.gizmo-sw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.gizmo-sw-btn--start {
    background-color: var(--success);
    color: #fff;
}

.gizmo-sw-btn--stop {
    background-color: var(--danger);
    color: #fff;
}

.gizmo-sw-btn--reset {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.gizmo-sw-btn--reset:hover {
    background-color: var(--border-color);
}

.gizmo-sw-btn--lap {
    background-color: var(--accent-primary);
    color: #fff;
}

/* === Tabs === */
.gizmo-sw-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.gizmo-sw-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.gizmo-sw-tab:hover {
    color: var(--text-primary);
}

.gizmo-sw-tab--active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.gizmo-sw-tab-content {
    display: none;
}

.gizmo-sw-tab-content--active {
    display: block;
}

/* === Laps === */
.gizmo-sw-laps {
    margin-top: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.gizmo-sw-laps__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.gizmo-sw-laps__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.gizmo-sw-laps__clear {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.gizmo-sw-laps__clear:hover {
    background-color: var(--bg-secondary);
}

.gizmo-sw-laps__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.gizmo-sw-laps__table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
}

.gizmo-sw-laps__table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: 'Courier New', Courier, monospace;
}

.gizmo-sw-laps__empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
}

/* === Timer Input === */
.gizmo-sw-timer-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.gizmo-sw-timer-input__field {
    width: 70px;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.gizmo-sw-timer-input__field:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-sw-timer-input__sep {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0 0.15rem;
}

.gizmo-sw-timer-input__label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    display: block;
    margin-top: 0.25rem;
}

.gizmo-sw-timer-input__group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* === Presets === */
.gizmo-sw-presets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.gizmo-sw-preset {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.gizmo-sw-preset:hover {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    color: #fff;
}

/* === Progress Ring === */
.gizmo-sw-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 1rem auto;
    width: 220px;
    height: 220px;
}

.gizmo-sw-progress__ring {
    transform: rotate(-90deg);
}

.gizmo-sw-progress__bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
}

.gizmo-sw-progress__fill {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s;
}

.gizmo-sw-progress__fill--danger {
    stroke: var(--danger);
}

.gizmo-sw-progress__time {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* === Flash Animation === */
.gizmo-sw-flash {
    animation: gizmo-sw-flash-anim 0.5s ease-in-out infinite alternate;
}

@keyframes gizmo-sw-flash-anim {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* === Widget Mode (compact) === */
.gizmo-sw-widget .gizmo-sw-display {
    font-size: 2rem;
    padding: 0.5rem 0;
}

.gizmo-sw-widget .gizmo-sw-controls {
    padding: 0.25rem 0;
}

.gizmo-sw-widget .gizmo-sw-btn {
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    min-width: 65px;
}

/* Widget Tabs */
.gizmo-sw-widget .gizmo-sw-tabs--widget {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0.75rem;
}

.gizmo-sw-widget .gizmo-sw-tabs--widget .gizmo-sw-tab {
    flex: 1;
    padding: 0.4rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.gizmo-sw-widget .gizmo-sw-tabs--widget .gizmo-sw-tab:hover {
    color: var(--text-primary);
}

.gizmo-sw-widget .gizmo-sw-tabs--widget .gizmo-sw-tab--active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* Widget Timer Input */
.gizmo-sw-widget-timer-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.gizmo-sw-widget-timer-field {
    width: 45px;
    text-align: center;
    font-size: 1.1rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    padding: 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.gizmo-sw-widget-timer-field:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.15);
}

.gizmo-sw-widget-timer-sep {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Widget Preset Pills */
.gizmo-sw-widget-presets {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.gizmo-sw-widget-preset {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.gizmo-sw-widget-preset:hover {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    color: #fff;
}

.gizmo-sw-widget-preset:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Widget Timer Display */
.gizmo-sw-widget .gizmo-sw-widget-timer-display {
    font-size: 1.75rem;
    padding: 0.25rem 0;
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-sw-display--large {
        font-size: 2.5rem;
    }

    .gizmo-sw-timer-input__field {
        width: 55px;
        font-size: 1.25rem;
    }

    .gizmo-sw-progress {
        width: 180px;
        height: 180px;
    }

    .gizmo-sw-progress__time {
        font-size: 1.5rem;
    }

    .gizmo-sw-btn {
        min-width: 70px;
        padding: 0.4rem 0.75rem;
        font-size: 0.875rem;
    }
}


/* == todo == */
/* ===== Todo List Gizmo ===== */

/* === Input Row === */
.gizmo-todo-input-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gizmo-todo-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gizmo-todo-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-todo-add-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.1s;
}

.gizmo-todo-add-btn:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-1px);
}

.gizmo-todo-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gizmo-todo-add-btn:disabled:hover {
    background-color: var(--accent-primary);
    transform: none;
}

.gizmo-todo-add-btn:active {
    transform: translateY(0);
}

/* === Full Page Add Section === */
.gizmo-todo-add-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.gizmo-todo-add-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gizmo-todo-add-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.gizmo-todo-add-options label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.gizmo-todo-priority-select,
.gizmo-todo-due-input {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-card);
}

.gizmo-todo-due-input {
    width: auto;
}

/* === Toolbar (Filters, Sort, Search) === */
.gizmo-todo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.gizmo-todo-filters {
    display: flex;
    gap: 0.25rem;
}

.gizmo-todo-filter-btn {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gizmo-todo-filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-todo-filter-btn--active {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.gizmo-todo-filter-btn--active:hover {
    color: #fff;
}

.gizmo-todo-sort {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    cursor: pointer;
}

.gizmo-todo-search {
    flex: 1;
    min-width: 150px;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.gizmo-todo-search:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

/* === Todo List === */
.gizmo-todo-list {
    min-height: 50px;
}

.gizmo-todo-list--empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9375rem;
}

/* === Todo Item === */
.gizmo-todo-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s, opacity 0.2s;
}

.gizmo-todo-item:last-child {
    border-bottom: none;
}

.gizmo-todo-item:hover {
    background-color: var(--bg-secondary);
}

.gizmo-todo-item:hover .gizmo-todo-delete {
    opacity: 1;
}

.gizmo-todo-item--completed .gizmo-todo-text {
    text-decoration: line-through;
    opacity: 0.5;
}

.gizmo-todo-item--completed .gizmo-todo-priority {
    opacity: 0.4;
}

.gizmo-todo-item--overdue .gizmo-todo-due {
    color: var(--danger);
    font-weight: 600;
}

/* === Checkbox === */
.gizmo-todo-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    background-color: var(--bg-card);
}

.gizmo-todo-checkbox:hover {
    border-color: var(--accent-primary);
}

.gizmo-todo-checkbox--checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.gizmo-todo-checkbox--checked::after {
    content: '\2713';
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* === Priority === */
.gizmo-todo-priority {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.gizmo-todo-priority--high {
    background-color: var(--danger);
}

.gizmo-todo-priority--medium {
    background-color: var(--warning);
}

.gizmo-todo-priority--low {
    background-color: var(--success);
}

/* Full page: priority as pill badge */
.gizmo-todo-full .gizmo-todo-priority {
    width: auto;
    height: auto;
    border-radius: 12px;
    padding: 0.1rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* === Todo Text === */
.gizmo-todo-text {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-primary);
    word-break: break-word;
    cursor: default;
}

.gizmo-todo-text--editing {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    outline: none;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

/* === Due Date === */
.gizmo-todo-due {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* === Delete Button === */
.gizmo-todo-delete {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
    line-height: 1;
}

.gizmo-todo-delete:hover {
    background-color: var(--bg-secondary);
}

/* === Stats Bar === */
.gizmo-todo-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

.gizmo-todo-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding-top: 0.25rem;
}

.gizmo-todo-clear-btn {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--danger);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.gizmo-todo-clear-btn:hover {
    background-color: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* === Widget Mode (compact) === */
.gizmo-todo-widget .gizmo-todo-input-row {
    margin-bottom: 0.5rem;
}

.gizmo-todo-widget .gizmo-todo-input {
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
}

.gizmo-todo-widget .gizmo-todo-add-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
}

.gizmo-todo-widget .gizmo-todo-item {
    padding: 0.4rem 0.25rem;
    gap: 0.4rem;
}

.gizmo-todo-widget .gizmo-todo-text {
    font-size: 0.8125rem;
}

.gizmo-todo-widget .gizmo-todo-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.gizmo-todo-widget .gizmo-todo-checkbox--checked::after {
    font-size: 0.625rem;
}

.gizmo-todo-widget .gizmo-todo-delete {
    font-size: 0.9rem;
    opacity: 0.5;
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-todo-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gizmo-todo-filters {
        justify-content: center;
    }

    .gizmo-todo-search {
        min-width: 0;
    }

    .gizmo-todo-add-options {
        flex-direction: column;
        align-items: stretch;
    }

    .gizmo-todo-item {
        flex-wrap: wrap;
    }

    .gizmo-todo-due {
        width: 100%;
        padding-left: 2.6rem;
    }

    .gizmo-todo-delete {
        opacity: 0.5;
    }
}


/* == currency == */
/* ===== Currency Converter Gizmo ===== */

.gizmo-currency-converter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gizmo-currency-converter--full {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Row: select + input/result */
.gizmo-currency-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gizmo-currency-select {
    width: 90px;
    flex-shrink: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.gizmo-currency-converter--full .gizmo-currency-select {
    width: 110px;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
}

.gizmo-currency-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

/* Amount input */
.gizmo-currency-amount {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
}

.gizmo-currency-converter--full .gizmo-currency-amount {
    padding: 0.6rem 0.75rem;
    font-size: 1.25rem;
}

.gizmo-currency-amount:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

/* Remove number input spinners */
.gizmo-currency-amount::-webkit-inner-spin-button,
.gizmo-currency-amount::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.gizmo-currency-amount[type="number"] {
    -moz-appearance: textfield;
}

/* Result display */
.gizmo-currency-result {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    color: var(--accent-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gizmo-currency-result--full {
    padding: 0.6rem 0.75rem;
    font-size: 1.25rem;
}

/* Swap button */
.gizmo-currency-swap-wrap {
    display: flex;
    justify-content: center;
    padding: 0.15rem 0;
}

.gizmo-currency-converter--full .gizmo-currency-swap-wrap {
    padding: 0.35rem 0;
}

.gizmo-currency-swap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.3s;
}

.gizmo-currency-converter--full .gizmo-currency-swap {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
}

.gizmo-currency-swap:hover {
    background-color: var(--accent-primary);
    color: #fff;
}

.gizmo-currency-swap--spinning {
    transform: rotate(180deg);
}

/* Error message */
.gizmo-currency-error {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background-color: var(--danger);
    color: #fff;
    font-size: 0.8125rem;
    text-align: center;
}

/* ===== Full mode sections ===== */

.gizmo-currency-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-currency-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* Multi-convert */
.gizmo-currency-multi__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
}

.gizmo-currency-multi__checks label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.gizmo-currency-multi__checks input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

.gizmo-currency-multi__body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.gizmo-currency-multi__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
}

.gizmo-currency-multi__code {
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-currency-multi__value {
    color: var(--accent-primary);
    font-weight: 600;
}

.gizmo-currency-multi__empty {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    grid-column: 1 / -1;
}

/* Rate table */
.gizmo-currency-rate-table {
    width: 100%;
    border-collapse: collapse;
}

.gizmo-currency-rate-table th,
.gizmo-currency-rate-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

.gizmo-currency-rate-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gizmo-currency-rate-table td {
    color: var(--text-primary);
}

/* History */
.gizmo-currency-history__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.gizmo-currency-history__header h2 {
    margin-bottom: 0;
}

.gizmo-currency-history__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}

.gizmo-currency-history__item:last-child {
    border-bottom: none;
}

.gizmo-currency-history__conversion {
    color: var(--text-primary);
    font-weight: 500;
}

.gizmo-currency-history__time {
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.gizmo-currency-history__empty {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
}

/* Footer */
.gizmo-currency-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-currency-updated {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ===== Responsive ===== */
@media (max-width: 575px) {
    .gizmo-currency-multi__body {
        grid-template-columns: 1fr;
    }

    .gizmo-currency-footer {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .gizmo-currency-history__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .gizmo-currency-history__time {
        margin-left: 0;
    }
}


/* == news == */
/* ===== News Feed Gizmo ===== */

/* === Loading === */
.gizmo-news-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
    gap: 0.5rem;
}

.gizmo-news-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: gizmo-news-spin 0.8s linear infinite;
}

@keyframes gizmo-news-spin {
    to { transform: rotate(360deg); }
}

/* === Error === */
.gizmo-news-error {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--danger);
    font-size: 0.875rem;
}

.gizmo-news-error__retry {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.3rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.gizmo-news-error__retry:hover {
    background-color: var(--border-color);
}

/* === Article List === */
.gizmo-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* === Widget Mode (compact) === */
.gizmo-news-widget .gizmo-news-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.gizmo-news-widget .gizmo-news-item:last-child {
    border-bottom: none;
}

.gizmo-news-widget .gizmo-news-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
}

.gizmo-news-widget .gizmo-news-title:hover {
    color: var(--accent-primary);
}

.gizmo-news-widget .gizmo-news-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.gizmo-news-widget .gizmo-news-description,
.gizmo-news-widget .gizmo-news-image {
    display: none;
}

/* === Source Badge === */
.gizmo-news-source {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
}

.gizmo-news-source--voa {
    background-color: #005ea2;
    color: #fff;
}

.gizmo-news-source--globalvoices {
    background-color: #5c8727;
    color: #fff;
}

.gizmo-news-source--unnews {
    background-color: #009edb;
    color: #fff;
}

.gizmo-news-source--theconversation {
    background-color: #d8352a;
    color: #fff;
}

.gizmo-news-source--default {
    background-color: var(--accent-primary);
    color: #fff;
}

/* === Time === */
.gizmo-news-time {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.gizmo-news-full__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gizmo-news-full__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* === Filters === */
.gizmo-news-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.gizmo-news-filter-btn {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.gizmo-news-filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-news-filter-btn--active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.gizmo-news-filter-btn--active::before {
    content: '\2713';
    margin-right: 0.3rem;
    font-weight: 700;
}

.gizmo-news-filter-btn--active:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #fff;
}

/* === Toolbar === */
.gizmo-news-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gizmo-news-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.gizmo-news-refresh:hover {
    background-color: var(--border-color);
}

.gizmo-news-updated {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* === Full Mode Article Card === */
.gizmo-news-full .gizmo-news-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    background-color: var(--bg-card);
}

.gizmo-news-full .gizmo-news-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.gizmo-news-card {
    display: flex;
    padding: 1rem;
    gap: 1rem;
}

.gizmo-news-card__body {
    flex: 1;
    min-width: 0;
}

.gizmo-news-full .gizmo-news-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 0.35rem;
    transition: color 0.2s;
}

.gizmo-news-full .gizmo-news-title:hover {
    color: var(--accent-primary);
}

.gizmo-news-description {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.gizmo-news-full .gizmo-news-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* === Article Image === */
.gizmo-news-image {
    width: 120px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
}

/* === Load More === */
.gizmo-news-load-more {
    display: block;
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}

.gizmo-news-load-more:hover {
    background-color: var(--border-color);
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-news-card {
        flex-direction: column-reverse;
    }

    .gizmo-news-image {
        width: 100%;
        height: 160px;
    }

    .gizmo-news-full__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .gizmo-news-filters {
        width: 100%;
    }

    .gizmo-news-filter-btn {
        flex: 1;
        text-align: center;
    }
}


/* == search == */
/* ===== Web Search Gizmo ===== */

/* === Widget Mode === */
.gizmo-search-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-search-bar {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.gizmo-search-bar:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-search-input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9375rem !important;
    box-shadow: none !important;
    outline: none !important;
    min-width: 0;
}

.gizmo-search-input:focus {
    box-shadow: none !important;
}

.gizmo-search-back {
    flex-shrink: 0;
    padding: 0.5rem 0.8rem;
    border: none;
    border-right: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s;
}

.gizmo-search-back:hover:not(:disabled) {
    color: var(--accent-primary);
}

.gizmo-search-back:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.gizmo-search-btn {
    padding: 0.5rem 1rem;
    border: none;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.gizmo-search-btn:hover {
    background-color: var(--accent-secondary);
}

/* === Engine Selector === */
.gizmo-search-engines {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.gizmo-search-engine {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.gizmo-search-engine:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-search-engine--active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.gizmo-search-engine--active:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #fff;
}

.gizmo-search-full__hero {
    text-align: center;
    padding: 2rem 0 1.5rem;
}

.gizmo-search-full__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.gizmo-search-full .gizmo-search-bar {
    max-width: 560px;
    margin: 0 auto 1rem;
    box-shadow: var(--shadow);
}

.gizmo-search-full .gizmo-search-input {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
}

.gizmo-search-full .gizmo-search-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.gizmo-search-full .gizmo-search-back {
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.gizmo-search-full .gizmo-search-engines {
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.gizmo-search-full .gizmo-search-engine {
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
}

/* === Search History === */
.gizmo-search-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-search-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.gizmo-search-section__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-search-clear-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--danger);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.gizmo-search-clear-btn:hover {
    background-color: var(--border-color);
}

.gizmo-search-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gizmo-search-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 0.5rem;
}

.gizmo-search-history-item:hover {
    background-color: var(--bg-secondary);
}

.gizmo-search-history-query {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gizmo-search-history-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.gizmo-search-history-engine {
    text-transform: capitalize;
}

.gizmo-search-history-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

/* === Quick Links === */
.gizmo-search-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gizmo-search-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}

.gizmo-search-quick-link:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-search-quick-link__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s, background-color 0.2s;
}

.gizmo-search-quick-link__remove:hover {
    color: var(--danger);
    background-color: var(--border-color);
}

/* === Add Quick Link Form === */
.gizmo-search-add-link {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.gizmo-search-add-link__input {
    flex: 1;
    min-width: 100px;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8125rem !important;
    border-radius: 6px !important;
}

.gizmo-search-add-link__btn {
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 6px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.gizmo-search-add-link__btn:hover {
    background-color: var(--accent-secondary);
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-search-full__hero {
        padding: 1rem 0;
    }

    .gizmo-search-full__title {
        font-size: 1.375rem;
    }

    .gizmo-search-add-link {
        flex-direction: column;
    }

    .gizmo-search-add-link__input {
        width: 100%;
    }
}


/* == weather == */
/* ===== Weather Gizmo (Full Page) ===== */

.gizmo-weather__search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gizmo-weather__search-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

.gizmo-weather__search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-weather__unit-btn {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.gizmo-weather__unit-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Search results */
.gizmo-weather__results {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    max-height: 200px;
    overflow-y: auto;
}

.gizmo-weather__result-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.gizmo-weather__result-item:last-child {
    border-bottom: none;
}

.gizmo-weather__result-item:hover {
    background-color: var(--accent-primary);
    color: #fff;
}

.gizmo-weather__result-country {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.gizmo-weather__result-item:hover .gizmo-weather__result-country {
    color: rgba(255,255,255,0.7);
}

/* Current weather card */
.gizmo-weather__current-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.gizmo-weather__current-main {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.gizmo-weather__current-icon {
    font-size: 4rem;
    line-height: 1;
}

.gizmo-weather__current-temp {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.gizmo-weather__current-details {
    flex: 1;
    min-width: 0;
}

.gizmo-weather__current-city {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.gizmo-weather__current-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.gizmo-weather__current-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Sections */
.gizmo-weather__section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-weather__section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.gizmo-weather__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.gizmo-weather__section-header h2 {
    margin-bottom: 0;
}

/* Hourly forecast */
.gizmo-weather__hourly-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.gizmo-weather__hourly-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 70px;
}

.gizmo-weather__hourly-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.gizmo-weather__hourly-icon {
    font-size: 1.25rem;
}

.gizmo-weather__hourly-temp {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-weather__hourly-precip {
    font-size: 0.65rem;
    color: var(--accent-primary);
}

/* Daily forecast */
.gizmo-weather__daily {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-weather__daily-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.gizmo-weather__daily-day {
    width: 80px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-weather__daily-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.gizmo-weather__daily-temps {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.gizmo-weather__daily-high {
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-weather__daily-low {
    color: var(--text-secondary);
}

.gizmo-weather__daily-bar {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.gizmo-weather__daily-bar-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(to right, var(--accent-primary), var(--warning));
    border-radius: 2px;
}

.gizmo-weather__daily-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
    min-width: 80px;
}

/* Saved locations */
.gizmo-weather__saved {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}

.gizmo-weather__saved-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.gizmo-weather__saved-item:hover {
    border-color: var(--accent-primary);
}

.gizmo-weather__saved-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.gizmo-weather__saved-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.25rem;
    line-height: 1;
}

.gizmo-weather__saved-remove:hover {
    color: var(--danger);
}

.gizmo-weather__empty {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
    grid-column: 1 / -1;
}

/* Error */
.gizmo-weather__error {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background-color: var(--danger);
    color: #fff;
    font-size: 0.8125rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 575px) {
    .gizmo-weather__current-main {
        flex-wrap: wrap;
    }

    .gizmo-weather__current-temp {
        font-size: 2.5rem;
    }

    .gizmo-weather__current-icon {
        font-size: 3rem;
    }

    .gizmo-weather__daily-item {
        flex-wrap: wrap;
    }

    .gizmo-weather__daily-bar {
        display: none;
    }

    .gizmo-weather__saved {
        grid-template-columns: 1fr;
    }

    .gizmo-weather__search {
        flex-wrap: wrap;
    }
}

/* === Air quality badge (US EPA index) === */
.gizmo-weather__aqi {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}
.gizmo-weather__aqi--1 { background: #43a047; }
.gizmo-weather__aqi--2 { background: #c0a029; }
.gizmo-weather__aqi--3 { background: #fb8c00; }
.gizmo-weather__aqi--4 { background: #e53935; }
.gizmo-weather__aqi--5 { background: #8e24aa; }
.gizmo-weather__aqi--6 { background: #7e0023; }


/* == dictionary == */
/* ===== Dictionary Gizmo (Full Page) ===== */

.gizmo-dictionary__search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.gizmo-dictionary__back-btn {
    flex-shrink: 0;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.gizmo-dictionary__back-btn:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-dictionary__back-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.gizmo-dictionary__search-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

.gizmo-dictionary__search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-dictionary__audio-btn {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1.125rem;
    cursor: pointer;
}

.gizmo-dictionary__audio-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Result */
.gizmo-dictionary__result {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.gizmo-dictionary__result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.gizmo-dictionary__word {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.gizmo-dictionary__phonetic {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 0.25rem;
}

.gizmo-dictionary__fav-btn {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s, transform 0.2s;
    padding: 0.25rem;
}

.gizmo-dictionary__fav-btn:hover,
.gizmo-dictionary__fav-btn.is-favorited {
    color: var(--warning);
    transform: scale(1.15);
}

/* Meanings */
.gizmo-dictionary__meanings {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gizmo-dictionary__meaning {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-dictionary__meaning:first-child {
    padding-top: 0;
    border-top: none;
}

.gizmo-dictionary__pos {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.gizmo-dictionary__def-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-dictionary__def-item {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
    padding-left: 1rem;
    position: relative;
}

.gizmo-dictionary__def-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    background: var(--accent-primary);
    border-radius: 50%;
}

.gizmo-dictionary__example {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 0.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-color);
}

.gizmo-dictionary__synonyms,
.gizmo-dictionary__antonyms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.gizmo-dictionary__syn-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-right: 0.25rem;
    align-self: center;
}

.gizmo-dictionary__syn-tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.gizmo-dictionary__syn-tag:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-dictionary__ant-tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--danger);
    cursor: pointer;
}

.gizmo-dictionary__ant-tag:hover {
    border-color: var(--danger);
}

/* Sections */
.gizmo-dictionary__section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-dictionary__section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.gizmo-dictionary__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.gizmo-dictionary__section-header h2 {
    margin-bottom: 0;
}

/* History & Favorites */
.gizmo-dictionary__history,
.gizmo-dictionary__favorites {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gizmo-dictionary__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s;
}

.gizmo-dictionary__tag:hover {
    border-color: var(--accent-primary);
}

.gizmo-dictionary__tag-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    line-height: 1;
}

.gizmo-dictionary__tag-remove:hover {
    color: var(--danger);
}

.gizmo-dictionary__empty {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
    width: 100%;
}

/* Error */
.gizmo-dictionary__error {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background-color: var(--danger);
    color: #fff;
    font-size: 0.8125rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 575px) {
    .gizmo-dictionary__result {
        padding: 1rem;
    }

    .gizmo-dictionary__word {
        font-size: 1.5rem;
    }

    .gizmo-dictionary__search {
        flex-wrap: wrap;
    }
}


/* == qrcode == */
/* ===== QR Code Gizmo (Full Page) ===== */

.gizmo-qrcode__generator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.gizmo-qrcode__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Type tabs */
.gizmo-qrcode__type-tabs {
    display: flex;
    gap: 0.35rem;
}

.gizmo-qrcode__type-tab {
    flex: 1;
    padding: 0.5rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.gizmo-qrcode__type-tab:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.gizmo-qrcode__type-tab.is-active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* Type panels */
.gizmo-qrcode__type-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-qrcode__textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    font-family: 'Inter', system-ui, sans-serif;
    box-sizing: border-box;
}

.gizmo-qrcode__textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-qrcode__field {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    box-sizing: border-box;
}

.gizmo-qrcode__field:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Options */
.gizmo-qrcode__options {
    display: flex;
    gap: 0.75rem;
}

.gizmo-qrcode__option {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gizmo-qrcode__option label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.gizmo-qrcode__option .gizmo-qrcode__field {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}

.gizmo-qrcode__color {
    width: 100%;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background: none;
    padding: 2px;
}

.gizmo-qrcode__generate-btn {
    margin-top: 0.25rem;
}

/* Preview */
.gizmo-qrcode__preview-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.gizmo-qrcode__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    min-height: 250px;
    min-width: 250px;
}

.gizmo-qrcode__preview img {
    max-width: 100%;
    image-rendering: pixelated;
}

.gizmo-qrcode__preview-placeholder {
    color: #999;
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

.gizmo-qrcode__preview-actions {
    display: flex;
    gap: 0.5rem;
}

/* Section */
.gizmo-qrcode__section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-qrcode__section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.gizmo-qrcode__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.gizmo-qrcode__section-header h2 {
    margin-bottom: 0;
}

/* History */
.gizmo-qrcode__history {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.gizmo-qrcode__history-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.gizmo-qrcode__history-item:hover {
    border-color: var(--accent-primary);
}

.gizmo-qrcode__history-thumb {
    background: #fff;
    border-radius: 4px;
    padding: 4px;
}

.gizmo-qrcode__history-thumb img {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
}

.gizmo-qrcode__history-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.gizmo-qrcode__empty {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
    grid-column: 1 / -1;
}

/* Error */
.gizmo-qrcode__error {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background-color: var(--danger);
    color: #fff;
    font-size: 0.8125rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 700px) {
    .gizmo-qrcode__generator {
        grid-template-columns: 1fr;
    }

    .gizmo-qrcode__options {
        flex-wrap: wrap;
    }

    .gizmo-qrcode__history {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}


/* == trivia == */
/* ===== Trivia Quiz Gizmo ===== */

/* === Setup Panel === */
.gizmo-trivia-full__setup {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.gizmo-trivia-full__options {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.gizmo-trivia-full__label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.gizmo-trivia-full__label select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    min-width: 180px;
}

.gizmo-trivia-full__start-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.gizmo-trivia-full__start-btn:hover {
    background: var(--accent-secondary);
    transform: translateY(-1px);
}

.gizmo-trivia-full__start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* === Progress Bar === */
.gizmo-trivia-full__progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gizmo-trivia-full__progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.gizmo-trivia-full__progress-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.gizmo-trivia-full__progress-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* === Category Badge === */
.gizmo-trivia-full__category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    background: rgba(49, 130, 206, 0.15);
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* === Question === */
.gizmo-trivia-full__question {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

/* === Answers === */
.gizmo-trivia-full__answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gizmo-trivia-full__answer {
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9375rem;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
    line-height: 1.4;
}

.gizmo-trivia-full__answer:hover {
    border-color: var(--accent-primary);
    background: rgba(49, 130, 206, 0.08);
    transform: translateY(-1px);
}

.gizmo-trivia-full__answer--correct {
    border-color: var(--success) !important;
    background: rgba(72, 187, 120, 0.15) !important;
    color: var(--success) !important;
    font-weight: 600;
}

.gizmo-trivia-full__answer--wrong {
    border-color: var(--danger) !important;
    background: rgba(245, 101, 101, 0.15) !important;
    color: var(--danger) !important;
}

.gizmo-trivia-full__answer--disabled {
    pointer-events: none;
    opacity: 0.5;
}

.gizmo-trivia-full__answer-label {
    font-weight: 700;
    margin-right: 0.5rem;
    color: var(--accent-primary);
}

.gizmo-trivia-full__answer--correct .gizmo-trivia-full__answer-label,
.gizmo-trivia-full__answer--wrong .gizmo-trivia-full__answer-label {
    color: inherit;
}

/* === Feedback === */
.gizmo-trivia-full__feedback {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.gizmo-trivia-full__feedback--correct {
    background: rgba(72, 187, 120, 0.1);
    color: var(--success);
    border: 1px solid rgba(72, 187, 120, 0.3);
}

.gizmo-trivia-full__feedback--wrong {
    background: rgba(245, 101, 101, 0.1);
    color: var(--danger);
    border: 1px solid rgba(245, 101, 101, 0.3);
}

/* === Next Button === */
.gizmo-trivia-full__next-btn {
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.gizmo-trivia-full__next-btn:hover {
    background: var(--accent-secondary);
}

/* === Results === */
.gizmo-trivia-full__results {
    text-align: center;
    padding: 2rem 1rem;
}

.gizmo-trivia-full__results-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.gizmo-trivia-full__results-score {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.gizmo-trivia-full__results-details {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.gizmo-trivia-full__play-again {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.gizmo-trivia-full__play-again:hover {
    background: var(--accent-secondary);
}

/* === Stats === */
.gizmo-trivia-full__stats {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-trivia-full__stats h2 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.gizmo-trivia-full__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.gizmo-trivia-full__stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.gizmo-trivia-full__stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
}

.gizmo-trivia-full__stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    display: block;
}

/* === Leaderboard === */
.gizmo-trivia-full__leaderboard {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-trivia-full__leaderboard h2 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.gizmo-trivia-full__leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-trivia-full__leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
}

.gizmo-trivia-full__leaderboard-score {
    font-weight: 700;
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
}

.gizmo-trivia-full__leaderboard-date {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.gizmo-trivia-full__leaderboard-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-trivia-full__answers {
        grid-template-columns: 1fr;
    }

    .gizmo-trivia-full__stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gizmo-trivia-full__options {
        flex-direction: column;
        align-items: stretch;
    }

    .gizmo-trivia-full__label select {
        min-width: 0;
    }
}


/* == petpics == */
/* ===== Pet Photos Gizmo ===== */

/* === Controls === */
.gizmo-petpics-full__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gizmo-petpics-full__filter {
    display: flex;
    gap: 0.25rem;
}

.gizmo-petpics-full__filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.gizmo-petpics-full__filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-petpics-full__filter-btn--active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.gizmo-petpics-full__actions {
    display: flex;
    gap: 0.5rem;
}

.gizmo-petpics-full__load-btn,
.gizmo-petpics-full__slideshow-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.gizmo-petpics-full__load-btn {
    background: var(--accent-primary);
    color: #fff;
}

.gizmo-petpics-full__load-btn:hover { background: var(--accent-secondary); }

.gizmo-petpics-full__slideshow-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.gizmo-petpics-full__slideshow-btn:hover {
    border-color: var(--accent-primary);
}

.gizmo-petpics-full__slideshow-btn--active {
    background: var(--warning);
    color: #000;
    border-color: var(--warning);
}

/* === Grid === */
.gizmo-petpics-full__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gizmo-petpics-full__card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    aspect-ratio: 1;
    transition: transform 0.2s, box-shadow 0.2s;
}

.gizmo-petpics-full__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow);
}

.gizmo-petpics-full__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gizmo-petpics-full__card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.6875rem;
    backdrop-filter: blur(4px);
}

.gizmo-petpics-full__card-fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    opacity: 0;
}

.gizmo-petpics-full__card:hover .gizmo-petpics-full__card-fav {
    opacity: 1;
}

.gizmo-petpics-full__card-fav--active {
    color: var(--danger);
    opacity: 1 !important;
}

/* === Loading === */
.gizmo-petpics-full__loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

/* === Lightbox === */
.gizmo-petpics-full__lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gizmo-petpics-full__lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.gizmo-petpics-full__lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gizmo-petpics-full__lightbox-img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 8px;
    object-fit: contain;
}

.gizmo-petpics-full__lightbox-controls {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.gizmo-petpics-full__lightbox-controls button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.gizmo-petpics-full__lightbox-controls button:hover {
    background: rgba(255, 255, 255, 0.25);
}

.gizmo-petpics-full__lightbox-close {
    font-size: 1.5rem !important;
}

.gizmo-petpics-full__lightbox-fav--active {
    color: var(--danger) !important;
}

/* === Favorites === */
.gizmo-petpics-full__favorites {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-petpics-full__favorites h2 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.gizmo-petpics-full__fav-count {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.gizmo-petpics-full__fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.gizmo-petpics-full__fav-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
}

.gizmo-petpics-full__fav-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gizmo-petpics-full__fav-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.gizmo-petpics-full__fav-item:hover .gizmo-petpics-full__fav-remove {
    opacity: 1;
}

.gizmo-petpics-full__fav-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    grid-column: 1 / -1;
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-petpics-full__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .gizmo-petpics-full__filter {
        justify-content: center;
    }

    .gizmo-petpics-full__actions {
        justify-content: center;
    }

    .gizmo-petpics-full__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* == dadjokes == */
/* ===== Dad Jokes Gizmo ===== */

/* === Joke of the Day === */
.gizmo-dadjokes-full__jotd {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.gizmo-dadjokes-full__jotd-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
}

.gizmo-dadjokes-full__jotd-text {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1rem;
    min-height: 2em;
}

.gizmo-dadjokes-full__jotd-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gizmo-dadjokes-full__groan {
    display: flex;
    gap: 0.25rem;
}

.gizmo-dadjokes-full__groan-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.3;
    transition: opacity 0.15s, transform 0.15s;
    filter: grayscale(1);
}

.gizmo-dadjokes-full__groan-btn--active {
    opacity: 1;
    filter: none;
}

.gizmo-dadjokes-full__groan-btn:hover {
    opacity: 1;
    filter: none;
    transform: scale(1.15);
}

.gizmo-dadjokes-full__jotd-btns {
    display: flex;
    gap: 0.5rem;
}

.gizmo-dadjokes-full__save-btn,
.gizmo-dadjokes-full__new-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.gizmo-dadjokes-full__save-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.gizmo-dadjokes-full__save-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.gizmo-dadjokes-full__save-btn--saved {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.gizmo-dadjokes-full__new-btn {
    background: var(--accent-primary);
    color: #fff;
}

.gizmo-dadjokes-full__new-btn:hover {
    background: var(--accent-secondary);
}

/* === Search === */
.gizmo-dadjokes-full__search-section {
    margin-bottom: 1.5rem;
}

.gizmo-dadjokes-full__search-section h2 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.gizmo-dadjokes-full__search-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gizmo-dadjokes-full__search-input {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.gizmo-dadjokes-full__search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-dadjokes-full__search-btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.gizmo-dadjokes-full__search-btn:hover { background: var(--accent-secondary); }

.gizmo-dadjokes-full__search-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-dadjokes-full__search-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.gizmo-dadjokes-full__search-joke {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.gizmo-dadjokes-full__search-save {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.gizmo-dadjokes-full__search-save:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.gizmo-dadjokes-full__search-save--saved {
    color: var(--danger);
    border-color: var(--danger);
}

.gizmo-dadjokes-full__search-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-style: italic;
}

.gizmo-dadjokes-full__search-info {
    text-align: center;
    padding: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* === Favorites === */
.gizmo-dadjokes-full__favorites {
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-dadjokes-full__favorites h2 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.gizmo-dadjokes-full__fav-count {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.gizmo-dadjokes-full__fav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-dadjokes-full__fav-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.gizmo-dadjokes-full__fav-text {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.gizmo-dadjokes-full__fav-rating {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.gizmo-dadjokes-full__fav-remove {
    padding: 0.2rem 0.5rem;
    border: none;
    background: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.15s;
}

.gizmo-dadjokes-full__fav-remove:hover {
    transform: scale(1.2);
}

.gizmo-dadjokes-full__fav-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* === History === */
.gizmo-dadjokes-full__history {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.gizmo-dadjokes-full__history h2 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.gizmo-dadjokes-full__history-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gizmo-dadjokes-full__history-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    line-height: 1.5;
}

.gizmo-dadjokes-full__history-item:last-child {
    border-bottom: none;
}

.gizmo-dadjokes-full__history-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-dadjokes-full__jotd-actions {
        flex-direction: column;
        align-items: center;
    }

    .gizmo-dadjokes-full__search-row {
        flex-direction: column;
    }
}


/* == notes == */
/* ===== Quick Notes Gizmo ===== */

/* === Widget === */
.gizmo-notes-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.gizmo-notes-widget__row {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.gizmo-notes-widget__rename {
    flex-shrink: 0;
    width: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.gizmo-notes-widget__rename:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-notes-widget__rename-input {
    width: 100%;
    margin-bottom: 0.4rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    box-sizing: border-box;
}

.gizmo-notes-widget__rename-input:focus {
    outline: none;
}

.gizmo-notes-widget__select {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    cursor: pointer;
}

.gizmo-notes-widget__select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.gizmo-notes-widget__textarea {
    flex: 1;
    min-height: 120px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    resize: none;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gizmo-notes-widget__textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-notes-widget__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.gizmo-notes-widget__chars {
    font-family: 'JetBrains Mono', monospace;
}

.gizmo-notes-widget__saved {
    opacity: 0;
    transition: opacity 0.3s;
}

.gizmo-notes-widget__saved--visible {
    opacity: 1;
}

.gizmo-notes-full h2 {
    margin-bottom: 1rem;
}

.gizmo-notes-layout {
    display: flex;
    gap: 1rem;
    min-height: 500px;
}

/* Sidebar */
.gizmo-notes-sidebar {
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-notes-sidebar__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.gizmo-notes-sidebar__count {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.gizmo-notes-sidebar__new-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gizmo-notes-sidebar__new-btn:disabled:hover {
    background-color: var(--accent-primary);
    transform: none;
}

.gizmo-notes-sidebar__new-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 8px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.gizmo-notes-sidebar__new-btn:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-1px);
}

.gizmo-notes-sidebar__search {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    width: 100%;
    box-sizing: border-box;
}

.gizmo-notes-sidebar__search:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-notes-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gizmo-notes-list__item {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    position: relative;
}

.gizmo-notes-list__item:hover {
    background-color: var(--bg-secondary);
}

.gizmo-notes-list__item--active {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
}

.gizmo-notes-list__item--pinned::before {
    content: '\1F4CC';
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    font-size: 0.6875rem;
}

.gizmo-notes-list__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.gizmo-notes-list__meta {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    display: flex;
    gap: 0.5rem;
}

.gizmo-notes-list__tags {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.gizmo-notes-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.625rem;
    background-color: var(--accent-primary);
    color: #fff;
    font-weight: 500;
}

.gizmo-notes-list--empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
}

/* Editor */
.gizmo-notes-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.gizmo-notes-editor--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-style: italic;
}

.gizmo-notes-editor__toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.gizmo-notes-editor__title-input {
    flex: 1;
    min-width: 150px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.gizmo-notes-editor__title-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-notes-editor__btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.gizmo-notes-editor__btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-notes-editor__btn--active {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.gizmo-notes-editor__btn--danger:hover {
    background-color: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.gizmo-notes-editor__btn--pin.gizmo-notes-editor__btn--active {
    background-color: var(--warning);
    border-color: var(--warning);
}

.gizmo-notes-editor__tags-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.gizmo-notes-editor__tags-input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.gizmo-notes-editor__tags-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.gizmo-notes-editor__tags-display {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.gizmo-notes-editor__tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    background-color: var(--accent-primary);
    color: #fff;
}

.gizmo-notes-editor__tag-remove {
    cursor: pointer;
    font-weight: 700;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.gizmo-notes-editor__tag-remove:hover {
    opacity: 1;
}

.gizmo-notes-editor__content {
    flex: 1;
    min-height: 300px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    resize: vertical;
    line-height: 1.6;
}

.gizmo-notes-editor__content:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-notes-editor__preview {
    flex: 1;
    min-height: 300px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    overflow-y: auto;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.gizmo-notes-editor__preview h1,
.gizmo-notes-editor__preview h2,
.gizmo-notes-editor__preview h3 {
    margin: 0.5em 0 0.3em;
    color: var(--text-primary);
}

.gizmo-notes-editor__preview h1 { font-size: 1.4em; }
.gizmo-notes-editor__preview h2 { font-size: 1.2em; }
.gizmo-notes-editor__preview h3 { font-size: 1.05em; }

.gizmo-notes-editor__preview p {
    margin: 0.4em 0;
}

.gizmo-notes-editor__preview code {
    background-color: var(--bg-card);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
}

.gizmo-notes-editor__preview pre {
    background-color: var(--bg-card);
    padding: 0.75rem;
    border-radius: 8px;
    overflow-x: auto;
}

.gizmo-notes-editor__preview pre code {
    padding: 0;
    background: none;
}

.gizmo-notes-editor__preview ul,
.gizmo-notes-editor__preview ol {
    padding-left: 1.5rem;
    margin: 0.4em 0;
}

.gizmo-notes-editor__preview blockquote {
    border-left: 3px solid var(--accent-primary);
    margin: 0.4em 0;
    padding: 0.2em 0.75em;
    color: var(--text-secondary);
}

.gizmo-notes-editor__preview strong { font-weight: 700; }
.gizmo-notes-editor__preview em { font-style: italic; }

.gizmo-notes-editor__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.gizmo-notes-editor__char-count {
    font-family: 'JetBrains Mono', monospace;
}

/* === Responsive === */
@media (max-width: 700px) {
    .gizmo-notes-layout {
        flex-direction: column;
    }

    .gizmo-notes-sidebar {
        width: 100%;
        min-width: 0;
        max-height: 200px;
    }

    .gizmo-notes-list {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.5rem;
    }

    .gizmo-notes-list__item {
        min-width: 140px;
        flex-shrink: 0;
    }
}


/* == password == */
/* ===== Password Generator Gizmo ===== */

/* === Widget === */
.gizmo-password-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-password-widget__display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-height: 36px;
}

.gizmo-password-widget__value {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.4;
    user-select: all;
}

.gizmo-password-widget__copy-btn {
    padding: 0.3rem 0.5rem;
    border: none;
    border-radius: 4px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.6875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.gizmo-password-widget__copy-btn:hover {
    background-color: var(--accent-secondary);
}

.gizmo-password-widget__strength {
    height: 4px;
    border-radius: 2px;
    background-color: var(--border-color);
    overflow: hidden;
}

.gizmo-password-widget__strength-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s, background-color 0.3s;
    width: 0;
}

.gizmo-password-widget__controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gizmo-password-widget__slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.gizmo-password-widget__slider-row label {
    min-width: 50px;
}

.gizmo-password-widget__slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent-primary);
}

.gizmo-password-widget__slider-row .gizmo-password-widget__length-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    min-width: 20px;
    text-align: right;
    color: var(--text-primary);
}

.gizmo-password-widget__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gizmo-password-widget__toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.gizmo-password-widget__toggle input {
    accent-color: var(--accent-primary);
}

.gizmo-password-widget__gen-btn {
    padding: 0.45rem 0.75rem;
    border: none;
    border-radius: 8px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.gizmo-password-widget__gen-btn:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-1px);
}

.gizmo-password-widget__gen-btn:active {
    transform: translateY(0);
}

.gizmo-password-full h2 {
    margin-bottom: 1rem;
}

.gizmo-password-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.gizmo-password-section__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* Display */
.gizmo-password-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.gizmo-password-display__value {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.4;
    user-select: all;
}

.gizmo-password-display__btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gizmo-password-display__btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-password-display__btn--primary {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.gizmo-password-display__btn--primary:hover {
    background-color: var(--accent-secondary);
    color: #fff;
}

/* Strength meter */
.gizmo-password-strength {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gizmo-password-strength__bar-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background-color: var(--border-color);
    overflow: hidden;
}

.gizmo-password-strength__bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s, background-color 0.3s;
    width: 0;
}

.gizmo-password-strength__label {
    font-size: 0.8125rem;
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}

/* Controls */
.gizmo-password-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gizmo-password-controls__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gizmo-password-controls__row label {
    min-width: 80px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.gizmo-password-controls__row input[type="range"] {
    flex: 1;
    accent-color: var(--accent-primary);
}

.gizmo-password-controls__row input[type="number"] {
    width: 60px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    text-align: center;
}

.gizmo-password-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.gizmo-password-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.gizmo-password-toggle input {
    accent-color: var(--accent-primary);
}

.gizmo-password-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gizmo-password-actions__btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.gizmo-password-actions__btn:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-1px);
}

.gizmo-password-actions__btn:active {
    transform: translateY(0);
}

.gizmo-password-actions__btn--secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.gizmo-password-actions__btn--secondary:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
}

/* Mode tabs */
.gizmo-password-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.gizmo-password-tab {
    padding: 0.45rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gizmo-password-tab:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-password-tab--active {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* Multi results */
.gizmo-password-multi {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.gizmo-password-multi__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.gizmo-password-multi__value {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    word-break: break-all;
    user-select: all;
}

.gizmo-password-multi__copy {
    padding: 0.2rem 0.5rem;
    border: none;
    border-radius: 4px;
    background-color: var(--accent-primary);
    color: #fff;
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.gizmo-password-multi__copy:hover {
    background-color: var(--accent-secondary);
}

/* History */
.gizmo-password-history {
    margin-top: 0.75rem;
}

.gizmo-password-history__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gizmo-password-history__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-password-history__clear {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-secondary);
    color: var(--danger);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.gizmo-password-history__clear:hover {
    background-color: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.gizmo-password-history__list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 200px;
    overflow-y: auto;
}

.gizmo-password-history__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
}

.gizmo-password-history__item-value {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    word-break: break-all;
    user-select: all;
}

.gizmo-password-history__item-time {
    color: var(--text-secondary);
    white-space: nowrap;
    font-size: 0.6875rem;
}

.gizmo-password-history__empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.8125rem;
}

/* Strength analyzer */
.gizmo-password-analyzer {
    margin-top: 0.5rem;
}

.gizmo-password-analyzer__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}

.gizmo-password-analyzer__input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-password-analyzer__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    font-size: 0.75rem;
}

.gizmo-password-analyzer__detail {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    background-color: var(--bg-card);
    border-radius: 4px;
}

.gizmo-password-analyzer__detail-label {
    color: var(--text-secondary);
}

.gizmo-password-analyzer__detail-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-password-controls__row {
        flex-wrap: wrap;
    }

    .gizmo-password-toggles {
        gap: 0.5rem;
    }

    .gizmo-password-analyzer__details {
        grid-template-columns: 1fr;
    }
}


/* == units == */
/* ===== Unit Converter Gizmo ===== */

/* === Widget === */
.gizmo-units-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-units-widget__tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.gizmo-units-widget__tab {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gizmo-units-widget__tab:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-units-widget__tab--active {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.gizmo-units-widget__converter {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gizmo-units-widget__row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.gizmo-units-widget__input {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    min-width: 0;
}

.gizmo-units-widget__input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-units-widget__select {
    width: 90px;
    padding: 0.45rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    cursor: pointer;
}

.gizmo-units-widget__swap-btn {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    align-self: center;
}

.gizmo-units-widget__swap-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-units-widget__result {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent-primary);
    padding: 0.4rem;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    min-height: 1.4em;
}

.gizmo-units-full h2 {
    margin-bottom: 1rem;
}

.gizmo-units-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.gizmo-units-category-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gizmo-units-category-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-units-category-btn--active {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.gizmo-units-converter-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.gizmo-units-converter-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.gizmo-units-converter-field {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gizmo-units-converter-field label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.gizmo-units-converter-field input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
}

.gizmo-units-converter-field input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-units-converter-field select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-card);
    cursor: pointer;
}

.gizmo-units-swap-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    align-self: flex-end;
    margin-bottom: 0.3rem;
}

.gizmo-units-swap-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.gizmo-units-result-box {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-card);
    border-radius: 8px;
    text-align: center;
}

.gizmo-units-result-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.gizmo-units-result-formula {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* All conversions grid */
.gizmo-units-all-results {
    margin-top: 1rem;
}

.gizmo-units-all-results__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.gizmo-units-all-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem;
}

.gizmo-units-all-grid__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.gizmo-units-all-grid__item:hover {
    border-color: var(--accent-primary);
}

.gizmo-units-all-grid__item-unit {
    color: var(--text-secondary);
}

.gizmo-units-all-grid__item-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-primary);
}

/* Favorites */
.gizmo-units-favorites {
    margin-bottom: 1rem;
}

.gizmo-units-favorites__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gizmo-units-favorites__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-units-favorites__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gizmo-units-fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card);
    font-size: 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s;
}

.gizmo-units-fav-chip:hover {
    border-color: var(--accent-primary);
}

.gizmo-units-fav-chip__remove {
    color: var(--danger);
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.gizmo-units-fav-chip__remove:hover {
    opacity: 1;
}

/* History */
.gizmo-units-history {
    margin-top: 1rem;
}

.gizmo-units-history__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gizmo-units-history__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-units-history__clear {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-secondary);
    color: var(--danger);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.gizmo-units-history__clear:hover {
    background-color: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.gizmo-units-history__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
}

.gizmo-units-history__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.gizmo-units-history__item:hover {
    background-color: var(--bg-secondary);
}

.gizmo-units-history__item-text {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.gizmo-units-history__item-time {
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

.gizmo-units-history__empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.8125rem;
}

/* Fav button */
.gizmo-units-fav-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    align-self: flex-end;
    margin-bottom: 0.3rem;
}

.gizmo-units-fav-btn:hover {
    border-color: var(--warning);
    color: var(--warning);
}

.gizmo-units-fav-btn--active {
    color: var(--warning);
    border-color: var(--warning);
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-units-converter-row {
        flex-direction: column;
    }

    .gizmo-units-converter-field {
        min-width: 0;
        width: 100%;
    }

    .gizmo-units-swap-btn {
        align-self: center;
        margin-bottom: 0;
    }

    .gizmo-units-all-grid {
        grid-template-columns: 1fr;
    }
}


/* == worldclock == */
/* ===== World Clock Gizmo ===== */

/* === Widget === */
.gizmo-worldclock-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gizmo-worldclock-widget__local {
    text-align: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.25rem;
}

.gizmo-worldclock-widget__local-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.gizmo-worldclock-widget__local-date {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.gizmo-worldclock-widget__cities {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gizmo-worldclock-widget__city {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    background-color: var(--bg-secondary);
    border-radius: 6px;
}

.gizmo-worldclock-widget__city-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gizmo-worldclock-widget__city-daynight {
    font-size: 0.75rem;
}

.gizmo-worldclock-widget__city-info {
    text-align: right;
}

.gizmo-worldclock-widget__city-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-worldclock-widget__city-diff {
    font-size: 0.625rem;
    color: var(--text-secondary);
}

.gizmo-worldclock-full h2 {
    margin-bottom: 1rem;
}

.gizmo-worldclock-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gizmo-worldclock-toolbar__search {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    position: relative;
}

.gizmo-worldclock-toolbar__search:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-worldclock-search-wrapper {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.gizmo-worldclock-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow);
    display: none;
}

.gizmo-worldclock-search-results--visible {
    display: block;
}

.gizmo-worldclock-search-result {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s;
}

.gizmo-worldclock-search-result:hover {
    background-color: var(--bg-secondary);
}

.gizmo-worldclock-search-result__tz {
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.gizmo-worldclock-toolbar__toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.gizmo-worldclock-toolbar__toggle input {
    accent-color: var(--accent-primary);
}

/* Clock grid */
.gizmo-worldclock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gizmo-worldclock-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    position: relative;
    transition: border-color 0.2s;
    cursor: grab;
}

.gizmo-worldclock-card:hover {
    border-color: var(--accent-primary);
}

.gizmo-worldclock-card--dragging {
    opacity: 0.5;
}

.gizmo-worldclock-card--dragover {
    border-color: var(--accent-primary);
    border-style: dashed;
}

.gizmo-worldclock-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}

.gizmo-worldclock-card__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gizmo-worldclock-card__daynight {
    font-size: 0.875rem;
}

.gizmo-worldclock-card__remove {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
    line-height: 1;
}

.gizmo-worldclock-card:hover .gizmo-worldclock-card__remove {
    opacity: 1;
}

.gizmo-worldclock-card__remove:hover {
    background-color: var(--bg-card);
}

.gizmo-worldclock-card__time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.gizmo-worldclock-card__date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.gizmo-worldclock-card__diff {
    font-size: 0.6875rem;
    color: var(--accent-primary);
    font-weight: 500;
    margin-top: 0.3rem;
}

.gizmo-worldclock-card__tz {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.gizmo-worldclock-grid--empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-style: italic;
    grid-column: 1 / -1;
}

/* Meeting Planner */
.gizmo-worldclock-planner {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.gizmo-worldclock-planner__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.gizmo-worldclock-planner__controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.gizmo-worldclock-planner__controls label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.gizmo-worldclock-planner__controls input[type="date"],
.gizmo-worldclock-planner__controls input[type="time"] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
}

.gizmo-worldclock-planner__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.gizmo-worldclock-planner__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-card);
    border-radius: 6px;
}

.gizmo-worldclock-planner__item-city {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.gizmo-worldclock-planner__item-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-worldclock-planner__item--outside-hours {
    opacity: 0.5;
}

.gizmo-worldclock-planner__item--outside-hours .gizmo-worldclock-planner__item-time {
    color: var(--danger);
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-worldclock-grid {
        grid-template-columns: 1fr;
    }

    .gizmo-worldclock-planner__grid {
        grid-template-columns: 1fr;
    }

    .gizmo-worldclock-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gizmo-worldclock-search-wrapper {
        min-width: 0;
    }
}


/* == pomodoro == */
/* Pomodoro Focus Gizmo Styles */

/* === BACK LINK === */
/* === SHARED === */
.gizmo-pomo__ring-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gizmo-pomo__ring-bg,
.gizmo-pomo__ring-fill {
    fill: none;
    stroke-width: 8;
}
.gizmo-pomo__ring-bg {
    stroke: var(--border-color);
}
.gizmo-pomo__ring-fill {
    stroke: var(--accent-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s linear, stroke 0.3s;
    transform: rotate(-90deg);
    transform-origin: center;
}
.gizmo-pomo__ring-fill--break {
    stroke: var(--success);
}
.gizmo-pomo__ring-time {
    position: absolute;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 700;
    color: var(--text-primary);
}
.gizmo-pomo__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-pomo__badge--focus {
    background: rgba(49, 130, 206, 0.15);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}
.gizmo-pomo__badge--break {
    background: rgba(72, 187, 120, 0.15);
    color: var(--success);
    border: 1px solid var(--success);
}
.gizmo-pomo__controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.gizmo-pomo__btn {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.gizmo-pomo__btn:hover {
    transform: scale(1.05);
}
.gizmo-pomo__btn--start {
    background: var(--accent-primary);
    color: #fff;
}
.gizmo-pomo__btn--start:hover {
    filter: brightness(1.1);
}
.gizmo-pomo__btn--pause {
    background: var(--warning);
    color: #fff;
}
.gizmo-pomo__btn--reset {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.gizmo-pomo__btn--skip {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.gizmo-pomo__sessions {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.gizmo-pomo__sessions span {
    color: var(--accent-primary);
    font-weight: 600;
}
.gizmo-pomo__sound-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.gizmo-pomo__sound-toggle input {
    display: none;
}
.gizmo-pomo__sound-icon {
    font-size: 1rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.gizmo-pomo__sound-icon--on {
    opacity: 1;
}

/* === WIDGET === */
.gizmo-pomo-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.gizmo-pomo-widget .gizmo-pomo__ring-container svg {
    width: 150px;
    height: 150px;
}
.gizmo-pomo-widget .gizmo-pomo__ring-time {
    font-size: 1.6rem;
}
.gizmo-pomo-widget .gizmo-pomo__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gizmo-pomo-full__timer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.gizmo-pomo-full__timer-section svg {
    width: 240px;
    height: 240px;
}
.gizmo-pomo-full__timer-section .gizmo-pomo__ring-time {
    font-size: 2.8rem;
}
.gizmo-pomo-full__meta {
    display: flex;
    align-items: center;
    gap: 16px;
}
.gizmo-pomo-full__task-label {
    width: 100%;
    max-width: 350px;
}
.gizmo-pomo-full__task-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: center;
}
.gizmo-pomo-full__task-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-pomo-full__task-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Settings Section */
.gizmo-pomo-full__settings {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.gizmo-pomo-full__settings-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-pomo-full__settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.gizmo-pomo-full__setting {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gizmo-pomo-full__setting label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.gizmo-pomo-full__setting input[type="number"],
.gizmo-pomo-full__setting select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}
.gizmo-pomo-full__setting input:focus,
.gizmo-pomo-full__setting select:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-pomo-full__setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}
.gizmo-pomo-full__setting-row label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Toggle */
.gizmo-pomo__toggle {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.gizmo-pomo__toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.gizmo-pomo__toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-color);
    border-radius: 22px;
    transition: background 0.3s;
}
.gizmo-pomo__toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}
.gizmo-pomo__toggle input:checked + .gizmo-pomo__toggle-slider {
    background: var(--success);
}
.gizmo-pomo__toggle input:checked + .gizmo-pomo__toggle-slider::before {
    transform: translateX(18px);
}

/* History Section */
.gizmo-pomo-full__history {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.gizmo-pomo-full__history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.gizmo-pomo-full__history-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-pomo-full__history-clear {
    padding: 4px 10px;
    border: 1px solid var(--danger);
    border-radius: 4px;
    background: transparent;
    color: var(--danger);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-pomo-full__history-clear:hover {
    background: var(--danger);
    color: #fff;
}
.gizmo-pomo-full__history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}
.gizmo-pomo-full__history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
}
.gizmo-pomo-full__history-type {
    font-weight: 600;
    min-width: 50px;
}
.gizmo-pomo-full__history-type--focus {
    color: var(--accent-primary);
}
.gizmo-pomo-full__history-type--break {
    color: var(--success);
}
.gizmo-pomo-full__history-task {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gizmo-pomo-full__history-time {
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}
.gizmo-pomo-full__history-empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.8rem;
    padding: 16px;
}

/* Stats Section */
.gizmo-pomo-full__stats {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
}
.gizmo-pomo-full__stats-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-pomo-full__stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}
.gizmo-pomo-full__stat {
    text-align: center;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.gizmo-pomo-full__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
}
.gizmo-pomo-full__stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* == colors == */
/* Color Tools Gizmo Styles */

/* === BACK LINK === */
/* === SHARED === */
.gizmo-colors__preview {
    border-radius: 8px;
    border: 2px solid var(--border-color);
    transition: background-color 0.2s;
}
.gizmo-colors__value-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gizmo-colors__value-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    min-width: 32px;
}
.gizmo-colors__value-text {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gizmo-colors__copy-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.gizmo-colors__copy-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-colors__copy-btn--copied {
    border-color: var(--success);
    color: var(--success);
}

/* === WIDGET === */
.gizmo-colors-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-colors-widget__top {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.gizmo-colors-widget__picker-wrap {
    position: relative;
    flex-shrink: 0;
}
.gizmo-colors-widget__picker {
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
}
.gizmo-colors-widget__picker::-webkit-color-swatch-wrapper { padding: 0; }
.gizmo-colors-widget__picker::-webkit-color-swatch { border: 2px solid var(--border-color); border-radius: 8px; }
.gizmo-colors-widget__picker::-moz-color-swatch { border: 2px solid var(--border-color); border-radius: 8px; }
.gizmo-colors-widget__values {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.gizmo-colors-widget__actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.gizmo-colors-widget__random-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}
.gizmo-colors-widget__random-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-colors-widget__recent {
    display: flex;
    gap: 4px;
}
.gizmo-colors-widget__recent-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.1s;
}
.gizmo-colors-widget__recent-swatch:hover {
    transform: scale(1.15);
}

.gizmo-colors-full__picker-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.gizmo-colors-full__picker-left {
    flex: 1;
    min-width: 250px;
}
.gizmo-colors-full__big-picker {
    width: 100%;
    height: 120px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    margin-bottom: 12px;
}
.gizmo-colors-full__big-picker::-webkit-color-swatch-wrapper { padding: 0; }
.gizmo-colors-full__big-picker::-webkit-color-swatch { border: 2px solid var(--border-color); border-radius: 10px; }
.gizmo-colors-full__big-picker::-moz-color-swatch { border: 2px solid var(--border-color); border-radius: 10px; }
.gizmo-colors-full__sliders {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-colors-full__slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gizmo-colors-full__slider-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 16px;
}
.gizmo-colors-full__slider {
    flex: 1;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    outline: none;
    background: var(--border-color);
}
.gizmo-colors-full__slider:focus-visible {
    outline: 2px solid var(--link-text, var(--accent-primary));
    outline-offset: 2px;
}
.gizmo-colors-full__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.gizmo-colors-full__slider-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-primary);
    min-width: 30px;
    text-align: right;
}
.gizmo-colors-full__picker-right {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gizmo-colors-full__random-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    margin-top: 4px;
}
.gizmo-colors-full__random-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Sections */
.gizmo-colors-full__section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.gizmo-colors-full__section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Harmonies */
.gizmo-colors-full__harmonies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.gizmo-colors-full__harmony {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}
.gizmo-colors-full__harmony-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.gizmo-colors-full__harmony-swatches {
    display: flex;
    gap: 4px;
}
.gizmo-colors-full__harmony-swatch {
    flex: 1;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: transform 0.1s;
}
.gizmo-colors-full__harmony-swatch:hover { transform: scale(1.05); }

/* Gradient Generator */
.gizmo-colors-full__gradient-preview {
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.gizmo-colors-full__gradient-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.gizmo-colors-full__gradient-controls label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.gizmo-colors-full__gradient-controls input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background: none;
}
.gizmo-colors-full__gradient-controls select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8rem;
}
.gizmo-colors-full__gradient-css {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    word-break: break-all;
    cursor: pointer;
}
.gizmo-colors-full__gradient-css:hover {
    border-color: var(--accent-primary);
}

/* Contrast Checker */
.gizmo-colors-full__contrast-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.gizmo-colors-full__contrast-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gizmo-colors-full__contrast-group label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.gizmo-colors-full__contrast-group input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background: none;
}
.gizmo-colors-full__contrast-preview {
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
}
.gizmo-colors-full__contrast-results {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.gizmo-colors-full__contrast-result {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
}
.gizmo-colors-full__contrast-ratio {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-primary);
}
.gizmo-colors-full__contrast-pass {
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}
.gizmo-colors-full__contrast-pass--pass {
    background: rgba(72, 187, 120, 0.15);
    color: var(--success);
}
.gizmo-colors-full__contrast-pass--fail {
    background: rgba(229, 62, 62, 0.15);
    color: var(--danger);
}

/* Saved Palettes */
.gizmo-colors-full__palette-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.gizmo-colors-full__palette-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-colors-full__palette-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-colors-full__palette-btn--save {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.gizmo-colors-full__palette-btn--save:hover {
    filter: brightness(1.1);
}
.gizmo-colors-full__palettes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-colors-full__palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.gizmo-colors-full__palette-swatches {
    display: flex;
    gap: 3px;
    flex: 1;
}
.gizmo-colors-full__palette-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.gizmo-colors-full__palette-swatch:hover { transform: scale(1.1); }
.gizmo-colors-full__palette-delete {
    padding: 4px 8px;
    border: 1px solid var(--danger);
    border-radius: 4px;
    background: transparent;
    color: var(--danger);
    font-size: 0.75rem;
    cursor: pointer;
}
.gizmo-colors-full__palette-delete:hover {
    background: var(--danger);
    color: #fff;
}
.gizmo-colors-full__palette-empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.8rem;
    padding: 12px;
}


/* == texttools == */
/* Text Tools Gizmo Styles */

/* === BACK LINK === */
/* === WIDGET === */
.gizmo-tt-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-tt-widget__textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    resize: vertical;
    box-sizing: border-box;
}
.gizmo-tt-widget__textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-tt-widget__stats {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.gizmo-tt-widget__stats span {
    color: var(--accent-primary);
    font-weight: 600;
}
.gizmo-tt-widget__actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.gizmo-tt-widget__btn {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-tt-widget__btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-tt-widget__btn--copy {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.gizmo-tt-widget__btn--copy:hover {
    filter: brightness(1.1);
    color: #fff;
}

.gizmo-tt-full__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .gizmo-tt-full__split { grid-template-columns: 1fr; }
}
.gizmo-tt-full__panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-tt-full__panel-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-tt-full__textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}
.gizmo-tt-full__textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-tt-full__textarea--output {
    background: var(--bg-card);
}
.gizmo-tt-full__stats-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.gizmo-tt-full__stats-bar span {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Tool sections */
.gizmo-tt-full__section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.gizmo-tt-full__section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-tt-full__btn-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.gizmo-tt-full__btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-tt-full__btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-tt-full__btn--active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.gizmo-tt-full__copy-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-tt-full__copy-btn:hover {
    filter: brightness(1.1);
}

/* Find & Replace */
.gizmo-tt-full__find-replace {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.gizmo-tt-full__find-input {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8rem;
    flex: 1;
    min-width: 100px;
}
.gizmo-tt-full__find-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-tt-full__find-btn {
    padding: 6px 14px;
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.gizmo-tt-full__find-btn:hover {
    filter: brightness(1.1);
}

/* Reading time */
.gizmo-tt-full__reading-time {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.gizmo-tt-full__reading-time span {
    color: var(--accent-primary);
    font-weight: 600;
}


/* == habits == */
/* ===== Habit Tracker Gizmo ===== */

.habits-full h2 { margin-bottom: 1.25rem; }

/* === Stats === */
.habits-full__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.habits-full__stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
.habits-full__stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
}
.habits-full__stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* === Add Habit === */
.habits-full__add {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.habits-full__add-input {
    flex: 1;
    min-width: 180px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.habits-full__add-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.habits-full__add-cat {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.habits-full__add-color {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: var(--bg-secondary);
}
.habits-full__add-btn {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.habits-full__add-btn:hover { background: var(--accent-secondary); transform: translateY(-1px); }
.habits-full__add-btn:active { transform: translateY(0); }

/* === Toolbar === */
.habits-full__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.habits-full__filters { display: flex; gap: 0.25rem; }
.habits-full__filter {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.habits-full__filter:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.habits-full__filter--active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.habits-full__cat-filter {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* === Habit List === */
.habits-full__list { min-height: 50px; }
.habits-full__list-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-style: italic;
}
.habits-full__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    transition: border-color 0.2s;
}
.habits-full__item:hover { border-color: var(--accent-primary); }
.habits-full__item--archived { opacity: 0.5; }
.habits-full__item-check {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--bg-card);
    transition: all 0.2s;
    font-size: 0.75rem;
}
.habits-full__item-check--done {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.habits-full__item-color {
    width: 6px;
    height: 32px;
    border-radius: 3px;
    min-width: 6px;
}
.habits-full__item-info { flex: 1; min-width: 0; }
.habits-full__item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.habits-full__item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.habits-full__item-streak {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--warning);
    white-space: nowrap;
    text-align: center;
    min-width: 50px;
}
.habits-full__item-actions { display: flex; gap: 0.25rem; }
.habits-full__item-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.habits-full__item-btn:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.habits-full__item-btn--danger:hover { border-color: var(--danger); color: var(--danger); }

/* === Sections === */
.habits-full__section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.habits-full__section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* === Heatmap === */
.habits-full__heatmap-wrap { overflow-x: auto; }
.habits-full__heatmap {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    grid-auto-flow: column;
    grid-auto-columns: 14px;
    gap: 3px;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0;
}
.habits-full__heatmap-cell {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    position: relative;
}
.habits-full__heatmap-cell[title] { cursor: help; }
.habits-full__heatmap-cell--0 { background: var(--bg-secondary); }
.habits-full__heatmap-cell--1 { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.3); }
.habits-full__heatmap-cell--2 { background: rgba(34, 197, 94, 0.45); border-color: rgba(34, 197, 94, 0.5); }
.habits-full__heatmap-cell--3 { background: rgba(34, 197, 94, 0.65); border-color: rgba(34, 197, 94, 0.7); }
.habits-full__heatmap-cell--4 { background: rgba(34, 197, 94, 0.9); border-color: rgba(34, 197, 94, 0.95); }
.habits-full__heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}
.habits-full__heatmap-legend .habits-full__heatmap-cell {
    width: 12px;
    height: 12px;
}

/* === Weekly Summary === */
.habits-full__weekly {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}
.habits-full__weekly-day {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem;
    text-align: center;
}
.habits-full__weekly-day--today { border-color: var(--accent-primary); }
.habits-full__weekly-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.habits-full__weekly-val {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

/* === Responsive === */
@media (max-width: 575px) {
    .habits-full__add { flex-direction: column; }
    .habits-full__add-color { width: 100%; height: 36px; }
    .habits-full__toolbar { flex-direction: column; align-items: stretch; }
    .habits-full__item { flex-wrap: wrap; }
    .habits-full__item-actions { width: 100%; justify-content: flex-end; margin-top: 0.25rem; }
}


/* == countdown == */
/* ===== Event Countdown Gizmo ===== */

.countdown-full h2 { margin-bottom: 1.25rem; }

/* === Featured Countdown === */
.countdown-full__featured {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.countdown-full__featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
}
.countdown-full__featured-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.countdown-full__featured-date {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.countdown-full__featured-timer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.countdown-full__featured-unit {
    text-align: center;
    min-width: 70px;
}
.countdown-full__featured-val {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1;
}
.countdown-full__featured-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.countdown-full__featured-empty {
    color: var(--text-secondary);
    font-style: italic;
    padding: 1rem;
}

/* === Add Event === */
.countdown-full__add {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.countdown-full__add-input {
    flex: 1;
    min-width: 160px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.countdown-full__add-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.countdown-full__add-date {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.countdown-full__add-cat {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.countdown-full__add-color {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: var(--bg-secondary);
}
.countdown-full__add-btn {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.countdown-full__add-btn:hover { background: var(--accent-secondary); transform: translateY(-1px); }
.countdown-full__add-btn:active { transform: translateY(0); }

/* === Toolbar === */
.countdown-full__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.countdown-full__filters { display: flex; gap: 0.25rem; }
.countdown-full__filter {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.countdown-full__filter:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.countdown-full__filter--active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.countdown-full__sort {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* === Event List === */
.countdown-full__list { min-height: 50px; }
.countdown-full__list-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-style: italic;
}
.countdown-full__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    transition: border-color 0.2s;
}
.countdown-full__item:hover { border-color: var(--accent-primary); }
.countdown-full__item--past { opacity: 0.5; }
.countdown-full__item-color {
    width: 6px;
    height: 40px;
    border-radius: 3px;
    min-width: 6px;
}
.countdown-full__item-info { flex: 1; min-width: 0; }
.countdown-full__item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.countdown-full__item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.countdown-full__item-cat {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    margin-right: 0.25rem;
}
.countdown-full__item-countdown {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
    white-space: nowrap;
    text-align: right;
    min-width: 80px;
}
.countdown-full__item-countdown--past { color: var(--text-secondary); }
.countdown-full__item-actions { display: flex; gap: 0.25rem; }
.countdown-full__item-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.countdown-full__item-btn:hover { border-color: var(--danger); color: var(--danger); }

/* === Responsive === */
@media (max-width: 575px) {
    .countdown-full__add { flex-direction: column; }
    .countdown-full__add-color { width: 100%; height: 36px; }
    .countdown-full__toolbar { flex-direction: column; align-items: stretch; }
    .countdown-full__featured-val { font-size: 1.75rem; }
    .countdown-full__item { flex-wrap: wrap; }
    .countdown-full__item-actions { width: 100%; justify-content: flex-end; }
}


/* == watertracker == */
/* ===== Water Tracker Gizmo ===== */

.water-full h2 { margin-bottom: 1.25rem; }

/* === Today's Progress === */
.water-full__today {
    display: flex;
    gap: 2rem;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.water-full__glass-wrap { flex-shrink: 0; }
.water-full__glass {
    position: relative;
    width: 100px;
    height: 140px;
    border: 3px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    background: var(--bg-card);
}
.water-full__glass::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -8px;
    right: -8px;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
}
.water-full__glass-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.85));
    transition: height 0.6s ease;
    border-radius: 0 0 13px 13px;
}
.water-full__glass-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(255,255,255,0.25);
}
.water-full__glass-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.water-full__today-info { flex: 1; }
.water-full__today-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1;
}
.water-full__today-goal {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.water-full__today-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-card);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.water-full__today-bar-fill {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: 5px;
    transition: width 0.5s ease;
}
.water-full__quick-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.water-full__quick-btn {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.water-full__quick-btn:hover {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: #fff;
}
.water-full__quick-btn--undo {
    color: var(--text-secondary);
    font-family: inherit;
}
.water-full__quick-btn--undo:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: transparent;
}

/* === Stats === */
.water-full__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.water-full__stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
}
.water-full__stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
}
.water-full__stat-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* === Settings === */
.water-full__settings {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.water-full__setting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.water-full__setting-input,
.water-full__setting-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
    width: 120px;
}
.water-full__setting-select {
    width: 130px;
}
.water-full__setting-input:focus,
.water-full__setting-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* === Sections === */
.water-full__section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.water-full__section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* === 7-Day Chart === */
.water-full__chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 160px;
    padding: 0.5rem 0;
}
.water-full__chart-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.water-full__chart-bar-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}
.water-full__chart-bar {
    width: 70%;
    max-width: 40px;
    background: var(--gradient-accent);
    border-radius: 4px 4px 0 0;
    transition: height 0.4s ease;
    min-height: 2px;
    position: relative;
}
.water-full__chart-bar--goal {
    box-shadow: 0 0 8px var(--accent-glow);
}
.water-full__chart-val {
    font-size: 0.625rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    text-align: center;
}
.water-full__chart-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
    font-weight: 500;
}
.water-full__chart-label--today { color: var(--accent-primary); font-weight: 700; }

/* === Daily Log === */
.water-full__log { min-height: 30px; }
.water-full__log-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
}
.water-full__log-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}
.water-full__log-item:last-child { border-bottom: none; }
.water-full__log-time { color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
.water-full__log-amount { color: var(--accent-primary); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

/* === Responsive === */
@media (max-width: 575px) {
    .water-full__today { flex-direction: column; text-align: center; }
    .water-full__quick-btns { justify-content: center; }
    .water-full__settings { flex-direction: column; }
    .water-full__today-amount { font-size: 2rem; }
}


/* == quicklinks == */
/* Quick Links Gizmo Styles */

/* === BACK LINK === */
/* === SHARED === */
.gizmo-ql__favicon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* === WIDGET === */
.gizmo-ql-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-ql-widget__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.gizmo-ql-widget__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.65rem;
    transition: all 0.2s;
    overflow: hidden;
    cursor: pointer;
}
.gizmo-ql-widget__link:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}
.gizmo-ql-widget__link-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.gizmo-ql-widget__actions {
    display: flex;
    gap: 4px;
}
.gizmo-ql-widget__btn {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-ql-widget__btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-ql-widget__btn--active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.gizmo-ql-widget__add-form {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.gizmo-ql-widget__add-form--visible {
    display: flex;
}
.gizmo-ql-widget__add-input {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
}
.gizmo-ql-widget__add-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-ql-widget__add-submit {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.gizmo-ql-widget__empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.75rem;
    padding: 16px 8px;
    grid-column: 1 / -1;
}
.gizmo-ql-widget__link--edit-mode {
    position: relative;
}
.gizmo-ql-widget__delete-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Toolbar */
.gizmo-ql-full__toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.gizmo-ql-full__search {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.gizmo-ql-full__search:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-ql-full__toolbar-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-ql-full__toolbar-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-ql-full__toolbar-btn--primary {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.gizmo-ql-full__toolbar-btn--primary:hover {
    filter: brightness(1.1);
    color: #fff;
}

/* Add Link Form */
.gizmo-ql-full__add-form {
    display: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.gizmo-ql-full__add-form--visible {
    display: block;
}
.gizmo-ql-full__add-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-ql-full__add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 500px) {
    .gizmo-ql-full__add-grid { grid-template-columns: 1fr; }
}
.gizmo-ql-full__add-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gizmo-ql-full__add-group--full {
    grid-column: 1 / -1;
}
.gizmo-ql-full__add-group label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.gizmo-ql-full__add-group input,
.gizmo-ql-full__add-group textarea,
.gizmo-ql-full__add-group select {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.gizmo-ql-full__add-group textarea {
    min-height: 60px;
    resize: vertical;
    font-family: 'Inter', system-ui, sans-serif;
}
.gizmo-ql-full__add-group input:focus,
.gizmo-ql-full__add-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-ql-full__add-submit {
    margin-top: 10px;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.gizmo-ql-full__add-submit:hover {
    filter: brightness(1.1);
}

/* Folders */
.gizmo-ql-full__folder-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.gizmo-ql-full__folder-tab {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-ql-full__folder-tab:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-ql-full__folder-tab--active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* Links List */
.gizmo-ql-full__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-ql-full__link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
    cursor: grab;
}
.gizmo-ql-full__link-item:hover {
    border-color: var(--accent-primary);
}
.gizmo-ql-full__link-item--dragging {
    opacity: 0.5;
    border-style: dashed;
}
.gizmo-ql-full__link-item--drag-over {
    border-color: var(--accent-primary);
    background: rgba(49, 130, 206, 0.05);
}
.gizmo-ql-full__link-favicon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}
.gizmo-ql-full__link-info {
    flex: 1;
    min-width: 0;
}
.gizmo-ql-full__link-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gizmo-ql-full__link-name:hover {
    color: var(--accent-primary);
}
.gizmo-ql-full__link-url {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gizmo-ql-full__link-notes {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
}
.gizmo-ql-full__link-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gizmo-ql-full__link-clicks {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 2px 8px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.gizmo-ql-full__link-tags {
    display: flex;
    gap: 3px;
}
.gizmo-ql-full__link-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(49, 130, 206, 0.1);
    color: var(--accent-primary);
}
.gizmo-ql-full__link-delete {
    padding: 4px 8px;
    border: 1px solid var(--danger);
    border-radius: 4px;
    background: transparent;
    color: var(--danger);
    font-size: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}
.gizmo-ql-full__link-delete:hover {
    background: var(--danger);
    color: #fff;
}
.gizmo-ql-full__empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
    padding: 32px;
}

/* Import/Export */
.gizmo-ql-full__io-section {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}


/* == unicodetext == */
/* Unicode Text Gizmo Styles */

/* === BACK LINK === */
/* === WIDGET === */
.gizmo-ut-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gizmo-ut-widget__input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.gizmo-ut-widget__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-ut-widget__previews {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gizmo-ut-widget__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    min-height: 28px;
}
.gizmo-ut-widget__label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    min-width: 55px;
}
.gizmo-ut-widget__text {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gizmo-ut-widget__copy {
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-card, var(--bg-secondary));
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.gizmo-ut-widget__copy:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-ut-widget__more {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--accent-primary);
    text-decoration: none;
    padding-top: 2px;
}
.gizmo-ut-widget__more:hover { text-decoration: underline; }

.gizmo-ut-full__input-wrap {
    margin-bottom: 20px;
}
.gizmo-ut-full__textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}
.gizmo-ut-full__textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.gizmo-ut-full__textarea::placeholder {
    color: var(--text-secondary);
}

/* Toolbar */
.gizmo-ut-full__toolbar {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.gizmo-ut-full__toolbar span[data-ut-counter] {
    color: var(--accent-primary);
    font-weight: 600;
}
.gizmo-ut-full__star-hint {
    font-size: 1rem;
    vertical-align: middle;
}

/* Grid */
.gizmo-ut-full__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .gizmo-ut-full__grid { grid-template-columns: 1fr; }
}
.gizmo-ut-full__card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
.gizmo-ut-full__card:hover {
    border-color: var(--text-secondary);
}
.gizmo-ut-full__card--selected {
    border-color: var(--accent-primary);
}
.gizmo-ut-full__card--selected:hover {
    border-color: var(--accent-primary);
}
.gizmo-ut-full__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gizmo-ut-full__style-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gizmo-ut-full__card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Star toggle button */
.gizmo-ut-full__star-btn {
    padding: 0;
    border: none;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, transform 0.15s;
}
.gizmo-ut-full__star-btn:hover {
    color: var(--accent-primary);
    transform: scale(1.15);
}
.gizmo-ut-full__card--selected .gizmo-ut-full__star-btn {
    color: var(--accent-primary);
}

.gizmo-ut-full__copy-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-card, var(--bg-secondary));
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.gizmo-ut-full__copy-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.gizmo-ut-full__preview {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
    min-height: 1.6em;
}

/* === SHARED === */
.gizmo-ut--copied {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}


/* == formulas == */
/* ===== Formulas Gizmo - Full Page ===== */

/* === Categories === */
.gizmo-formulas-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.gizmo-formulas-cat-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gizmo-formulas-cat-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.gizmo-formulas-cat-btn--active {
    background-color: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* === Favorites === */
.gizmo-formulas-favorites {
    margin-bottom: 1rem;
}

.gizmo-formulas-favorites__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gizmo-formulas-favorites__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-formulas-favorites__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gizmo-formulas-fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card);
    font-size: 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s;
}

.gizmo-formulas-fav-chip:hover {
    border-color: var(--accent-primary);
}

.gizmo-formulas-fav-chip__remove {
    color: var(--danger);
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.gizmo-formulas-fav-chip__remove:hover {
    opacity: 1;
}

/* === Picker Grid === */
.gizmo-formulas-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gizmo-formulas-picker__card {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gizmo-formulas-picker__card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gizmo-formulas-picker__card--active {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.gizmo-formulas-picker__card-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.gizmo-formulas-picker__card-eq {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

/* === Formula Panel === */
.gizmo-formulas-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.gizmo-formulas-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.gizmo-formulas-panel__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-formulas-panel__desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 0.15rem;
}

.gizmo-formulas-panel__actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.gizmo-formulas-panel__fav {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.gizmo-formulas-panel__fav:hover {
    border-color: var(--warning);
    color: var(--warning);
}

.gizmo-formulas-panel__fav--active {
    color: var(--warning);
    border-color: var(--warning);
}

.gizmo-formulas-panel__clear {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.gizmo-formulas-panel__clear:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* === Fields Grid === */
.gizmo-formulas-panel__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.gizmo-formulas-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gizmo-formulas-field label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.gizmo-formulas-field__unit {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.gizmo-formulas-field input,
.gizmo-formulas-field select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    width: 100%;
    box-sizing: border-box;
}

.gizmo-formulas-field input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.gizmo-formulas-field select {
    cursor: pointer;
}

.gizmo-formulas-field--result input {
    color: var(--accent-primary);
    font-weight: 600;
    background-color: var(--bg-secondary);
}

.gizmo-formulas-field--solved input {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
}

/* === Result Summary === */
.gizmo-formulas-panel__result {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--bg-card);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-align: center;
    min-height: 1.2em;
}

/* === History === */
.gizmo-formulas-history {
    margin-top: 1rem;
}

.gizmo-formulas-history__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gizmo-formulas-history__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gizmo-formulas-history__clear {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-secondary);
    color: var(--danger);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.gizmo-formulas-history__clear:hover {
    background-color: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.gizmo-formulas-history__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
}

.gizmo-formulas-history__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s;
}

.gizmo-formulas-history__item:hover {
    background-color: var(--bg-secondary);
}

.gizmo-formulas-history__item-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.gizmo-formulas-history__item-summary {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gizmo-formulas-history__item-time {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.gizmo-formulas-history__empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.8125rem;
}

/* === Responsive === */
@media (max-width: 575px) {
    .gizmo-formulas-panel__fields {
        grid-template-columns: 1fr;
    }

    .gizmo-formulas-picker {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .gizmo-formulas-panel__header {
        flex-direction: column;
    }

    .gizmo-formulas-panel__actions {
        align-self: flex-end;
    }
}


/* == tipcalc == */
/* ===== Tip Calculator Gizmo ===== */


.tipcalc-full__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}

/* === Inputs === */
.tipcalc-full__inputs,
.tipcalc-full__results {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.tipcalc-full__field {
    display: block;
    margin-bottom: 1rem;
}

.tipcalc-full__field > span {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.tipcalc-full__field input[type="text"],
.tipcalc-full__customrow input,
.tipcalc-full__people input {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'JetBrains Mono', monospace;
}

.tipcalc-full__field input[type="text"] { width: 100%; box-sizing: border-box; }
.tipcalc-full__field input:focus { outline: none; border-color: var(--accent-primary); }

.tipcalc-full__presets {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.tipcalc-preset {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tipcalc-preset:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.tipcalc-preset--active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.tipcalc-full__customrow {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.tipcalc-full__customrow input { width: 90px; }

.tipcalc-full__unit {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.tipcalc-full__people {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.tipcalc-full__people input {
    width: 64px;
    text-align: center;
}

.tipcalc-full__step {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tipcalc-full__step:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.tipcalc-full__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.4;
}

.tipcalc-full__check input { margin-top: 0.15rem; }

/* === Results === */
.tipcalc-full__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.tipcalc-full__row:last-of-type { border-bottom: none; }

.tipcalc-full__label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.tipcalc-full__value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tipcalc-full__value--big {
    font-size: 1.75rem;
    color: var(--accent-primary);
}

.tipcalc-full__note {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
    line-height: 1.5;
    min-height: 1rem;
}

@media (max-width: 575px) {
    .tipcalc-full__grid { grid-template-columns: 1fr; }
}


/* == datecalc == */
/* ===== Date Calculator Gizmo ===== */


/* === Tabs === */
.datecalc-full__tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.datecalc-full__tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.datecalc-full__tab:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.datecalc-full__tab--active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* === Form === */
.datecalc-full__form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.datecalc-full__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.datecalc-full__field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.datecalc-full__field input,
.datecalc-full__field select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
}
.datecalc-full__field input:focus,
.datecalc-full__field select:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.datecalc-full__field input[type="number"] { width: 90px; }
.datecalc-full__swap {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.datecalc-full__swap:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* === Results === */
.datecalc-full__result {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.datecalc-full__result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
}
.datecalc-full__headline {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1.2;
}
.datecalc-full__note {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.datecalc-full__sub {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}
.datecalc-full__hint {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
}
.datecalc-full__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.datecalc-full__stat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.datecalc-full__stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.datecalc-full__stat-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .datecalc-full__form { flex-direction: column; align-items: stretch; }
    .datecalc-full__swap { align-self: center; }
    .datecalc-full__field input[type="number"] { width: 100%; }
}


/* == randompicker == */
/* ===== Random Picker Gizmo ===== */


.randompicker-full__hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 1rem;
}

/* === Pick result === */
.randompicker-full__result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.5rem;
    margin-bottom: 1rem;
}
.randompicker-full__result--pop { animation: randompicker-full-pop 0.25s ease; }
@keyframes randompicker-full-pop {
    0% { transform: scale(0.6); opacity: 0.3; }
    100% { transform: scale(1); opacity: 1; }
}
.randompicker-full__big-icon { font-size: 2rem; line-height: 1; }
.randompicker-full__big-body { display: flex; flex-direction: column; }
.randompicker-full__big-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-primary);
    overflow-wrap: anywhere;
}
.randompicker-full__big-from {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === Toolbar === */
.randompicker-full__toolbar { margin-bottom: 1rem; }

/* === Buttons === */
.randompicker-full__btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.randompicker-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.randompicker-full__btn--primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.randompicker-full__btn--primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #fff;
}
.randompicker-full__btn--danger:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* === Editor === */
.randompicker-full__editor {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.randompicker-full__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.randompicker-full__field--grow { width: 100%; }
.randompicker-full__field span {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.randompicker-full__field input,
.randompicker-full__textarea {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
}
.randompicker-full__textarea { resize: vertical; }
.randompicker-full__field input:focus,
.randompicker-full__textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.randompicker-full__editor-actions {
    display: flex;
    gap: 0.6rem;
}
.randompicker-full__error {
    color: var(--danger);
    font-size: 0.8125rem;
    margin: 0;
}

/* === List cards === */
.randompicker-full__lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.randompicker-full__card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.randompicker-full__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.randompicker-full__card-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.randompicker-full__card-count {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.randompicker-full__card-preview {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow-wrap: anywhere;
    flex: 1;
}
.randompicker-full__card-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.randompicker-full__empty {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}


/* == diceroller == */
/* ===== Dice Roller Gizmo ===== */


.diceroller-full__hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 1rem;
}

/* === Dice tray === */
.diceroller-full__tray {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.diceroller-die {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
}

.diceroller-die__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.diceroller-die__face:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}
.diceroller-die__face:active { transform: translateY(0) scale(0.96); }

.diceroller-die__icon { font-size: 1.4rem; line-height: 1; }

.diceroller-die__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 700;
}

/* === Quantity stepper === */
.diceroller-die__qty {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.diceroller-die__qty input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0.3rem 0.2rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-card);
    -moz-appearance: textfield;
}
.diceroller-die__qty input::-webkit-outer-spin-button,
.diceroller-die__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.diceroller-die__qty input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.diceroller-die__step {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.diceroller-die__step:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* === Controls === */
.diceroller-full__controls {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.diceroller-full__btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.diceroller-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.diceroller-full__btn--primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.diceroller-full__btn--primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #fff;
}

/* === Results === */
.diceroller-full__results { min-height: 2rem; }
.diceroller-full__results--pop { animation: diceroller-full-pop 0.25s ease; }
@keyframes diceroller-full-pop {
    0% { transform: scale(0.97); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

.diceroller-full__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.diceroller-full__row-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 72px;
}

.diceroller-full__row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.diceroller-full__chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--accent-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
}

.diceroller-full__chip--coin { color: var(--text-primary); }

.diceroller-full__row-sub {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.diceroller-full__total {
    padding: 0.75rem 0;
    font-size: 1rem;
    color: var(--text-secondary);
}
.diceroller-full__total strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    color: var(--accent-primary);
}
.diceroller-full__total-note {
    font-size: 0.75rem;
}

.diceroller-full__error {
    color: var(--danger);
    font-size: 0.8125rem;
    margin: 0;
}


/* == emoji == */
/* ===== Emoji Picker Gizmo ===== */


/* === Search === */
.emoji-full__search {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    margin: 0.75rem 0 1rem;
}
.emoji-full__search:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* === Recent === */
.emoji-full__recent {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.emoji-full__recent-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.emoji-full__recent-row {
    display: flex;
    gap: 0.15rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* === Category chips === */
.emoji-full__chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.emoji-chip {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.emoji-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.emoji-chip--active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.emoji-chip--active:hover { color: #fff; }

/* === Status line === */
.emoji-full__status {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    min-height: 1rem;
}

/* === Grid === */
.emoji-full__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 0.15rem;
}
.emoji-btn {
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1.6;
    padding: 0.15rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.emoji-btn:hover {
    background: var(--bg-secondary);
    transform: scale(1.25);
}
.emoji-btn:active { transform: scale(1.05); }

/* === Copy toast === */
.emoji-full__toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 100;
    pointer-events: none;
}

@media (max-width: 575px) {
    .emoji-full__grid { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
    .emoji-btn { font-size: 1.3rem; }
}


/* == thesaurus == */
/* ===== Thesaurus Gizmo ===== */


/* === Search row === */
.thesaurus-full__searchrow {
    display: flex;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
}
.thesaurus-full__back {
    flex-shrink: 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.thesaurus-full__back:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.thesaurus-full__back:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.thesaurus-full__input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
}
.thesaurus-full__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.thesaurus-full__go {
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--accent-primary);
    border-radius: 10px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.thesaurus-full__go:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

/* === Tabs === */
.thesaurus-full__tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.thesaurus-tab {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.thesaurus-tab:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.thesaurus-tab--active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.thesaurus-tab--active:hover { color: #fff; }

/* === Status === */
.thesaurus-full__status {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    min-height: 1.1rem;
}

/* === Results === */
.thesaurus-full__results {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.thesaurus-chip {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.thesaurus-chip:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

.thesaurus-full__msg {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}
.thesaurus-full__error {
    font-size: 0.875rem;
    color: var(--danger);
    margin: 0;
}

@media (max-width: 575px) {
    .thesaurus-full__searchrow { flex-direction: column; }
}


/* == wikipedia == */
/* ===== Wikipedia Explorer Gizmo ===== */


/* === Search row === */
.wikipedia-full__searchrow {
    display: flex;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}
.wikipedia-full__input {
    flex: 1;
    min-width: 200px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
}
.wikipedia-full__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.wikipedia-full__btn {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.wikipedia-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.wikipedia-full__btn--primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.wikipedia-full__btn--primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #fff;
}

/* === Status === */
.wikipedia-full__status {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    min-height: 1.1rem;
}
.wikipedia-full__clear {
    border: none;
    background: none;
    color: var(--accent-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.wikipedia-full__clear:hover { text-decoration: underline; }

/* === Article cards === */
.wikipedia-card {
    display: flex;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s, transform 0.2s;
}
.wikipedia-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.wikipedia-card__body { flex: 1; min-width: 0; }
.wikipedia-card__title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 0.2rem;
}
.wikipedia-card__title:hover { color: var(--accent-primary); }
.wikipedia-card__desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.4rem;
}
.wikipedia-card__extract {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0 0 0.5rem;
}
.wikipedia-card__link {
    font-size: 0.8125rem;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}
.wikipedia-card__link:hover { text-decoration: underline; }
.wikipedia-card__thumb {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

/* === Sections === */
.wikipedia-section { margin-bottom: 1.5rem; }
.wikipedia-section__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.wikipedia-section__sub {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* === On this day === */
.wikipedia-otd {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wikipedia-otd__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    line-height: 1.5;
}
.wikipedia-otd__item:last-child { border-bottom: none; }
.wikipedia-otd__year {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--accent-primary);
    flex-shrink: 0;
    min-width: 48px;
    text-align: right;
}
.wikipedia-otd__text { color: var(--text-primary); }
.wikipedia-otd__link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.wikipedia-otd__link:hover { text-decoration: underline; }

/* === Picture of the day === */
.wikipedia-potd__img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    display: block;
}
.wikipedia-potd__desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

/* === Most read === */
.wikipedia-mostread {
    margin: 0;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
}
.wikipedia-mostread__item { padding: 0.15rem 0; }
.wikipedia-mostread__item a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}
.wikipedia-mostread__item a:hover { color: var(--accent-primary); }
.wikipedia-mostread__desc { color: var(--text-secondary); }

.wikipedia-full__msg {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}
.wikipedia-full__error {
    font-size: 0.875rem;
    color: var(--danger);
    margin: 0;
}

@media (max-width: 575px) {
    .wikipedia-card { flex-direction: column-reverse; }
    .wikipedia-card__thumb { width: 100%; height: 140px; }
    .wikipedia-otd__year { min-width: 40px; }
}


/* == breathing == */
/* ===== Breathing Timer Gizmo ===== */


.breathing-full__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

/* === Stage === */
.breathing-full__stage-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.breathing-full__stage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
}
.breathing-full__stage {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.breathing-full__circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--accent-secondary), var(--accent-primary));
    opacity: 0.85;
    transform: scale(0.55);
    will-change: transform;
}
.breathing-full__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.breathing-full__label {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.breathing-full__count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    min-height: 2.5rem;
}
.breathing-full__session-info {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.breathing-full__session-info strong {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}
.breathing-full__toggle {
    padding: 0.6rem 2.5rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.breathing-full__toggle:hover { background: var(--accent-secondary); }
.breathing-full__toggle.breathing-btn--stop { background: var(--danger); }

/* === Controls === */
.breathing-full__controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.breathing-full__control-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}
.breathing-full__control-card h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem;
}
.breathing-full__patterns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.breathing-full__pattern {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.breathing-full__pattern:hover { border-color: var(--accent-primary); }
.breathing-full__pattern--active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}
.breathing-full__pattern-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}
.breathing-full__pattern-desc {
    font-size: 0.6875rem;
    color: var(--text-secondary);
}
.breathing-full__custom {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.breathing-full__custom label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}
.breathing-full__custom label span {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.breathing-full__custom input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
}
.breathing-full__custom input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.breathing-full__select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
}
.breathing-full__stats {
    display: flex;
    gap: 0.75rem;
}
.breathing-full__stat {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
}
.breathing-full__stat-value {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-primary);
}
.breathing-full__stat-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.breathing-full__disclaimer {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .breathing-full__circle { transition: none !important; }
}

@media (max-width: 700px) {
    .breathing-full__layout { grid-template-columns: 1fr; }
    .breathing-full__custom { flex-wrap: wrap; }
    .breathing-full__custom label { flex: 1 1 40%; }
}


/* == jsonformat == */
/* ===== JSON Formatter Gizmo ===== */


/* === Toolbar === */
.jsonformat-full__toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
.jsonformat-full__btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.jsonformat-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.jsonformat-full__btn--primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.jsonformat-full__btn--primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #fff;
}
.jsonformat-full__option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.jsonformat-full__option select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
}
.jsonformat-full__option--check { cursor: pointer; color: var(--text-primary); }
.jsonformat-full__spacer { flex: 1; }

/* === Status bar === */
.jsonformat-full__statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0 0.25rem;
    margin-bottom: 0.75rem;
    min-height: 1.25rem;
}
.jsonformat-full__status {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.jsonformat-full__status--ok { color: var(--success); font-weight: 600; }
.jsonformat-full__status--error { color: var(--danger); font-weight: 600; }
.jsonformat-full__stats {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

/* === Panes === */
.jsonformat-full__panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.jsonformat-full__input,
.jsonformat-full__output {
    height: 480px;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.jsonformat-full__input {
    resize: vertical;
}
.jsonformat-full__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.jsonformat-full__output {
    margin: 0;
    overflow: auto;
    white-space: pre;
}

/* === Syntax highlighting === */
.jsonformat-tok--key { color: var(--accent-primary); font-weight: 600; }
.jsonformat-tok--string { color: var(--success); }
.jsonformat-tok--number { color: var(--warning); }
.jsonformat-tok--boolean { color: var(--danger); font-weight: 600; }
.jsonformat-tok--null { color: var(--text-secondary); font-style: italic; }

@media (max-width: 800px) {
    .jsonformat-full__panes { grid-template-columns: 1fr; }
    .jsonformat-full__input,
    .jsonformat-full__output { height: 300px; }
}


/* == regex == */
/* ===== Regex Tester Gizmo ===== */


/* === Pattern row === */
.regex-full__patternrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0.5rem;
}

.regex-full__slash {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    color: var(--text-secondary);
}

.regex-full__pattern {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'JetBrains Mono', monospace;
}

.regex-full__pattern:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* === Flags === */
.regex-full__flags {
    display: flex;
    gap: 0.3rem;
}

.regex-flag {
    cursor: pointer;
    user-select: none;
}

.regex-flag input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.regex-flag span {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.15s ease;
}

.regex-flag:hover span {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.regex-flag input:checked + span {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* === Test string === */
.regex-full__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.75rem 0 0.35rem;
}

.regex-full__test {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    resize: vertical;
}

.regex-full__test:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* === Status / error === */
.regex-full__status {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
    min-height: 1.1rem;
}

.regex-full__error {
    font-size: 0.8125rem;
    color: var(--danger);
    font-family: 'JetBrains Mono', monospace;
    margin: 0.5rem 0;
}

/* === Sections === */
.regex-full__section { margin-bottom: 1.25rem; }

.regex-full__heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

/* === Highlight view === */
.regex-full__highlight {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 260px;
    overflow-y: auto;
    color: var(--text-primary);
}

.regex-mark {
    background: var(--accent-primary);
    color: #fff;
    border-radius: 3px;
    padding: 0 1px;
}

/* === Match list === */
.regex-full__matches {
    max-height: 300px;
    overflow-y: auto;
}

.regex-match {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}

.regex-match__num {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.regex-match__text {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--accent-primary);
    overflow-wrap: anywhere;
}

.regex-match__index {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.regex-match__groups {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-left: 1.5rem;
}

.regex-match__group {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    overflow-wrap: anywhere;
}

.regex-full__empty {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0.25rem 0;
}

/* === Replace === */
.regex-full__replace {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.5rem;
}

.regex-full__replace:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.regex-full__replace-out {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 200px;
    overflow-y: auto;
    color: var(--text-primary);
    margin: 0;
    min-height: 1.5rem;
}

/* === Cheatsheet === */
.regex-cheat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.35rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.regex-cheat code {
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}


/* == textdiff == */
/* ===== Text Diff Checker Gizmo ===== */


/* === Inputs === */
.textdiff-full__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 0 0.75rem;
}

@media (max-width: 640px) {
    .textdiff-full__inputs { grid-template-columns: 1fr; }
}

.textdiff-full__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.textdiff-full__text {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    resize: vertical;
}

.textdiff-full__text:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* === Toolbar === */
.textdiff-full__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.textdiff-full__views {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.textdiff-view {
    padding: 0.4rem 0.8rem;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.textdiff-view + .textdiff-view { border-left: 1px solid var(--border-color); }

.textdiff-view:hover { color: var(--accent-primary); }

.textdiff-view--active {
    background: var(--accent-primary);
    color: #fff;
}

.textdiff-view--active:hover { color: #fff; }

.textdiff-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.textdiff-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* === Stats === */
.textdiff-full__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
    min-height: 1.1rem;
}

.textdiff-stat { font-family: 'JetBrains Mono', monospace; }
.textdiff-stat--add { color: var(--success); font-weight: 700; }
.textdiff-stat--del { color: var(--danger); font-weight: 700; }

/* === Diff output === */
.textdiff-full__out { margin-bottom: 1.25rem; }

.textdiff-unified,
.textdiff-split__col {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow-x: auto;
    max-height: 480px;
    overflow-y: auto;
}

.textdiff-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .textdiff-split { grid-template-columns: 1fr; }
}

.textdiff-line {
    display: flex;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.textdiff-line--add { background: rgba(34, 197, 94, 0.14); }
.textdiff-line--del { background: rgba(239, 68, 68, 0.14); }
.textdiff-line--empty { background: rgba(128, 128, 128, 0.1); }

.textdiff-line__num {
    flex: 0 0 2.6em;
    padding: 0 0.4em;
    text-align: right;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    user-select: none;
}

.textdiff-line__sign {
    flex: 0 0 1em;
    text-align: center;
    color: var(--text-secondary);
    user-select: none;
}

.textdiff-line--add .textdiff-line__sign { color: var(--success); font-weight: 700; }
.textdiff-line--del .textdiff-line__sign { color: var(--danger); font-weight: 700; }

.textdiff-line__text {
    flex: 1;
    padding-right: 0.5em;
    min-width: 0;
}

.textdiff-full__empty {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0.25rem 0;
    padding: 0.5rem 0.75rem;
}


/* == hashgen == */
/* ===== Hash & UUID Generator Gizmo ===== */


/* === Sections === */
.hashgen-full__section { margin: 1.25rem 0; }

.hashgen-full__heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.hashgen-full__note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.hashgen-full__error {
    font-size: 0.8125rem;
    color: var(--danger);
    margin: 0.5rem 0;
}

/* === Text input === */
.hashgen-full__text {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 0.5rem;
}

.hashgen-full__text:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* === Hash rows === */
.hashgen-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
}

.hashgen-row__algo {
    flex: 0 0 5.5em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hashgen-row__value {
    flex: 1;
    min-width: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.hashgen-row__copy,
.hashgen-btn {
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hashgen-row__copy:hover,
.hashgen-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

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

.hashgen-btn--primary:hover { color: #fff; opacity: 0.9; }

/* === File input === */
.hashgen-full__filelabel input[type="file"] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-family: inherit;
}

/* === UUID generator === */
.hashgen-full__uuidbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.hashgen-full__uuidlabel {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

#hashgen-uuid-count {
    width: 4.5em;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
}

#hashgen-uuid-count:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.hashgen-full__uuidlist {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 320px;
    overflow-y: auto;
}

.hashgen-uuid {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: all 0.15s ease;
}

.hashgen-uuid:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.hashgen-uuid--copied {
    border-color: var(--success);
    color: var(--success);
}


/* == markdown == */
/* ===== Markdown Previewer Gizmo ===== */


/* === Toolbar === */
.markdown-full__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}

.markdown-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.markdown-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.markdown-full__count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

/* === Panes === */
.markdown-full__panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

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

.markdown-full__pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.markdown-full__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.markdown-full__input {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.6;
    resize: vertical;
}

.markdown-full__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* === Preview === */
.markdown-full__preview {
    flex: 1;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-y: auto;
    overflow-wrap: anywhere;
    max-height: 560px;
}

.markdown-full__preview h1,
.markdown-full__preview h2,
.markdown-full__preview h3 {
    margin: 0.75rem 0 0.4rem;
    line-height: 1.3;
}

.markdown-full__preview h1:first-child,
.markdown-full__preview h2:first-child,
.markdown-full__preview h3:first-child { margin-top: 0; }

.markdown-full__preview h1 { font-size: 1.5rem; }
.markdown-full__preview h2 { font-size: 1.2rem; }
.markdown-full__preview h3 { font-size: 1.05rem; }

.markdown-full__preview ul,
.markdown-full__preview ol {
    margin: 0.4rem 0;
    padding-left: 1.5rem;
}

.markdown-full__preview blockquote {
    border-left: 3px solid var(--accent-primary);
    margin: 0.5rem 0;
    padding: 0.2rem 0 0.2rem 0.75rem;
    color: var(--text-secondary);
}

.markdown-full__preview code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

.markdown-full__preview pre {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin: 0.5rem 0;
    overflow-x: auto;
}

.markdown-full__preview pre code {
    background: none;
    border: none;
    padding: 0;
    white-space: pre;
}

.markdown-full__preview a { color: var(--accent-primary); }

.markdown-full__preview img {
    max-width: 100%;
    border-radius: 8px;
}

.markdown-full__preview hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0.75rem 0;
}

.markdown-full__empty {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* === Reference === */
.markdown-full__section { margin: 1.5rem 0; }

.markdown-full__heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.markdown-full__note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.75rem 0 0;
}

.markdown-cheat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.35rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.markdown-cheat code {
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}


/* == noise == */
/* ===== Ambient Noise Gizmo ===== */


.noise-full__note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 1rem;
}

.noise-full__note a { color: var(--accent-primary); }

/* === Play control === */
.noise-full__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.noise-full__toggle {
    padding: 0.6rem 1.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.noise-full__toggle:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.noise-full__toggle--on {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.noise-full__toggle--on:hover { color: #fff; opacity: 0.9; }

.noise-full__countdown {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* === Type cards === */
.noise-full__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 560px) {
    .noise-full__cards { grid-template-columns: 1fr; }
}

.noise-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.noise-card:hover { border-color: var(--accent-primary); }

.noise-card--active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.noise-card__swatch {
    width: 100%;
    height: 6px;
    border-radius: 3px;
}

.noise-card__swatch--white {
    background: repeating-linear-gradient(90deg, #cfcfcf 0 3px, #f5f5f5 3px 6px);
}

.noise-card__swatch--pink {
    background: repeating-linear-gradient(90deg, #e6a1b8 0 5px, #f7dbe5 5px 10px);
}

.noise-card__swatch--brown {
    background: repeating-linear-gradient(90deg, #9c7a5b 0 8px, #c7ab90 8px 16px);
}

.noise-card__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.noise-card__desc {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* === Volume / timer rows === */
.noise-full__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.noise-full__label {
    flex: 0 0 5.5em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.noise-full__volicon { font-size: 0.9375rem; }

.noise-full__row input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--accent-primary);
}

.noise-full__row select {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
}

.noise-full__row select:focus,
.noise-full__row input[type="range"]:focus {
    outline: none;
    border-color: var(--accent-primary);
}


/* == typingtest == */
/* ===== Typing Test Gizmo ===== */


/* === Toolbar === */
.typingtest-full__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.typingtest-full__durations { display: flex; gap: 0.4rem; }
.typingtest-full__duration {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}
.typingtest-full__duration:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.typingtest-full__duration--active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.typingtest-full__live {
    display: flex;
    gap: 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.typingtest-full__live-item strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    color: var(--accent-primary);
}
.typingtest-full__restart {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.typingtest-full__restart:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* === Test area === */
.typingtest-full__words {
    position: relative;
    height: 140px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    line-height: 2;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    user-select: none;
    scroll-behavior: smooth;
}
.typingtest-full__word { border-radius: 4px; padding: 0.1rem 0.15rem; }
.typingtest-full__word--current {
    background: var(--accent-primary);
    color: #fff;
}
.typingtest-full__word--current.typingtest-full__word--typo {
    background: var(--danger);
    color: #fff;
}
.typingtest-full__word--correct { color: var(--success); }
.typingtest-full__word--wrong { color: var(--danger); text-decoration: line-through; }

.typingtest-full__input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 1.125rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    background: var(--bg-card);
}
.typingtest-full__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.typingtest-full__input:disabled { opacity: 0.5; }

/* === Results === */
.typingtest-full__results {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.typingtest-full__results::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
}
.typingtest-full__results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.typingtest-full__result-value {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1.2;
}
.typingtest-full__result-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.typingtest-full__result-best {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.typingtest-full__again {
    padding: 0.55rem 2rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.typingtest-full__again:hover { background: var(--accent-secondary); }

/* === History === */
.typingtest-full__history-section { margin-top: 1.5rem; }
.typingtest-full__history-section h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.typingtest-full__history-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
    font-size: 0.8125rem;
}
.typingtest-full__history-date {
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    min-width: 42px;
}
.typingtest-full__history-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}
.typingtest-full__history-bar {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: 4px;
}
.typingtest-full__history-wpm {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 64px;
    text-align: right;
}
.typingtest-full__history-acc {
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    min-width: 40px;
    text-align: right;
}
.typingtest-full__empty {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
}

@media (max-width: 600px) {
    .typingtest-full__toolbar { flex-direction: column; align-items: stretch; }
    .typingtest-full__live { justify-content: space-between; }
}


/* == moonphase == */
/* ===== Moon Phase Gizmo ===== */


/* === Hero === */
.moonphase-full__hero {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.moonphase-full__hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
}
.moonphase-full__hero-icon {
    font-size: 5rem;
    line-height: 1.2;
}
.moonphase-full__hero-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0.5rem 0 1.25rem;
}
.moonphase-full__hero-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.moonphase-full__hero-stat { min-width: 90px; }
.moonphase-full__hero-stat-value {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}
.moonphase-full__hero-stat-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === Sections === */
.moonphase-full__section { margin-bottom: 1.25rem; }
.moonphase-full__section h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* === Upcoming === */
.moonphase-full__upcoming {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}
.moonphase-full__upcoming-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.moonphase-full__upcoming-icon { font-size: 1.75rem; }
.moonphase-full__upcoming-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
}
.moonphase-full__upcoming-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.moonphase-full__upcoming-days {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--accent-primary);
}

/* === 14-day strip === */
.moonphase-full__strip {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
}
.moonphase-full__day {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    min-width: 56px;
}
.moonphase-full__day--today {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}
.moonphase-full__day-icon { font-size: 1.375rem; }
.moonphase-full__day-label {
    font-size: 0.625rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.moonphase-full__disclaimer {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}


/* == sunrise == */
/* ===== Sunrise / Sunset Gizmo ===== */


/* === Location bar === */
.sunrise-full__locbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
}
.sunrise-full__loc-current { font-size: 0.875rem; color: var(--text-primary); font-weight: 600; }
.sunrise-full__loc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sunrise-full__btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.sunrise-full__btn:hover { opacity: 0.85; }
.sunrise-full__btn--ghost { background: var(--bg-secondary); color: var(--text-primary); }

.sunrise-full__manual { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.sunrise-full__manual-input {
    flex: 1;
    min-width: 120px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
}
.sunrise-full__manual-input:focus { outline: none; border-color: var(--accent-primary); }
.sunrise-full__manual-error { font-size: 0.75rem; color: var(--danger); flex-basis: 100%; }

/* === Date nav === */
.sunrise-full__datenav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.sunrise-full__nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}
.sunrise-full__nav-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.sunrise-full__date-label { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); min-width: 140px; text-align: center; }

/* === Hero stats === */
.sunrise-full__hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.sunrise-full__stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.sunrise-full__stat-icon { font-size: 1.5rem; }
.sunrise-full__stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.0625rem; font-weight: 700; color: var(--accent-primary); }
.sunrise-full__stat-label { font-size: 0.6875rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.sunrise-full__empty { text-align: center; color: var(--text-secondary); padding: 1rem; }

/* === Sections / table === */
.sunrise-full__section { margin-bottom: 1.25rem; }
.sunrise-full__section h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem; }
.sunrise-full__table-wrap { overflow-x: auto; }
.sunrise-full__table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.sunrise-full__table th, .sunrise-full__table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.sunrise-full__table th { color: var(--text-secondary); font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.4px; }
.sunrise-full__table td:not(:first-child) { font-family: 'JetBrains Mono', monospace; }

.sunrise-full__disclaimer { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; text-align: center; }

@media (max-width: 575px) {
    .sunrise-full__locbar { flex-direction: column; align-items: flex-start; }
}


/* == periodic == */
/* ===== Periodic Table Gizmo ===== */

/* 9 element-family colors reuse the app's validated 8-hue categorical order
   (same hues/steps, relabeled) plus one added hue for actinide — chemistry's
   9 standard families don't fold cleanly into fewer categories the way a
   data chart's series can. Every tile still carries its symbol as text, so
   identity never depends on color alone. Don't "fix" this by chasing an
   all-pairs-clean palette; it isn't achievable past ~4-8 categorical slots. */
:root, [data-theme="dark"] {
    --periodic-alkali-metal: #3987e5;      --periodic-alkali-metal-text: #111111;
    --periodic-alkaline-earth: #008300;    --periodic-alkaline-earth-text: #ffffff;
    --periodic-transition-metal: #d55181;  --periodic-transition-metal-text: #111111;
    --periodic-post-transition: #c98500;   --periodic-post-transition-text: #111111;
    --periodic-metalloid: #199e70;         --periodic-metalloid-text: #111111;
    --periodic-nonmetal: #d95926;          --periodic-nonmetal-text: #111111;
    --periodic-noble-gas: #9085e9;         --periodic-noble-gas-text: #111111;
    --periodic-lanthanide: #e66767;        --periodic-lanthanide-text: #111111;
    --periodic-actinide: #7a3030;          --periodic-actinide-text: #ffffff;
}
[data-theme="light"] {
    --periodic-alkali-metal: #2a78d6;      --periodic-alkali-metal-text: #ffffff;
    --periodic-alkaline-earth: #008300;    --periodic-alkaline-earth-text: #ffffff;
    --periodic-transition-metal: #e87ba4;  --periodic-transition-metal-text: #111111;
    --periodic-post-transition: #eda100;   --periodic-post-transition-text: #111111;
    --periodic-metalloid: #1baf7a;         --periodic-metalloid-text: #111111;
    --periodic-nonmetal: #eb6834;          --periodic-nonmetal-text: #111111;
    --periodic-noble-gas: #4a3aa7;         --periodic-noble-gas-text: #ffffff;
    --periodic-lanthanide: #e34948;        --periodic-lanthanide-text: #111111;
    --periodic-actinide: #a83030;          --periodic-actinide-text: #ffffff;
}


/* === Search === */
.periodic-full__search {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    margin: 0.75rem 0 1rem;
}
.periodic-full__search:focus { outline: none; border-color: var(--accent-primary); }

/* === Category legend / chips === */
.periodic-full__chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.periodic-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.periodic-chip::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-color, var(--text-secondary));
    flex-shrink: 0;
}
.periodic-chip--alkali-metal { --chip-color: var(--periodic-alkali-metal); }
.periodic-chip--alkaline-earth { --chip-color: var(--periodic-alkaline-earth); }
.periodic-chip--transition-metal { --chip-color: var(--periodic-transition-metal); }
.periodic-chip--post-transition { --chip-color: var(--periodic-post-transition); }
.periodic-chip--metalloid { --chip-color: var(--periodic-metalloid); }
.periodic-chip--nonmetal { --chip-color: var(--periodic-nonmetal); }
.periodic-chip--noble-gas { --chip-color: var(--periodic-noble-gas); }
.periodic-chip--lanthanide { --chip-color: var(--periodic-lanthanide); }
.periodic-chip--actinide { --chip-color: var(--periodic-actinide); }
.periodic-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.periodic-chip--active { border-color: var(--chip-color, var(--accent-primary)); background: var(--bg-primary); font-weight: 700; }

.periodic-full__status { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; min-height: 1rem; }

/* === Detail panel === */
.periodic-detail { margin-bottom: 1rem; }
.periodic-detail__card {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}
.periodic-detail__symbol {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--tile-color);
    color: var(--tile-text);
    font-size: 2.25rem;
    font-weight: 800;
}
.periodic-detail__body { min-width: 0; flex: 1; }
.periodic-detail__body h2 { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.6rem; }
.periodic-detail__num { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.periodic-detail__stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.periodic-detail__stats span { font-size: 0.8125rem; color: var(--text-secondary); }
.periodic-detail__stats strong { display: block; font-size: 0.6875rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.4px; }

@media (max-width: 575px) {
    .periodic-detail__card { flex-direction: column; align-items: flex-start; }
}

/* === Table grid === */
.periodic-full__scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.periodic-full__table {
    display: grid;
    grid-template-columns: repeat(18, minmax(40px, 1fr));
    grid-template-rows: repeat(10, minmax(40px, auto));
    gap: 3px;
    min-width: 800px;
}

.periodic-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: var(--tile-color);
    color: var(--tile-text);
    cursor: pointer;
    padding: 0.15rem;
    font-family: inherit;
    transition: transform 0.1s, opacity 0.15s;
}
.periodic-tile:hover { transform: scale(1.08); z-index: 1; }
.periodic-tile__num { font-size: 0.5rem; opacity: 0.85; line-height: 1; }
.periodic-tile__symbol { font-size: 0.8125rem; font-weight: 800; line-height: 1.2; }
.periodic-tile--dim { opacity: 0.15; }

.periodic-tile--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    font-size: 0.625rem;
    cursor: default;
}

.periodic-tile--alkali-metal { --tile-color: var(--periodic-alkali-metal); --tile-text: var(--periodic-alkali-metal-text); }
.periodic-tile--alkaline-earth { --tile-color: var(--periodic-alkaline-earth); --tile-text: var(--periodic-alkaline-earth-text); }
.periodic-tile--transition-metal { --tile-color: var(--periodic-transition-metal); --tile-text: var(--periodic-transition-metal-text); }
.periodic-tile--post-transition { --tile-color: var(--periodic-post-transition); --tile-text: var(--periodic-post-transition-text); }
.periodic-tile--metalloid { --tile-color: var(--periodic-metalloid); --tile-text: var(--periodic-metalloid-text); }
.periodic-tile--nonmetal { --tile-color: var(--periodic-nonmetal); --tile-text: var(--periodic-nonmetal-text); }
.periodic-tile--noble-gas { --tile-color: var(--periodic-noble-gas); --tile-text: var(--periodic-noble-gas-text); }
.periodic-tile--lanthanide { --tile-color: var(--periodic-lanthanide); --tile-text: var(--periodic-lanthanide-text); }
.periodic-tile--actinide { --tile-color: var(--periodic-actinide); --tile-text: var(--periodic-actinide-text); }

.periodic-full__disclaimer { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; text-align: center; margin-top: 0.75rem; }


/* == hotkeys == */
/* ===== Hotkeys Reference Gizmo ===== */

/* === Shared row/keycap styling (widget + full) === */
.hotkeys-group { margin-bottom: 0.75rem; break-inside: avoid; }
.hotkeys-group__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0 0 0.35rem;
}
.hotkeys-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}
.hotkeys-row:hover, .hotkeys-row:focus-visible { background: var(--bg-secondary); outline: none; }
.hotkeys-row__action { font-size: 0.8125rem; color: var(--text-primary); }
.hotkeys-row__keys {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}
.hotkeys-empty { font-size: 0.8125rem; color: var(--text-secondary); padding: 0.5rem 0; }

/* Note: the dashboard card (widget.php) is self-contained with its own
   inline <style> (hkw-* classes) rather than reusing these — the combined
   dashboard CSS strips each widget's <link> tag, and widget.php must not
   depend on this file being present (see gizmos/periodic for precedent). */

/* === Full page === */
.hotkeys-full__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.hotkeys-full__apps { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; }
.hotkeys-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.hotkeys-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.hotkeys-chip--active { border-color: var(--accent-primary); background: var(--bg-primary); font-weight: 700; color: var(--accent-primary); }
.hotkeys-full__platform {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.hotkeys-full__platform:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.hotkeys-full__search {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    margin-bottom: 0.5rem;
}
.hotkeys-full__search:focus { outline: none; border-color: var(--accent-primary); }
.hotkeys-full__status { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; min-height: 1rem; }
.hotkeys-full__list { columns: 300px; column-gap: 1.5rem; }
.hotkeys-full__disclaimer { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; text-align: center; margin-top: 0.75rem; }

/* === Copy toast === */
.hotkeys-full__toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 100;
    pointer-events: none;
}

@media (max-width: 575px) {
    .hotkeys-full__list { columns: 1; }
}


/* == devcommands == */
/* ===== Dev Commands / Cheat Sheet Gizmo ===== */

/* === Shared row styling (full page) === */
.devcmd-group { margin-bottom: 0.75rem; break-inside: avoid; }
.devcmd-group__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0 0 0.35rem;
}
.devcmd-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}
.devcmd-row:hover, .devcmd-row:focus-visible { background: var(--bg-secondary); outline: none; }
.devcmd-row__desc { font-size: 0.8125rem; color: var(--text-primary); }
.devcmd-row__cmd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
}
.devcmd-empty { font-size: 0.8125rem; color: var(--text-secondary); padding: 0.5rem 0; }

/* Note: the dashboard card (widget.php) is self-contained with its own
   inline <style> (dcw-* classes) rather than reusing these — the combined
   dashboard CSS strips each widget's <link> tag, and widget.php must not
   depend on this file being present (see gizmos/hotkeys for precedent). */

/* === Full page === */
.devcommands-full__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.devcommands-full__apps { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; }
.devcmd-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.devcmd-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.devcmd-chip--active { border-color: var(--accent-primary); background: var(--bg-primary); font-weight: 700; color: var(--accent-primary); }
.devcommands-full__search {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    margin-bottom: 0.5rem;
}
.devcommands-full__search:focus { outline: none; border-color: var(--accent-primary); }
.devcommands-full__status { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; min-height: 1rem; }
.devcommands-full__list { columns: 320px; column-gap: 1.5rem; }
.devcommands-full__disclaimer { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; text-align: center; margin-top: 0.75rem; }

/* === Copy toast === */
.devcommands-full__toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 100;
    pointer-events: none;
}

@media (max-width: 575px) {
    .devcommands-full__list { columns: 1; }
}


/* == flashcards == */
/* ===== Flash Cards Gizmo ===== */

/* === Full page: deck list === */
.flashcards-full__toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.flashcards-full__btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.flashcards-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.flashcards-full__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.flashcards-full__btn--primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.flashcards-full__btn--primary:hover { background: var(--accent-secondary); border-color: var(--accent-secondary); color: #fff; }
.flashcards-full__btn--danger { color: #e0526b; border-color: rgba(224, 82, 107, 0.4); }
.flashcards-full__btn--danger:hover { background: rgba(224, 82, 107, 0.12); border-color: #e0526b; color: #e0526b; }

.flashcards-full__empty { color: var(--text-secondary); font-size: 0.9375rem; padding: 1rem 0; }

.flashcards-full__decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.flashcards-full__card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}
.flashcards-full__card-head { display: flex; flex-direction: column; gap: 0.2rem; }
.flashcards-full__card-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.flashcards-full__card-count { font-size: 0.75rem; color: var(--text-secondary); }
.flashcards-full__card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* === Editor === */
.flashcards-editor {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    padding: 1rem;
    margin-bottom: 1rem;
}
.flashcards-editor h2 { font-size: 1rem; margin: 0 0 0.75rem; }
.flashcards-editor__field { margin-bottom: 0.75rem; }
.flashcards-editor__field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.3rem; }
.flashcards-editor__field input[type="text"],
.flashcards-editor__field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
}
.flashcards-editor__field textarea { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; min-height: 160px; resize: vertical; }
.flashcards-editor__hint { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.3rem; }
.flashcards-editor__error { color: #e0526b; font-size: 0.8125rem; margin-bottom: 0.75rem; }
.flashcards-editor__actions { display: flex; gap: 0.5rem; }

/* === Study mode === */
.flashcards-study {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
}
.flashcards-study__progress { font-size: 0.8125rem; color: var(--text-secondary); font-weight: 600; }
.flashcards-study__card {
    position: relative;
    width: 100%;
    max-width: 480px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}
.flashcards-study__face--back { display: none; }
.flashcards-study__card--flipped .flashcards-study__face--front { display: none; }
.flashcards-study__card--flipped .flashcards-study__face--back { display: block; color: var(--accent-primary); }
.flashcards-study__card--flipped { border-color: var(--accent-primary); }
.flashcards-study__reveal { width: 100%; max-width: 480px; }
.flashcards-study__grade { display: flex; gap: 0.75rem; width: 100%; max-width: 480px; }
.flashcards-study__grade .flashcards-full__btn { flex: 1; padding: 0.75rem; font-size: 0.9375rem; }

.flashcards-study__done { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.flashcards-study__done-icon { font-size: 2.5rem; }
.flashcards-study__done-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.flashcards-study__done-stats { font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 0.5rem; }

.flashcards-full__cap-notice { font-size: 0.8125rem; color: var(--accent-primary); margin-top: 0.5rem; }

/* === Widget === */
.fcw { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; font-family: 'Inter', system-ui, sans-serif; padding: 0.25rem 0; }
.fcw-due { display: flex; flex-direction: column; }
.fcw-due__count { font-size: 2rem; font-weight: 800; color: var(--accent-primary); line-height: 1; }
.fcw-due__label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.2rem; }
.fcw-review-btn {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    border-radius: 20px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}
.fcw-review-btn:hover { background: var(--accent-secondary); }

@media (max-width: 575px) {
    .flashcards-full__decks { grid-template-columns: 1fr; }
}


/* == crypto == */
/* ===== Crypto Prices Gizmo ===== */

/* === Full page toolbar === */
.crypto-full__toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.crypto-full__toolbar input[type="text"] {
    flex: 1;
    min-width: 160px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
}
.crypto-full__btn {
    padding: 0.55rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.crypto-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.crypto-full__btn--primary { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.crypto-full__btn--primary:hover { background: var(--accent-secondary); border-color: var(--accent-secondary); color: #fff; }

.crypto-full__popular { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.crypto-chip {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}
.crypto-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.crypto-chip--active { opacity: 0.45; cursor: default; border-color: var(--accent-primary); }
.crypto-chip--active:hover { color: var(--text-primary); }

.crypto-full__status { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; min-height: 1rem; }
.crypto-full__empty { color: var(--text-secondary); font-size: 0.9375rem; padding: 1rem 0; }

.crypto-full__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.crypto-full__row:last-child { border-bottom: none; }
.crypto-full__icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.crypto-full__name { display: flex; flex-direction: column; min-width: 90px; flex: 1; }
.crypto-full__name-main { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.crypto-full__name-sym { font-size: 0.6875rem; color: var(--text-secondary); }
.crypto-full__spark { flex-shrink: 0; }
.crypto-full__price { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); min-width: 80px; text-align: right; }
.crypto-full__remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.crypto-full__remove:hover { background: var(--bg-secondary); color: #e0526b; }

.crypto-full-change { font-size: 0.8125rem; font-weight: 700; min-width: 70px; text-align: right; }
.crypto-full-change--up { color: #2ecc71; }
.crypto-full-change--down { color: #e0526b; }

.crypto-full__attribution { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin-top: 1rem; }
.crypto-full__attribution a { color: var(--text-secondary); text-decoration: underline; }
.crypto-full__attribution a:hover { color: var(--accent-primary); }

@media (max-width: 575px) {
    .crypto-full__spark { display: none; }
}


/* == holidays == */
/* ===== Public Holidays Gizmo ===== */

.holidays-full__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.holidays-full__toolbar select {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
}
.holidays-full__year-nav { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.holidays-full__year-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}
.holidays-full__year-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.holidays-full__year-label { font-size: 1rem; font-weight: 700; color: var(--text-primary); min-width: 3.5rem; text-align: center; }

.holidays-full__status { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 0.75rem; }
.holidays-full__empty { color: var(--text-secondary); font-size: 0.9375rem; padding: 1rem 0; }

.holidays-full__row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.holidays-full__row:last-child { border-bottom: none; }
.holidays-full__row--past { opacity: 0.5; }
.holidays-full__date { font-size: 0.8125rem; font-weight: 700; color: var(--accent-primary); min-width: 100px; flex-shrink: 0; }
.holidays-full__name { font-size: 0.9375rem; color: var(--text-primary); }
.holidays-full__altname { font-size: 0.8125rem; color: var(--text-secondary); }


/* == earthquakes == */
/* ===== Earthquake Tracker Gizmo ===== */

.earthquakes-full__toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.earthquakes-full__toolbar select {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
}
.earthquakes-full__status { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 0.75rem; }
.earthquakes-full__empty { color: var(--text-secondary); font-size: 0.9375rem; padding: 1rem 0; }

.earthquakes-full__map-wrap { margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: var(--bg-secondary); }
#earthquakes-map { display: block; width: 100%; height: auto; }

.earthquakes-full__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
}
.earthquakes-full__row:last-child { border-bottom: none; }
.earthquakes-full__row:hover { background: var(--bg-secondary); }
.earthquakes-full__place { flex: 1; font-size: 0.875rem; color: var(--text-primary); }
.earthquakes-full__meta { font-size: 0.75rem; color: var(--text-secondary); flex-shrink: 0; }
.earthquakes-full__tsunami { color: #e0526b; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; }

.earthquakes-full-mag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8125rem;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    flex-shrink: 0;
}
.earthquakes-full-mag--strong { background: rgba(240, 165, 60, 0.15); color: #d98e2a; }
.earthquakes-full-mag--major { background: rgba(224, 82, 107, 0.15); color: #e0526b; }

/* Note: the dashboard card (widget.php) is self-contained with its own
   inline <style> (eqw-* classes) rather than reusing these — see
   gizmos/hotkeys for why widget.php must not depend on this file. */


/* == myip == */
/* ===== What's My IP Gizmo ===== */

.myip-full__box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    margin-bottom: 0.5rem;
}
.myip-full__value { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: var(--accent-primary); flex: 1; word-break: break-all; }
.myip-full__copy-btn {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}
.myip-full__copy-btn:hover { background: var(--accent-secondary); border-color: var(--accent-secondary); }
.myip-full__forwarded { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 1rem; }

.myip-full__info {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.myip-full__info-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.myip-full__info-row:last-child { border-bottom: none; }
.myip-full__info-row:nth-child(odd) { background: var(--bg-secondary); }
.myip-full__info-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.myip-full__info-value { font-size: 0.8125rem; color: var(--text-primary); text-align: right; word-break: break-word; }


/* == texttospeech == */
/* Text to Speech Gizmo Styles */

/* === WIDGET === */
.tts-widget { display: flex; flex-direction: column; gap: 8px; }
.tts-widget__status { min-height: 1rem; font-size: 0.7rem; color: var(--accent-primary); font-weight: 600; text-align: center; }
.tts-widget__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tts-widget__btn { padding: 8px 6px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.tts-widget__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-1px); }
.tts-widget__btn.tts-active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.tts-widget__stop { padding: 6px 8px; border: 1px solid var(--danger); border-radius: 6px; background: transparent; color: var(--danger); font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.tts-widget__stop:hover { background: var(--danger); color: #fff; }
.tts-widget__unsupported { text-align: center; color: var(--text-secondary); font-style: italic; font-size: 0.75rem; padding: 12px 8px; }

/* === FULL === */
.tts-full__unsupported { display: none; background: rgba(220,53,69,0.1); border: 1px solid var(--danger); border-radius: 8px; padding: 12px 16px; color: var(--danger); font-size: 0.85rem; margin-bottom: 16px; }
.tts-full__speak-card, .tts-full__custom-card, .tts-full__settings-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; }
.tts-full__speak-card label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.tts-full__input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tts-full__input-row input[type="text"] { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 0.9rem; box-sizing: border-box; }
.tts-full__input-row input[type="text"]:focus { outline: none; border-color: var(--accent-primary); }
.tts-full__speak-btn { padding: 10px 20px; border: none; border-radius: 6px; background: var(--accent-primary); color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.tts-full__speak-btn:hover { filter: brightness(1.1); }
.tts-full__speak-btn.tts-active { filter: brightness(1.1); box-shadow: 0 0 0 3px rgba(49,130,206,0.25); }
.tts-full__status { min-height: 1.2rem; font-size: 0.8rem; color: var(--accent-primary); font-weight: 600; margin-top: 10px; }
.tts-full__stop { margin-top: 4px; padding: 6px 14px; border: 1px solid var(--danger); border-radius: 6px; background: transparent; color: var(--danger); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.tts-full__stop:hover { background: var(--danger); color: #fff; }

.tts-full__preset-group { margin-bottom: 16px; }
.tts-full__preset-title { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; }
.tts-full__preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tts-full__phrase-btn { padding: 10px 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.tts-full__phrase-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-1px); }
.tts-full__phrase-btn.tts-active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }

.tts-full__custom-add { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tts-full__custom-add input[type="text"] { flex: 1; min-width: 180px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 0.85rem; box-sizing: border-box; }
.tts-full__custom-add input[type="text"]:focus { outline: none; border-color: var(--accent-primary); }
.tts-full__custom-add button { padding: 8px 16px; border: none; border-radius: 6px; background: var(--accent-primary); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.tts-full__custom-add button:hover { filter: brightness(1.1); }
.tts-full__custom-error { color: var(--danger); font-size: 0.75rem; min-height: 1rem; margin-bottom: 8px; }
.tts-full__custom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tts-full__custom-item { position: relative; }
.tts-full__custom-item .tts-full__phrase-btn { width: 100%; padding-right: 22px; box-sizing: border-box; }
.tts-full__custom-delete { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 0.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tts-full__custom-empty { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); font-style: italic; font-size: 0.8rem; padding: 12px; }

.tts-full__settings-card h2, .tts-full__custom-card h2 { font-size: 0.9rem; margin: 0 0 12px; color: var(--text-primary); }
.tts-full__setting { margin-bottom: 14px; }
.tts-full__setting:last-child { margin-bottom: 0; }
.tts-full__setting label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.tts-full__setting select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 0.85rem; box-sizing: border-box; }
.tts-full__setting input[type="range"] { width: 100%; accent-color: var(--accent-primary); }


/* == base64 == */
/* ===== Base64 & URL Encoder Gizmo ===== */

.base64-full__toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
.base64-full__modes { display: flex; gap: 0.4rem; }
.base64-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.base64-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.base64-chip--active { border-color: var(--accent-primary); background: var(--bg-primary); font-weight: 700; color: var(--accent-primary); }
.base64-full__spacer { flex: 1; }
.base64-full__btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.base64-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.base64-full__panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.base64-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.base64-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.base64-pane__label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.base64-pane__copy {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-family: inherit;
    cursor: pointer;
}
.base64-pane__copy:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.base64-pane__text {
    flex: 1;
    height: 340px;
    padding: 0.75rem 0.9rem;
    border: none;
    resize: vertical;
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-card);
}
.base64-pane__text:focus { outline: none; }

.base64-full__status { font-size: 0.8125rem; color: var(--text-secondary); min-height: 1.25rem; margin: 0.6rem 0.25rem 0; }
.base64-full__status--error { color: var(--danger); font-weight: 600; }

@media (max-width: 800px) {
    .base64-full__panes { grid-template-columns: 1fr; }
    .base64-pane__text { height: 240px; }
}


/* == jwtdecode == */
/* ===== JWT Decoder Gizmo ===== */

.jwtdecode-full__warn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--warning);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.jwtdecode-full__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 0.4rem;
}
.jwtdecode-full__input:focus { outline: none; border-color: var(--accent-primary); }

.jwtdecode-full__status { font-size: 0.8125rem; color: var(--text-secondary); min-height: 1.25rem; margin: 0 0.25rem 1rem; font-weight: 600; }
.jwtdecode-full__status--ok { color: var(--success); }
.jwtdecode-full__status--error { color: var(--danger); }

.jwtdecode-full__section { margin-bottom: 1rem; }
.jwtdecode-full__heading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.jwtdecode-full__heading { font-size: 0.9375rem; margin: 0; }
.jwtdecode-btn {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.jwtdecode-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.jwtdecode-full__json {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.jwtdecode-full__claims { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.jwtdecode-claim { display: flex; gap: 0.5rem; font-size: 0.8125rem; }
.jwtdecode-claim__key { flex: 0 0 90px; color: var(--text-secondary); font-weight: 600; }
.jwtdecode-claim__value { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; word-break: break-word; }

.jwtdecode-full__note { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; margin: 0.4rem 0.25rem 0; }


/* == httpstatus == */
/* ===== HTTP Status Codes & Headers Gizmo ===== */

.httpstatus-group { margin-bottom: 0.75rem; break-inside: avoid; }
.httpstatus-group__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0 0 0.35rem;
}
.httpstatus-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}
.httpstatus-row:hover, .httpstatus-row:focus-visible { background: var(--bg-secondary); outline: none; }
.httpstatus-row__code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent-primary);
}
.httpstatus-row__desc { font-size: 0.8125rem; color: var(--text-secondary); }
.httpstatus-empty { font-size: 0.8125rem; color: var(--text-secondary); padding: 0.5rem 0; }

/* Note: the dashboard card (widget.php) is self-contained with its own
   inline <style> rather than reusing these — the combined dashboard CSS
   strips each widget's <link> tag, and widget.php must not depend on this
   file being present (see gizmos/hotkeys for precedent). */

/* === Full page === */
.httpstatus-full__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.httpstatus-full__apps { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; }
.httpstatus-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.httpstatus-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.httpstatus-chip--active { border-color: var(--accent-primary); background: var(--bg-primary); font-weight: 700; color: var(--accent-primary); }
.httpstatus-full__search {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    margin-bottom: 0.5rem;
}
.httpstatus-full__search:focus { outline: none; border-color: var(--accent-primary); }
.httpstatus-full__status { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; min-height: 1rem; }
.httpstatus-full__list { columns: 320px; column-gap: 1.5rem; }

/* === Copy toast === */
.httpstatus-full__toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 100;
    pointer-events: none;
}

@media (max-width: 575px) {
    .httpstatus-full__list { columns: 1; }
}


/* == asciiart == */
/* ===== ASCII Art Text Gizmo ===== */

.asciiart-full__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.6rem;
}
.asciiart-full__input:focus { outline: none; border-color: var(--accent-primary); }

.asciiart-full__fills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; }
.asciiart-fillbtn {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.asciiart-fillbtn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.asciiart-fillbtn--active { border-color: var(--accent-primary); background: var(--accent-primary); color: #fff; }
.asciiart-fillcustom { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--text-secondary); margin-left: 0.4rem; }
.asciiart-fillcustom input {
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
}
.asciiart-fillcustom input:focus { outline: none; border-color: var(--accent-primary); }

.asciiart-full__outwrap { position: relative; margin-bottom: 0.5rem; }
.asciiart-full__out {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    line-height: 1.25;
    overflow-x: auto;
    white-space: pre;
    min-height: 8rem;
}
.asciiart-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.asciiart-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.asciiart-full__note { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0.25rem; }


/* == cssbuttons == */
/* ===== CSS Button Designer Gizmo ===== */

.cssbuttons-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1rem;
    align-items: start;
}

.cssbuttons-stage {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.cssbuttons-stage__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border-radius: 10px;
    background:
        linear-gradient(45deg, rgba(128, 128, 128, 0.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(128, 128, 128, 0.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.12) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.cssbuttons-stage__btn {
    font-family: 'Inter', system-ui, sans-serif;
    border: none;
}

.cssbuttons-stage__actions {
    display: flex;
    gap: 0.5rem;
}

.cssbuttons-controls {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.cssbuttons-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cssbuttons-chips { display: flex; gap: 0.4rem; }

.cssbuttons-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.cssbuttons-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.cssbuttons-chip--active { border-color: var(--accent-primary); background: var(--bg-primary); font-weight: 700; color: var(--accent-primary); }

.cssbuttons-field {
    display: block;
}

.cssbuttons-field > span {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.cssbuttons-field > span b {
    color: var(--accent-primary);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.cssbuttons-field input[type="text"],
.cssbuttons-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
}

.cssbuttons-field input[type="text"]:focus,
.cssbuttons-field select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.cssbuttons-field input[type="range"] {
    width: 100%;
    accent-color: var(--accent-primary);
}

.cssbuttons-field--color input[type="color"] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0;
    background: none;
    cursor: pointer;
}

.cssbuttons-field--color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cssbuttons-field--color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

.cssbuttons-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
}

.cssbuttons-toggle input { accent-color: var(--accent-primary); }

.cssbuttons-full__btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cssbuttons-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.cssbuttons-output {
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.cssbuttons-output__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.cssbuttons-output__label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

.cssbuttons-output__code {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 800px) {
    .cssbuttons-layout { grid-template-columns: 1fr; }
    .cssbuttons-stage { position: static; }
    .cssbuttons-field-row { grid-template-columns: 1fr; }
}


/* == cssgradient == */
/* ===== CSS Gradient Designer Gizmo ===== */

.cssgradient-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1rem;
    align-items: start;
}

.cssgradient-stage {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.cssgradient-stage__preview {
    min-height: 220px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.cssgradient-stage__actions { display: flex; gap: 0.5rem; }

.cssgradient-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
}

.cssgradient-preset {
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.15s;
}

.cssgradient-preset:hover { transform: scale(1.06); border-color: var(--accent-primary); }

.cssgradient-controls {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.cssgradient-field-row { display: flex; }

.cssgradient-chips { display: flex; gap: 0.4rem; }

.cssgradient-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.cssgradient-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.cssgradient-chip--active { border-color: var(--accent-primary); background: var(--bg-primary); font-weight: 700; color: var(--accent-primary); }

.cssgradient-field { display: block; }

.cssgradient-field > span {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.cssgradient-field > span b {
    color: var(--accent-primary);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.cssgradient-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
}

.cssgradient-field input[type="range"] { width: 100%; accent-color: var(--accent-primary); }

.cssgradient-stops {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.cssgradient-stop {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.cssgradient-stop input[type="color"] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    padding: 0;
    background: none;
    cursor: pointer;
}

.cssgradient-stop input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cssgradient-stop input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-color); border-radius: 6px; }

.cssgradient-stop input[type="range"] { accent-color: var(--accent-primary); }

.cssgradient-stop__pos {
    min-width: 34px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cssgradient-stop__remove {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.cssgradient-stop__remove:hover { border-color: var(--danger); color: var(--danger); }
.cssgradient-stop__remove:disabled { opacity: 0.35; cursor: not-allowed; }

.cssgradient-full__btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cssgradient-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.cssgradient-output {
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.cssgradient-output__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.cssgradient-output__label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

.cssgradient-output__code {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 800px) {
    .cssgradient-layout { grid-template-columns: 1fr; }
    .cssgradient-stage { position: static; }
    .cssgradient-presets { grid-template-columns: repeat(6, 1fr); }
}


/* == cssshadow == */
/* ===== CSS Box Shadow Designer Gizmo ===== */

.cssshadow-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1rem;
    align-items: start;
}

.cssshadow-stage {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.cssshadow-stage__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 2rem;
}

.cssshadow-stage__box {
    width: 140px;
    height: 100px;
    border-radius: 12px;
    background: var(--bg-card);
}

.cssshadow-stage__actions { display: flex; gap: 0.5rem; }

.cssshadow-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cssshadow-layers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cssshadow-layer {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.cssshadow-layer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cssshadow-layer__title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cssshadow-layer__head-right { display: flex; align-items: center; gap: 0.75rem; }

.cssshadow-layer__toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
}

.cssshadow-layer__toggle input { accent-color: var(--accent-primary); }

.cssshadow-layer__remove {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.cssshadow-layer__remove:hover { border-color: var(--danger); color: var(--danger); }
.cssshadow-layer__remove:disabled { opacity: 0.35; cursor: not-allowed; }

.cssshadow-layer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.9rem;
    margin-bottom: 0.6rem;
}

.cssshadow-field { display: block; }

.cssshadow-field > span {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.cssshadow-field > span b {
    color: var(--accent-primary);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.cssshadow-field input[type="range"] { width: 100%; accent-color: var(--accent-primary); }

.cssshadow-layer__color-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cssshadow-layer__color-row input[type="color"] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.cssshadow-layer__color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cssshadow-layer__color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

.cssshadow-layer__color-row .cssshadow-field { flex: 1; }

.cssshadow-full__btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cssshadow-full__btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.cssshadow-output {
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.cssshadow-output__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.cssshadow-output__label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

.cssshadow-output__code {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 800px) {
    .cssshadow-layout { grid-template-columns: 1fr; }
    .cssshadow-stage { position: static; }
}