/* ===== Base Styles ===== */
body.klassitahvel-body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    touch-action: manipulation; /* Prevents double-tap zoom on touch devices */
}

/* Isoleeri klassitahvel main saidi teemast — ära päri [data-theme="dark"] muutujaid bodyle */
body.klassitahvel-body {
    --bg-primary: #f4f4f4;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f5f5f5;
    --text-primary: #363636;
    --text-secondary: #4a4a4a;
    --text-muted: #7a7a7a;
    --text-link: #00d1b2;
    --border-color: #dbdbdb;
    --border-light: #ededed;
    --shadow-card: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
    --accent-color: #00d1b2;
    --accent-hover: #00c4a7;
    color: #363636;
    background: #f4f4f4;
}

#app-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    flex-direction: column;

    /* Lähtestatakse teema muutujad — klassitahvel ei päri peamise saidi teemat */
    --bg-primary: #f4f4f4;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f5f5f5;
    --text-primary: #363636;
    --text-secondary: #4a4a4a;
    --text-muted: #7a7a7a;
    --text-link: #00d1b2;
    --border-color: #dbdbdb;
    --border-light: #ededed;
    --shadow-card: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
    --accent-color: #00d1b2;
    --accent-hover: #00c4a7;
}

#app-container.kt-dark {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #1f2940;
    --bg-hover: #2a3a5a;
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-link: #22d3ee;
    --border-color: #3f3f46;
    --border-light: #27272a;
    --shadow-card: 0 0.5em 1em -0.125em rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --accent-color: #22d3ee;
    --accent-hover: #06b6d4;
}

#widget-area {
    flex-grow: 1;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ===== Control Buttons ===== */
/* Legacy control-btn kept for view.php buttons */
.control-btn {
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.control-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* view.php still uses these IDs */
#home-btn { top: 20px; left: 20px; }
#library-btn { top: 20px; left: 80px; background: rgba(72,120,200,0.95); color: white; }
#copy-btn { top: 20px; left: 140px; background: rgba(72,199,142,0.95); color: white; }
#fullscreen-btn { top: 14px; right: 14px; }

/* ===== Control Menu (board.php) ===== */

.control-menu {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.control-menu-trigger {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(240, 240, 245, 0.7);
    color: #555;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.control-menu-trigger:hover {
    transform: scale(1.08);
    background: rgba(240, 240, 245, 0.85);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.control-menu-items {
    position: absolute;
    top: 48px;
    left: 0;
    min-width: 200px;
    max-width: 280px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    padding: 6px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.control-menu-items::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 60px;
    height: 10px;
}

.control-menu:hover .control-menu-items,
.control-menu.open .control-menu-items {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.control-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.12s;
    white-space: nowrap;
    font-family: inherit;
    box-sizing: border-box;
}

.control-menu-item:hover {
    background: rgba(0,0,0,0.06);
    color: #111;
}

.control-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
}

.control-menu-item.danger {
    color: #e53935;
}

.control-menu-item.danger:hover {
    background: rgba(229,57,53,0.08);
    color: #c62828;
}

.control-menu-item.active {
    background: rgba(0, 209, 178, 0.12);
    color: #00897B;
}

.control-menu-item.hidden {
    display: none;
}

.control-menu-separator {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 4px 12px;
}

/* ===== Toolbar ===== */
#toolbar {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    background: rgba(240, 240, 245, 0.7);
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    padding: 6px 12px;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: calc(100vw - 24px);
}

#toolbar.toolbar-minimized {
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    bottom: 0;
}

.toolbar-minimize-btn.tool-btn {
    background: none !important;
    box-shadow: none !important;
    width: 32px;
    min-width: 32px;
    padding: 4px;
    opacity: 0.6;
    flex-shrink: 0;
}
.toolbar-minimize-btn.tool-btn:hover {
    opacity: 1;
    background: none !important;
    transform: none;
}
.toolbar-minimize-btn.tool-btn > i {
    color: rgba(0,0,0,0.3);
}
.toolbar-minimize-btn.tool-btn span {
    display: none;
}

#toolbar-restore-btn {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9100;
    width: 44px;
    height: 24px;
    border: none;
    border-radius: 10px 10px 0 0;
    background: rgba(240,240,245,0.7);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s;
}

#toolbar-restore-btn:hover {
    background: rgba(240,240,245,0.9);
    color: #555;
    height: 30px;
}

#toolbar-restore-btn.hidden {
    display: none;
}

.toolbar-undo-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    align-self: stretch;
}

.undo-redo-btn {
    flex: 1;
    width: 44px;
    border: none;
    background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    color: #888;
    font-size: 13px;
}

.undo-redo-btn:hover {
    background: linear-gradient(145deg, #e9ecef 0%, #dee2e6 100%);
    color: #00d1b2;
}

.toolbar-scroll {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.toolbar-scroll::-webkit-scrollbar {
    height: 6px;
}

.toolbar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.toolbar-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.tool-btn {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
    border-radius: 10px;
    transition: all 0.2s ease;
    width: 52px;
    max-width: 52px;
    flex-shrink: 0;
    gap: 5px;
    position: relative;
}

.tool-btn:hover {
    transform: translateY(-3px);
}

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

.tool-btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.tool-btn:hover .tool-btn-icon {
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transform: scale(1.05);
}

.tool-btn-icon i {
    font-size: 20px;
    color: #fff;
}

.tool-btn > i {
    font-size: 17px;
    color: rgba(0,0,0,0.3);
}

.tool-btn span {
    font-size: 10px;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#toolbar-widgets {
    display: contents;
}

/* ===== More Widgets Panel ===== */
#more-widgets-panel {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1001;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

#more-widgets-panel.hidden {
    display: none;
}

.more-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.more-panel-header h4 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

#more-widgets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 8px;
    flex: 1;
    overflow-y: auto;
}

#more-widgets-grid .tool-btn {
    width: auto;
    max-width: none;
    padding: 6px 2px;
    border-radius: 8px;
}

#more-widgets-grid .tool-btn span {
    color: #555;
    text-shadow: none;
}

.kt-dark #more-widgets-grid .tool-btn span {
    color: #bbb;
}

.more-panel-footer {
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.more-panel-edit-btn {
    width: 100%;
    padding: 10px;
    border: 1px dashed rgba(0,0,0,0.15);
    border-radius: 10px;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    font-family: inherit;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.more-panel-edit-btn:hover {
    border-color: #00d1b2;
    color: #00d1b2;
    background: rgba(0, 209, 178, 0.05);
}

/* ===== Toolbar Editor Modal ===== */
.toolbar-editor-content {
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.toolbar-editor-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}

.toolbar-editor-section {
    margin-bottom: 6px;
}

.toolbar-editor-section:last-child {
    margin-bottom: 0;
}

.toolbar-editor-section h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-editor-section h4 i {
    font-size: 13px;
    color: #00d1b2;
}

.toolbar-editor-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.toolbar-editor-desc {
    font-size: 11px;
    color: #999;
    margin: 0 0 4px;
}

.toolbar-editor-counter {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: #e8f5e9;
    color: #2e7d32;
    transition: background 0.2s, color 0.2s;
}

.toolbar-editor-counter.is-full {
    background: #fff3e0;
    color: #e65100;
}

.toolbar-editor-full-msg {
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff3e0;
    color: #e65100;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.2s ease;
}

.toolbar-editor-full-msg.hidden {
    display: none;
}

.toolbar-editor-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
    color: #ccc;
    font-size: 14px;
}

.toolbar-editor-divider span {
    background: #fff;
    padding: 0 12px;
}

.toolbar-editor-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 60px;
    padding: 8px;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    transition: border-color 0.2s, background 0.2s;
}

.toolbar-editor-zone-main {
    background: rgba(0, 209, 178, 0.03);
    border-color: #b2dfdb;
}

.toolbar-editor-zone-main.is-full {
    border-color: #ffcc80;
    background: rgba(255, 152, 0, 0.03);
}

.toolbar-editor-zone.drag-over {
    border-color: #00d1b2;
    background: rgba(0, 209, 178, 0.05);
}

.toolbar-editor-zone-main.is-full.drag-over {
    border-color: #e65100;
    background: rgba(230, 81, 0, 0.05);
}

.toolbar-editor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 56px;
    padding: 6px 2px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
    cursor: grab;
    transition: box-shadow 0.15s, opacity 0.15s;
    user-select: none;
}

.toolbar-editor-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.toolbar-editor-item.dragging {
    opacity: 0.4;
}

.toolbar-editor-zone.drag-over .toolbar-editor-item:not(.dragging) {
    pointer-events: none;
}

.editor-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00d1b2;
    pointer-events: none;
}

.editor-item-icon i {
    font-size: 16px;
    color: #fff;
    pointer-events: none;
}

.toolbar-editor-item > i {
    font-size: 20px;
    color: #00d1b2;
    pointer-events: none;
}

.toolbar-editor-item span {
    font-size: 9px;
    color: #555;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

.toolbar-editor-ghost {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.85;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transform: scale(1.05);
}

/* ===== Background Panel ===== */
#background-panel {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 320px;
    max-height: 400px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1001;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#background-panel.hidden {
    display: none;
}

.bg-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.bg-panel-header h4 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.close-panel {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.close-panel:hover {
    color: #333;
}

.bg-options {
    padding: 15px 20px;
    max-height: 320px;
    overflow-y: auto;
}

.bg-section {
    margin-bottom: 20px;
}

.bg-section:last-child {
    margin-bottom: 0;
}

.bg-section h5 {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.color-options, .image-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.color-btn, .img-btn {
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-size: cover;
    background-position: center;
}

.color-btn:hover, .img-btn:hover {
    transform: scale(1.1);
    border-color: #00d1b2;
}

#custom-bg-input {
    display: none;
}

.upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #00d1b2;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.upload-btn:hover {
    background: #00b89c;
}

/* ===== Widgets Base ===== */
.widget {
    position: absolute;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    min-width: 220px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease, outline 0.15s ease;
    cursor: default;
}

.widget:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.widget-timer,
.widget-stopwatch,
.widget-clock,
.widget-traffic-light,
.widget-work-symbols,
.widget-random-picker,
.widget-dice,
.widget-noise-meter,
.widget-date,
.widget-counter,
.widget-weather,
.widget-scoreboard,
.widget-ambient,
.widget-group-maker,
.widget-quick-poll,
.widget-mood-meter,
.widget-timetable {
    user-select: none;
    -webkit-user-select: none;
}

/* ===== Widget Selected State ===== */
.widget-selected {
    outline: 3px solid #4facfe;
    outline-offset: -1px;
    box-shadow: 0 0 0 6px rgba(79, 172, 254, 0.2), 0 8px 32px rgba(0,0,0,0.15);
    overflow: visible;
}

.widget.locked .resize-handle {
    display: none !important;
}

/* ===== Resize Handles (corners) ===== */
.resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2.5px solid #4facfe;
    border-radius: 50%;
    z-index: 10;
    display: none;
    pointer-events: auto;
}
.widget-selected:not(.multi-selected) .resize-handle { display: block; }

.multi-selected .widget-content {
    pointer-events: none;
}
.resize-handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
.resize-handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
.resize-handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.resize-handle-se { bottom: -6px; right: -6px; cursor: se-resize; }

/* Edge resize handles (drawing widgets only) */
.resize-handle-edge {
    border-radius: 3px;
    background: #fff;
    border: 2.5px solid #4facfe;
    width: 18px;
    height: 10px;
}
.resize-handle-n, .resize-handle-s {
    left: 50%;
    transform: translateX(-50%);
}
.resize-handle-n { top: -5px; cursor: n-resize; }
.resize-handle-s { bottom: -5px; cursor: s-resize; }
.resize-handle-e, .resize-handle-w {
    width: 10px;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
}
.resize-handle-w { left: -5px; cursor: w-resize; }
.resize-handle-e { right: -5px; cursor: e-resize; }

/* ===== Rotation Handles (text widget) ===== */
.rotate-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 9;
    display: none;
    pointer-events: auto;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z' fill='none'/%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0012 4V2l-4 4 4 4V6a6 6 0 11-6 6H4a8 8 0 108-8' fill='%23333'/%3E%3C/svg%3E") 12 12, crosshair;
}
.widget-selected:not(.multi-selected) .rotate-handle { display: block; }
.rotate-handle-nw { top: -20px; left: -20px; }
.rotate-handle-ne { top: -20px; right: -20px; }
.rotate-handle-sw { bottom: -20px; left: -20px; }
.rotate-handle-se { bottom: -20px; right: -20px; }
.widget.rotating { opacity: 0.92; }

/* ===== Marquee Selection ===== */
.marquee-selection {
    position: absolute;
    border: 2px solid #4facfe;
    background: rgba(79, 172, 254, 0.1);
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
}

/* ===== Drag Visual Feedback ===== */
.widget.dragging {
    opacity: 0.85;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3) !important;
    transition: none !important;
    cursor: grabbing;
}

.widget-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    border-radius: 10px;
}

/* ===== Floating Toolbar ===== */
.widget-floating-toolbar {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(240, 240, 245, 0.8);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 4px 6px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 10000;
    animation: ftAppear 0.15s ease;
    max-width: calc(100vw - 20px);
    overflow: visible;
}

@keyframes ftAppear {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ft-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}

.ft-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #333;
}

.ft-btn.ft-delete:hover {
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
}

/* ===== Context Menu ===== */
.widget-context-menu {
    position: absolute;
    min-width: 220px;
    background: rgba(240, 240, 245, 0.9);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 10001;
    animation: ctxAppear 0.12s ease;
}

@keyframes ctxAppear {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
    font-family: inherit;
    box-sizing: border-box;
}

.ctx-item:hover {
    background: rgba(0,0,0,0.06);
    color: #111;
}

.ctx-item i {
    width: 18px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}

.ctx-item span {
    flex: 1;
}

.ctx-item kbd {
    font-size: 11px;
    color: #999;
    font-family: inherit;
    background: rgba(0,0,0,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

.ctx-item.ctx-remove:hover {
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
}

.ctx-separator {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 4px 12px;
}

/* ===== Minimized Widgets ===== */
#minimized-tray {
    display: none;
}

/* Badge on Vidinad button */
#widget-manager-btn {
    position: relative;
}

.minimized-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: #ff3860;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
}

.minimized-badge.hidden {
    display: none !important;
}

/* Minimized section inside widget manager */
.manager-minimized-section {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 8px 12px 12px;
    flex: 0 1 auto;
    max-height: 35vh;
    overflow-y: auto;
}

.manager-minimized-section.hidden {
    display: none;
}

.manager-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    padding: 4px 8px 8px;
}

.manager-section-label i {
    margin-right: 4px;
}

.manager-minimized-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.manager-minimized-item:hover {
    background: rgba(0, 209, 178, 0.08);
}

.manager-minimized-item span {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.manager-minimized-item .widget-action-btn {
    opacity: 0.4;
    transition: opacity 0.15s;
    color: #999;
}

.manager-minimized-item:hover .widget-action-btn {
    opacity: 1;
}

.manager-minimized-item .widget-action-btn:hover {
    color: #e53935;
    background: rgba(229,57,53,0.1);
}

.kt-dark .manager-minimized-section {
    border-color: #333;
}

.kt-dark .manager-section-label {
    color: #666;
}

.kt-dark .manager-minimized-item:hover {
    background: rgba(0, 209, 178, 0.12);
}

.kt-dark .manager-minimized-item i {
    color: #22d3ee;
}

.kt-dark .manager-minimized-item span {
    color: #ccc;
}

.kt-dark .manager-minimized-item .chip-info {
    color: #666;
}

/* More panel — action buttons row */
.more-panel-actions {
    padding: 10px 12px 4px;
    display: flex;
    gap: 8px;
}

.more-panel-action-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}

.more-panel-action-btn:hover {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
}

.more-panel-action-btn i {
    color: #00d1b2;
}

.kt-dark .more-panel-action-btn {
    background: #2d2d3d;
    border-color: #3d3d4d;
    color: #ccc;
}

.kt-dark .more-panel-action-btn:hover {
    background: #3d3d4d;
}

.kt-dark .more-panel-action-btn i {
    color: #22d3ee;
}

/* ===== Settings Panel ===== */
#widget-settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    animation: settingsSlideIn 0.25s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#widget-settings-panel.hidden {
    display: none;
}

@keyframes settingsSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: rgba(255, 255, 255, 0.4);
}

.settings-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.settings-panel-icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-panel-icon-badge i {
    font-size: 14px;
    color: #fff;
}

.settings-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.settings-group {
    margin-bottom: 20px;
}

.settings-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.settings-empty {
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 40px 20px;
}

.settings-font-size {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-font-display {
    font-weight: 600;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
}

.settings-btn {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    font-family: inherit;
}

.settings-btn:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.settings-btn.active {
    background: #00d1b2;
    color: white;
    border-color: #00d1b2;
}

.settings-btn-danger {
    color: #ff4444;
    border-color: #ffcccc;
}

.settings-btn-danger:hover {
    background: #fff0f0;
}

.settings-tag-btn {
    padding: 3px 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
    font-family: inherit;
    color: #555;
}

.settings-tag-btn:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

.settings-tag-btn.active {
    background: #00d1b2;
    color: white;
    border-color: #00d1b2;
}

.settings-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: white;
}

.settings-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: white;
}

.settings-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: white;
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
    box-sizing: border-box;
}
.settings-textarea:focus {
    outline: none;
    border-color: #00d1b2;
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.1);
}

.settings-range {
    width: 100%;
    margin-top: 4px;
}

.settings-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-toggle-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #333 !important;
}

.settings-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--widget-accent, #00d1b2);
}

.settings-color {
    width: 48px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
}

/* ===== Text Widget ===== */
.widget-text {
    min-width: 100px;
    min-height: 50px;
}

.widget-text .widget-content {
    justify-content: flex-start;
    align-items: stretch;
}

.text-editor {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 20px;
    line-height: 1.5;
    padding: 4px 2px;
    overflow-y: auto;
    color: #000;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.text-editor:empty::before {
    content: attr(data-placeholder);
    color: currentColor;
    opacity: 0.4;
    pointer-events: none;
}

.text-editor ul, .text-editor ol {
    margin-left: 0;
    padding-left: 1.5em;
    list-style-position: outside;
}

.text-editor ul { list-style-type: disc; }
.text-editor ol { list-style-type: decimal; }

/* Text widget icon header */
.text-icon-header {
    text-align: center;
    padding: 8px 4px 0;
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

/* Text widget animations */
.widget.text-anim-pulse {
    animation: textPulse 1.5s ease-in-out infinite !important;
}
@keyframes textPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.97); }
}
.widget.text-anim-bounce {
    animation: textBounce 1.5s ease-in-out infinite !important;
}
@keyframes textBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.widget.text-anim-flash {
    animation: textFlash 2s ease-in-out infinite !important;
}
@keyframes textFlash {
    0%, 100% { opacity: 1; }
    35% { opacity: 1; }
    42% { opacity: 0.15; }
    50% { opacity: 1; }
    57% { opacity: 0.15; }
    65% { opacity: 1; }
}

/* Spotlight: animations must preserve translate(-50%,-50%) centering */
.widget-spotlight.text-anim-pulse {
    animation: textPulseSpotlight 1.5s ease-in-out infinite !important;
}
@keyframes textPulseSpotlight {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.97); }
}
.widget-spotlight.text-anim-bounce {
    animation: textBounceSpotlight 1.5s ease-in-out infinite !important;
}
@keyframes textBounceSpotlight {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 12px)); }
}
.widget-spotlight.text-anim-flash {
    animation: textFlashSpotlight 2s ease-in-out infinite !important;
}
@keyframes textFlashSpotlight {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%); }
    35% { opacity: 1; transform: translate(-50%, -50%); }
    42% { opacity: 0.15; transform: translate(-50%, -50%); }
    50% { opacity: 1; transform: translate(-50%, -50%); }
    57% { opacity: 0.15; transform: translate(-50%, -50%); }
    65% { opacity: 1; transform: translate(-50%, -50%); }
}

/* Text icon & animation settings */
.settings-text-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-text-icon-dropdown {
    flex: 1;
    position: relative;
}
.settings-text-icon-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.settings-text-icon-trigger i:first-child {
    font-size: 16px;
}
.settings-text-icon-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    flex-wrap: wrap;
    gap: 4px;
}
.settings-text-icon-menu.is-open {
    display: flex;
}
.settings-text-icon-opt {
    width: 34px;
    height: 34px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #555;
    transition: all 0.12s;
}
.settings-text-icon-opt:hover { background: #f0f0f0; }
.settings-text-icon-opt.active { border-color: #00d1b2; background: #00d1b2; color: #fff; }
.kt-dark .settings-text-icon-menu { background: #2d2d2d; border-color: #444; }
.kt-dark .settings-text-icon-opt { color: #ccc; }
.kt-dark .settings-text-icon-opt:hover { background: #3a3a3a; }

/* Text toolbar additions to floating toolbar */
.ft-separator {
    width: 1px;
    align-self: stretch;
    background: rgba(0,0,0,0.08);
    margin: 4px 3px;
}

.ft-btn.active {
    background: rgba(0, 209, 178, 0.15);
    color: #00897B;
}

.ft-align-wrapper {
    position: relative;
}

.ft-align-dropdown {
    display: none;
    position: absolute;
    background: rgba(240, 240, 245, 0.9);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 10001;
    flex-direction: row;
    gap: 2px;
}

.ft-align-dropdown.open { display: flex; }

.ft-align-dropdown .ft-btn.active {
    background: rgba(0, 209, 178, 0.15);
    color: #00897B;
}

.ft-font-family-wrapper {
    position: relative;
}

.ft-font-family {
    color: #555;
    font-size: 12px;
    font-weight: 500;
    height: 34px;
    padding: 0 8px;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}

.ft-font-family:hover {
    background: rgba(0,0,0,0.06);
    color: #333;
}

.ft-font-family-dropdown {
    display: none;
    position: absolute;
    background: rgba(240, 240, 245, 0.9);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 10001;
    min-width: 140px;
}

.ft-font-family-dropdown.open { display: flex; flex-direction: column; }

.ft-font-family-dropdown button {
    background: none;
    border: none;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    white-space: nowrap;
}

.ft-font-family-dropdown button:hover {
    background: rgba(0,0,0,0.06);
    color: #333;
}

.ft-font-size-wrapper {
    position: relative;
}

.ft-font-size {
    color: rgba(30,30,46,0.8);
    font-size: 14px;
    font-weight: 700;
    min-width: 32px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 0 6px;
    transition: all 0.15s;
}

.ft-font-size:hover {
    background: rgba(255,255,255,0.15);
}

.ft-font-size-dropdown {
    display: none;
    position: absolute;
    background: rgba(240, 240, 245, 0.9);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 10001;
    min-width: 52px;
}

.ft-font-size-dropdown.open { display: flex; flex-direction: column; }

.ft-font-size-dropdown button {
    background: none;
    border: none;
    color: rgba(30,30,46,0.8);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
}

.ft-font-size-dropdown button:hover {
    background: rgba(0,0,0,0.08);
    color: rgba(30,30,46,0.95);
}

.ft-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    display: inline-block;
}

.ft-color-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ===== Timer Widget ===== */
.widget-timer {
    min-width: 310px;
}

.widget-timer .widget-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.timer-digits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.timer-digit-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.timer-digit {
    font-size: 56px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333;
    line-height: 1;
    min-width: 44px;
    text-align: center;
}

.timer-colon {
    font-size: 56px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333;
    line-height: 1;
    padding: 0 2px;
    align-self: center;
}

.timer-digit-btn {
    width: 32px;
    height: 24px;
    border: none;
    background: transparent;
    color: #555;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}

.timer-digit-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.widget-timer.timer-running .timer-digit-btn {
    visibility: hidden;
}

.widget-timer.timer-running.widget-selected .timer-digit-btn {
    visibility: visible;
}

.widget-timer.alarm .timer-digit {
    animation: timerAlarm 0.5s ease-in-out infinite;
    color: #ff4444;
}

.widget-timer.alarm .timer-colon {
    color: #ff4444;
}

@keyframes timerAlarm {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.timer-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timer-controls button {
    padding: 8px 14px;
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.timer-controls button:hover {
    background: var(--widget-accent, #00d1b2);
    color: white;
    border-color: var(--widget-accent, #00d1b2);
}

.timer-play {
    background: var(--widget-accent, #00d1b2) !important;
    color: white !important;
    border-color: var(--widget-accent, #00d1b2) !important;
}

.timer-play:hover {
    filter: brightness(0.9);
}

.timer-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ===== Taimeri visuaalsed stiilid ===== */
.timer-visual { display: none; }

.settings-timer-styles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.settings-timer-style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    color: #555;
    transition: all 0.15s;
}
.settings-timer-style-btn i {
    font-size: 18px;
    color: #666;
}
.settings-timer-style-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}
.settings-timer-style-btn.active {
    background: #e0f7f4;
    border-color: #00d1b2;
    color: #00796b;
}
.settings-timer-style-btn.active i { color: #00d1b2; }

/* --- Ring-stiil --- */
.widget-timer[data-timer-style="ring"] .widget-content {
    position: relative;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.widget-timer[data-timer-style="ring"] .timer-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    max-height: 100%;
    max-width: 100%;
}
.widget-timer[data-timer-style="ring"] .timer-visual svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.widget-timer[data-timer-style="ring"] .timer-visual .ring-bg {
    stroke: #e5e7eb;
}
.widget-timer[data-timer-style="ring"] .timer-visual .ring-progress {
    stroke: var(--timer-progress-color, #22c55e);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.widget-timer[data-timer-style="ring"] .timer-digits {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 0;
}
.widget-timer[data-timer-style="ring"] .timer-digit {
    font-size: 40px;
    min-width: 28px;
}
.widget-timer[data-timer-style="ring"] .timer-colon {
    font-size: 40px;
}
.widget-timer[data-timer-style="ring"] .timer-digit-btn {
    height: 16px;
    width: 22px;
    font-size: 9px;
}
.widget-timer[data-timer-style="ring"] .timer-controls {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 6px;
    z-index: 2;
}
.widget-timer[data-timer-style="ring"] .timer-controls button {
    padding: 5px 10px;
    font-size: 12px;
}

/* --- Liivakell-stiil --- */
.widget-timer[data-timer-style="hourglass"] .widget-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    flex-wrap: nowrap;
}
.widget-timer[data-timer-style="hourglass"] .timer-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 80 / 130;
    max-height: 100%;
}
.widget-timer[data-timer-style="hourglass"] .timer-visual svg {
    width: 100%;
    height: 100%;
}
.widget-timer[data-timer-style="hourglass"] .timer-digits {
    flex-shrink: 0;
    gap: 0;
    margin-top: 2px;
}
.widget-timer[data-timer-style="hourglass"] .timer-digit {
    font-size: 26px;
    min-width: 20px;
}
.widget-timer[data-timer-style="hourglass"] .timer-colon {
    font-size: 26px;
    padding: 0;
}
.widget-timer[data-timer-style="hourglass"] .timer-digit-btn {
    height: 13px;
    width: 20px;
    font-size: 8px;
}
.widget-timer[data-timer-style="hourglass"] .timer-controls {
    flex-direction: row;
    gap: 4px;
    flex-shrink: 0;
}
.widget-timer[data-timer-style="hourglass"] .timer-controls button {
    padding: 3px 9px;
    font-size: 11px;
}
.widget-timer[data-timer-style="hourglass"] .hg-frame {
    fill: none;
    stroke: #1e293b;
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-opacity: 0.55;
}
.widget-timer[data-timer-style="hourglass"] .hg-shadow {
    fill: rgba(0, 0, 0, 0.18);
    filter: blur(1px);
}
.widget-timer[data-timer-style="hourglass"] .hg-sand-top,
.widget-timer[data-timer-style="hourglass"] .hg-sand-bottom {
    transition: y 1s linear, height 1s linear;
}
.widget-timer[data-timer-style="hourglass"] .hg-grain {
    fill: #92400e;
    opacity: 0;
}
.widget-timer.timer-running[data-timer-style="hourglass"] .hg-grain-1 { animation: hgGrainFall 0.75s linear infinite; }
.widget-timer.timer-running[data-timer-style="hourglass"] .hg-grain-2 { animation: hgGrainFall 0.75s linear infinite 0.15s; }
.widget-timer.timer-running[data-timer-style="hourglass"] .hg-grain-3 { animation: hgGrainFall 0.75s linear infinite 0.30s; }
.widget-timer.timer-running[data-timer-style="hourglass"] .hg-grain-4 { animation: hgGrainFall 0.75s linear infinite 0.45s; }
.widget-timer.timer-running[data-timer-style="hourglass"] .hg-grain-5 { animation: hgGrainFall 0.75s linear infinite 0.60s; }
@keyframes hgGrainFall {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(42px); opacity: 0; }
}

/* Ümberpööramine — klikitav kui taimeri aeg läbi */
.widget-timer[data-timer-style="hourglass"].alarm .timer-visual {
    cursor: pointer;
    animation: hgPulse 1.2s ease-in-out infinite;
}
.widget-timer[data-timer-style="hourglass"] .timer-visual.hg-flipping {
    animation: hgFlip 0.7s ease-in-out forwards;
    cursor: default;
}
@keyframes hgFlip {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}
@keyframes hgPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* --- Riba-stiil --- */
.widget-timer[data-timer-style="bar"] .widget-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 18px;
}
.widget-timer[data-timer-style="bar"] .timer-digits {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    gap: 2px;
}
.widget-timer[data-timer-style="bar"] .widget-content > .timer-controls {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    gap: 6px;
    flex-shrink: 0;
}
.widget-timer[data-timer-style="bar"] .timer-visual {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    width: 100%;
    height: 18px;
    background: #e5e7eb;
    border-radius: 0;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.widget-timer[data-timer-style="bar"] .bar-fill {
    height: 100%;
    background: var(--timer-progress-color, #22c55e);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 60%);
    border-radius: 0;
    transition: width 1s linear, background-color 0.3s;
    width: 100%;
}
.widget-timer[data-timer-style="bar"] .timer-digit {
    font-size: 44px;
    min-width: 34px;
}
.widget-timer[data-timer-style="bar"] .timer-colon {
    font-size: 44px;
}
.widget-timer[data-timer-style="bar"] .timer-digit-group {
    position: relative;
}
.widget-timer[data-timer-style="bar"] .timer-digit-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 14px;
    width: 22px;
    font-size: 9px;
}
.widget-timer[data-timer-style="bar"] .timer-digit-btn.timer-up {
    top: -16px;
}
.widget-timer[data-timer-style="bar"] .timer-digit-btn.timer-down {
    bottom: -16px;
}
.widget-timer[data-timer-style="bar"] .timer-controls button {
    padding: 6px 12px;
    font-size: 13px;
}

.timer-presets button {
    padding: 8px 14px;
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.timer-presets button:hover {
    background: var(--widget-accent, #00d1b2);
    color: white;
    border-color: #00d1b2;
}

/* ===== Stopwatch Widget ===== */
.widget-stopwatch {
    min-width: 300px;
}

.widget-stopwatch .widget-content {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.stopwatch-display {
    font-size: 56px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333;
}

.stopwatch-ms {
    font-size: 0.55em;
}

.stopwatch-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stopwatch-controls button {
    padding: 8px 14px;
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.stopwatch-controls button:hover {
    background: var(--widget-accent, #00d1b2);
    color: white;
    border-color: var(--widget-accent, #00d1b2);
}

.stopwatch-play {
    background: var(--widget-accent, #00d1b2) !important;
    color: white !important;
    border-color: var(--widget-accent, #00d1b2) !important;
}

.widget-stopwatch.alarm .stopwatch-display {
    animation: timerAlarm 0.5s ease-in-out infinite;
    color: #ff4444;
}

/* ===== Clock Widget ===== */
.widget-clock {
    min-width: 120px;
    min-height: 80px;
}

.widget-clock .widget-content {
    padding: 2px 8px;
    overflow: visible;
}

.widget-clock.no-bg {
    background: transparent !important;
    box-shadow: none !important;
}
.widget-clock.no-bg:hover {
    box-shadow: none !important;
}

.clock-display {
    font-size: 56px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333;
}

.clock-date {
    font-size: 16px;
    color: #888;
    margin-top: 8px;
    text-align: center;
}

/* ===== Traffic Light Widget ===== */
.widget-traffic-light {
    min-width: 100px;
    min-height: 260px;
    background: transparent !important;
    box-shadow: none !important;
}

.traffic-light-content {
    background-color: #2d3436;
    padding: 15px !important;
    border-radius: 10px;
    gap: 12px;
}

.light {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid #1a1a1a;
    flex-shrink: 0;
}

.light:hover {
    transform: scale(1.05);
}

.light.red.active { 
    background-color: #ff4444; 
    box-shadow: 0 0 30px #ff4444, 0 0 60px rgba(255, 68, 68, 0.5); 
}
.light.yellow.active { 
    background-color: #ffbb33; 
    box-shadow: 0 0 30px #ffbb33, 0 0 60px rgba(255, 187, 51, 0.5); 
}
.light.green.active { 
    background-color: #00C851; 
    box-shadow: 0 0 30px #00C851, 0 0 60px rgba(0, 200, 81, 0.5); 
}

/* ===== Work Symbols Widget ===== */
.widget-work-symbols {
    min-width: 190px;
    min-height: 190px;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.widget-work-symbols:hover {
    box-shadow: none !important;
}

.work-symbols-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    gap: 4px;
}

.ws-display {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-display-icon {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.ws-display-icon i {
    font-size: 52px;
    color: #2d3436;
}

.ws-display-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.ws-selector {
    display: flex;
    gap: 3px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.widget-work-symbols.widget-selected .ws-selector,
.widget-work-symbols.widget-spotlight .ws-selector {
    opacity: 1;
    pointer-events: auto;
}

.ws-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ws-btn i {
    font-size: 13px;
    color: #666;
}

.ws-btn:hover {
    border-color: #00d1b2;
    background: #f0fffe;
}

.ws-btn.active {
    border-color: #00d1b2;
    background: #00d1b2;
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.2);
}

.ws-btn.active i {
    color: #fff;
}

/* Work Symbols Settings */
.ws-mode-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    height: 32px;
}
.ws-mode-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #ddd);
    background: var(--bg-card, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s;
}
.ws-mode-icon-btn:hover {
    border-color: #00d1b2;
}
.ws-mode-icon-btn i {
    font-size: 14px;
    color: var(--text-primary, #333);
}
.ws-mode-label-input {
    flex: 1;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #333);
    font-size: 13px;
    min-width: 0;
    box-sizing: border-box;
}
.ws-mode-enabled {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--widget-accent, #00d1b2);
}
.ws-mode-enabled:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.ws-icon-picker {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    background: var(--bg-secondary, #f5f5f5);
}
.ws-icon-picker label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    margin-bottom: 6px;
    display: block;
}
.ws-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ws-icon-option {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #ddd);
    background: var(--bg-card, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ws-icon-option:hover {
    border-color: #00d1b2;
    background: rgba(0, 209, 178, 0.05);
}
.ws-icon-option.active {
    border-color: #00d1b2;
    background: #00d1b2;
}
.ws-icon-option.active i {
    color: #fff;
}
.ws-icon-option i {
    font-size: 14px;
    color: var(--text-primary, #333);
}
.ws-modes-list {
    max-height: 240px;
    overflow-y: auto;
}

/* ===== Random Picker Widget ===== */
.widget-random-picker {
    min-width: 280px;
    min-height: 200px;
}

.widget-random-picker.picker-canvas-mode {
    background: transparent !important;
    box-shadow: none;
}

.picker-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px !important;
    height: 100%;
}

.picker-display {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.picker-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.picker-result {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 800;
    color: #2d3436;
    text-align: center;
    line-height: 1.1;
    word-break: break-word;
    padding: 0 10px;
}

.kt-dark .picker-result {
    color: #f0f0f0;
}

.picker-result i {
    color: #ccc;
    font-size: 36px;
}

.kt-dark .picker-result i {
    color: #555;
}

.picker-result.animating {
    animation: pickerSpin 0.08s linear infinite;
}

@keyframes pickerSpin {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-3px); opacity: 0.6; }
    100% { transform: translateY(0); opacity: 1; }
}

.picker-result.picker-revealed {
    animation: pickerReveal 0.4s ease-out;
}

@keyframes pickerReveal {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.picker-count {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
}

.picker-btn {
    padding: 10px 28px;
    background: var(--widget-accent, #00d1b2);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.picker-btn-hidden .picker-btn {
    display: none;
}


.picker-btn-hidden .picker-count {
    margin-bottom: 8px;
}

.picker-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 209, 178, 0.4);
}

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

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

/* Picker settings styles */
.settings-picker-names {
    width: 100%;
    min-height: 120px;
    max-height: 250px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    background: white;
}

.kt-dark .settings-picker-names {
    background: #2a2a3a;
    border-color: #444;
    color: #e0e0e0;
}

.settings-picker-names:focus {
    outline: none;
    border-color: #00d1b2;
}

.settings-picker-history {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
    padding: 8px;
    background: #f8f8f8;
    border-radius: 8px;
    border: 1px solid #eee;
}

.kt-dark .settings-picker-history {
    background: #1e1e2e;
    border-color: #333;
}

.picker-history-tag {
    font-size: 11px;
    padding: 2px 8px;
    background: #e8f5e9;
    border-radius: 10px;
    color: #2e7d32;
    white-space: nowrap;
}

.kt-dark .picker-history-tag {
    background: #1b3a1b;
    color: #66bb6a;
}

.kt-dark .picker-history-item {
    background: #333;
    color: #aaa;
}

/* ===== Dice Widget ===== */
.widget-dice {
    min-width: 240px;
}

.widget-dice.no-bg {
    background: transparent;
    box-shadow: none;
}

.widget-dice.no-bg .widget-content {
    background: transparent;
}

.dice-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    padding: 8px 0;
}

.dice {
    cursor: pointer;
    transition: transform 0.15s ease;
    position: relative;
}

.dice:hover {
    transform: scale(1.08);
}

.dice.rolling .die-shape {
    animation: diceShapeRoll 0.6s ease-out;
}

@keyframes diceShapeRoll {
    0% { transform: scale(0.5) rotate(0deg); opacity: 0.5; }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* Die shapes — taring sarnased kujundid */
.die-shape {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 28px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.die-shape .die-number {
    display: inline-block;
    opacity: 0;
    transform: scale(0);
}

.die-shape .die-number.show {
    animation: diceNumberPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes diceNumberPop {
    0% { opacity: 0; transform: scale(0); }
    70% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

.die-shape.d4 {
    width: 70px; height: 61px;
    background: #4CAF50;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    padding-top: 20px;
    align-items: flex-start;
}

.die-shape.d6 {
    width: 66px; height: 66px;
    background: #00BCD4;
    border-radius: 12px;
}

.die-shape.d8 {
    width: 70px; height: 70px;
    background: #9C27B0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.die-shape.d10 {
    width: 60px; height: 74px;
    background: #E91E63;
    clip-path: polygon(50% 0%, 100% 35%, 100% 70%, 50% 100%, 0% 70%, 0% 35%);
}

.die-shape.d12 {
    width: 74px; height: 74px;
    background: #F44336;
    clip-path: polygon(50% 0%, 79% 10%, 98% 35%, 98% 65%, 79% 90%, 50% 100%, 21% 90%, 2% 65%, 2% 35%, 21% 10%);
}

.die-shape.d20 {
    width: 76px; height: 84px;
    background: #FF9800;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* Roll area */
.dice-roll-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.dice-roll-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--widget-accent, #00d1b2);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.dice-roll-btn:hover {
    filter: brightness(0.9);
    transform: scale(1.1);
}

.dice-roll-btn:active {
    transform: scale(0.95);
}

.dice-roll-btn.rolling i {
    animation: diceSpinBtn 0.5s linear infinite;
}

@keyframes diceSpinBtn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dice-total {
    font-size: 16px;
    font-weight: 600;
    color: #555;
}

.dice-total span {
    color: var(--widget-accent, #00d1b2);
    font-size: 20px;
}

/* Dice history in settings */
.dice-history-list {
    max-height: 200px;
    overflow-y: auto;
}

.dice-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13px;
}

.dice-history-item .dh-dice {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}

.dice-history-item .dh-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    font-size: 10px;
}

.dh-die.d4 { background: #4CAF50; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); padding-top: 4px; height: 19px; }
.dh-die.d6 { background: #00BCD4; }
.dh-die.d8 { background: #9C27B0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.dh-die.d10 { background: #E91E63; clip-path: polygon(50% 0%, 100% 35%, 100% 70%, 50% 100%, 0% 70%, 0% 35%); }
.dh-die.d12 { background: #F44336; clip-path: polygon(50% 0%, 79% 10%, 98% 35%, 98% 65%, 79% 90%, 50% 100%, 21% 90%, 2% 65%, 2% 35%, 21% 10%); }
.dh-die.d20 { background: #FF9800; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }

.dice-history-item .dh-sum {
    font-weight: bold;
    color: #333;
    margin-left: 8px;
    white-space: nowrap;
}

.dice-history-item .dh-time {
    color: #999;
    font-size: 11px;
    margin-left: 8px;
}

/* Dice type selector in settings */
.dice-type-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.dice-type-btn {
    width: 36px;
    height: 36px;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    color: white;
    font-weight: bold;
    font-size: 11px;
    background: #ccc;
}

.dice-type-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.dice-type-btn.active {
    border-color: #00d1b2;
    box-shadow: 0 0 0 2px rgba(0,209,178,0.3);
}

.dice-type-btn.dt-d4 { background: #4CAF50; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border: none; padding-top: 8px; }
.dice-type-btn.dt-d6 { background: #00BCD4; border-radius: 6px; clip-path: none; }
.dice-type-btn.dt-d8 { background: #9C27B0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border: none; }
.dice-type-btn.dt-d10 { background: #E91E63; clip-path: polygon(50% 0%, 100% 35%, 100% 70%, 50% 100%, 0% 70%, 0% 35%); border: none; }
.dice-type-btn.dt-d12 { background: #F44336; clip-path: polygon(50% 0%, 79% 10%, 98% 35%, 98% 65%, 79% 90%, 50% 100%, 21% 90%, 2% 65%, 2% 35%, 21% 10%); border: none; }
.dice-type-btn.dt-d20 { background: #FF9800; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); border: none; }

/* ===== Drawing Widget (SVG Vector) ===== */
.widget-drawing {
    min-width: 100px;
    min-height: 80px;
}

.drawing-content {
    padding: 6px !important;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100%;
}

.drawing-svg {
    width: 100%;
    height: 100%;
    flex: 1;
    border-radius: 8px;
    background: white;
    cursor: default;
    touch-action: none;
    display: block;
}

.drawing-svg[data-bg="grid"] {
    background-image:
        linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: white;
}

.drawing-svg[data-bg="dots"] {
    background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: white;
}

.drawing-svg[data-bg="lines"] {
    background-image: linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: white;
}

.drawing-svg[data-bg="squares"] {
    background-image:
        linear-gradient(rgba(0,0,0,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.12) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: white;
}

.drawing-svg[data-bg="hex"] {
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='0.08'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.drawing-object {
    pointer-events: stroke;
}

.drawing-object:hover {
    filter: brightness(0.85);
}

/* Drawing toolbar additions */
.ft-draw-color { position: relative; }
.ft-draw-color-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ft-draw-size-wrapper {
    position: relative;
}

.ft-draw-size-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 46, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 10001;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    margin-top: 4px;
}

.ft-draw-size-dropdown.open {
    display: flex;
}

.ft-draw-size-range {
    width: 110px;
    accent-color: #4facfe;
}

.ft-draw-size-val {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    white-space: nowrap;
}

.ft-btn.ft-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Drawing settings background pattern previews */
.settings-bg-patterns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.settings-bg-btn {
    width: 100%;
    aspect-ratio: 1.4;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: all 0.15s;
}

.settings-bg-btn:hover {
    border-color: #4facfe;
}

.settings-bg-btn.active {
    border-color: #4facfe;
    box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.3);
}

.bg-preview {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.bg-preview-none { background: white; }

.bg-preview-grid {
    background-image:
        linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 8px 8px;
    background-color: white;
}

.bg-preview-dots {
    background-image: radial-gradient(circle, rgba(0,0,0,0.2) 1px, transparent 1px);
    background-size: 8px 8px;
    background-color: white;
}

.bg-preview-lines {
    background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 8px 8px;
    background-color: white;
}

.bg-preview-squares {
    background-image:
        linear-gradient(rgba(0,0,0,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.15) 1px, transparent 1px);
    background-size: 16px 16px;
    background-color: white;
}

.bg-preview-hex {
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='0.1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.kt-dark .drawing-svg { background-color: #2a2a3e; }
.kt-dark .drawing-svg[data-bg="grid"] {
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .drawing-svg[data-bg="dots"] {
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .drawing-svg[data-bg="lines"] {
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .drawing-svg[data-bg="squares"] {
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .drawing-svg[data-bg="hex"] {
    background-color: #2a2a3e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='0.06'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.kt-dark .settings-bg-btn { background: #2a2a3e; border-color: #444; }
.kt-dark .bg-preview-none { background: #2a2a3e; }
.kt-dark .bg-preview-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .bg-preview-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .bg-preview-lines {
    background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .bg-preview-squares {
    background-image:
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-color: #2a2a3e;
}
.kt-dark .bg-preview-hex {
    background-color: #2a2a3e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='0.08'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Noise Meter Widget ===== */
.widget-noise-meter {
    min-width: 250px;
}
.widget-noise-meter .widget-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 8px;
}
.noise-gauge-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.noise-bar-track {
    width: 100%;
    height: 28px;
    background: linear-gradient(to right, #dcfce7 70%, #fee2e2 70%);
    overflow: hidden;
    position: relative;
}
.noise-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #22c55e;
    transition: width 0.12s ease-out, background-color 0.3s ease;
}
.noise-max-control {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    margin-top: 8px;
}
.noise-max-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.noise-max-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4361ee;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(67, 97, 238, 0.4);
}
.noise-max-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4361ee;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(67, 97, 238, 0.4);
}
.noise-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}
.noise-ctrl-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: transparent;
    color: #374151;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
}
.noise-ctrl-btn:hover {
    border-color: #9ca3af;
    background: rgba(0, 0, 0, 0.04);
}
.noise-ctrl-btn.active {
    border-color: #374151;
    color: #374151;
    background: rgba(55, 65, 81, 0.08);
}
.noise-ctrl-btn.muted {
    border-color: #d1d5db;
    color: #9ca3af;
}
.noise-alert-btn {
    width: auto;
    min-width: 38px;
    padding: 0 10px;
    border-radius: 19px;
    font-size: 13px;
    gap: 5px;
}
.noise-alert-btn span {
    font-weight: 600;
    font-size: 13px;
}
.noise-ctrl-btn.cooldown {
    border-color: #f97316;
    color: #f97316;
    position: relative;
    overflow: hidden;
}
.noise-ctrl-btn.cooldown::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--cooldown-pct, 100%);
    background: rgba(249, 115, 22, 0.2);
}
/* Dark mode */
.kt-dark .noise-bar-track {
    background: linear-gradient(to right, #14532d 70%, #450a0a 70%);
}
.kt-dark .noise-ctrl-btn.cooldown {
    border-color: #fb923c;
    color: #fb923c;
}
.kt-dark .noise-ctrl-btn.cooldown::before {
    background: rgba(251, 146, 60, 0.2);
}
.kt-dark .noise-max-slider {
    background: #374151;
}
.kt-dark .noise-ctrl-btn {
    border-color: #4b5563;
    color: #d1d5db;
}
.kt-dark .noise-ctrl-btn:hover {
    border-color: #6b7280;
    background: rgba(255, 255, 255, 0.06);
}
.kt-dark .noise-ctrl-btn.active {
    border-color: #d1d5db;
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.08);
}
.kt-dark .noise-ctrl-btn.muted {
    border-color: #4b5563;
    color: #6b7280;
}

/* ===== QR Code Widget ===== */
.widget-qr-code {
    min-width: 200px;
}
.widget-qr-code.no-bg {
    background: transparent !important;
    box-shadow: none !important;
}
.widget-qr-code.no-bg:hover {
    box-shadow: none !important;
}

.qr-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
}

.qr-title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    word-break: break-word;
    padding: 0 8px;
}

.qr-display {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
}

.qr-display img,
.qr-display canvas {
    border-radius: 8px;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.qr-btn {
    background: #00d1b2;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.qr-btn:hover {
    background: #00b89c;
}

/* ===== Image Widget ===== */
.widget-image {
    min-width: 120px;
    min-height: 80px;
}

.widget-image.no-bg {
    background: transparent;
    box-shadow: none;
}

.widget-image.no-bg .widget-content {
    background: transparent;
}

.image-content {
    padding: 0 !important;
    position: relative;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 150px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: var(--widget-accent, #00d1b2);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.image-upload-btn:hover {
    filter: brightness(0.9);
}

.image-display {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.settings-image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-image-thumb {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.2s;
}

.settings-image-thumb.active {
    border-color: #00d1b2;
}

.settings-image-thumb:hover {
    border-color: #aaa;
}

.settings-image-thumb.active:hover {
    border-color: #00d1b2;
}

.settings-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-image-thumb-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.2s;
}

.settings-image-thumb:hover .settings-image-thumb-delete {
    opacity: 1;
}

.settings-image-size {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
}

.settings-image-info {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 12px !important;
}

.kt-dark .settings-image-info {
    background: #2a2a3e;
}

.settings-image-info-row {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.settings-image-info-row i {
    width: 14px;
    text-align: center;
    font-size: 11px;
    color: #aaa;
}

/* ===== Responsive ===== */
@media screen and (max-width: 768px) {
    #toolbar {
        height: auto;
        padding: 6px 10px;
    }

    .toolbar-scroll {
        justify-content: flex-start;
    }

    .tool-btn {
        padding: 3px 0;
        min-width: 46px;
        width: 46px;
        max-width: 46px;
    }

    .tool-btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .tool-btn-icon i {
        font-size: 14px;
    }

    .tool-btn span {
        font-size: 8px;
    }

    .control-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .control-menu {
        top: 10px;
        left: 10px;
    }

    .fullscreen-corner-btn {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .control-menu {
        top: 10px;
        left: 10px;
    }

    .control-menu-trigger {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .control-menu-items {
        top: 44px;
        min-width: 180px;
    }

    .widget {
        min-width: 180px;
    }

    #background-panel {
        width: calc(100% - 40px);
        right: 20px;
        left: 20px;
    }
}

/* ===== Animations ===== */
.widget:not(.no-appear-anim) {
    animation: widgetAppear 0.3s ease;
}

@keyframes widgetAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Touch improvements ===== */
@media (hover: none) {
    .tool-btn:hover {
        transform: none;
        box-shadow: none;
    }

    .control-btn:hover {
        transform: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    /* Bigger touch targets on touch devices */
    .ft-btn {
        width: 44px;
        height: 44px;
    }

    .ctx-item {
        padding: 14px 18px;
        font-size: 15px;
    }

    .tool-btn {
        padding: 14px 0;
        width: 68px;
    }

    .control-menu-item {
        padding: 14px 18px;
        font-size: 15px;
    }

    .annotation-toolbar button,
    .annotation-toolbar input[type="color"] {
        width: 44px;
        height: 44px;
    }
}

/* ===== Template Panel ===== */
#template-panel {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    max-width: calc(100vw - 40px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    z-index: 1001;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

#template-panel.hidden {
    display: none;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px;
}

.template-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border: 2px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    text-align: center;
}

.template-card:hover {
    border-color: #00d1b2;
    background: #f8ffff;
    transform: translateY(-2px);
}

.template-card i {
    font-size: 28px;
    color: #00d1b2;
}

.template-card .template-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.template-card .template-desc {
    font-size: 11px;
    color: #888;
}

/* ===== Fullscreen Corner Button ===== */
.fullscreen-corner-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(240, 240, 245, 0.7);
    color: #555;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.fullscreen-corner-btn:hover {
    background: rgba(240, 240, 245, 0.85);
    transform: scale(1.08);
    color: #333;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}


/* ===== Shake animation for noise meter ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ===== Empty state ===== */

/* ===== Timer/Clock alarm visual ===== */
.widget-timer.alarm,
.widget-clock.alarm {
    animation: alarmPulse 0.5s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.6);
}

@keyframes alarmPulse {
    0%, 100% { 
        box-shadow: 0 8px 32px rgba(255, 68, 68, 0.4);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(255, 68, 68, 0.8);
    }
}

/* ===== Improved mobile layout ===== */
@media screen and (max-width: 480px) {
    .widget {
        min-width: 150px !important;
    }
    
    .timer-digit, .timer-colon, .stopwatch-display, .clock-display {
        font-size: 32px !important;
    }
    
    .picker-result {
        font-size: 24px !important;
    }
    
    .die-shape {
        font-size: 18px !important;
    }
    .die-shape.d4 { width: 45px !important; height: 39px !important; }
    .die-shape.d6 { width: 42px !important; height: 42px !important; }
    .die-shape.d8 { width: 45px !important; height: 45px !important; }
    .die-shape.d10 { width: 38px !important; height: 48px !important; }
    .die-shape.d12 { width: 48px !important; height: 48px !important; }
    .die-shape.d20 { width: 50px !important; height: 55px !important; }
}

/* ===== Loading animation for widgets ===== */
.widget.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* ===== Dark mode support ===== */
.kt-dark .widget {
    background: #1e1e1e;
    color: #eee;
}
.kt-dark .widget-selected {
    outline-color: #6db3f8;
    box-shadow: 0 0 0 6px rgba(109, 179, 248, 0.2), 0 8px 32px rgba(0,0,0,0.3);
}
.kt-dark #widget-settings-panel {
    background: #1e1e1e;
    color: #eee;
}
.kt-dark .settings-panel-header {
    background: #2d2d2d;
    border-color: #333;
}
.kt-dark .settings-panel-title {
    color: #eee;
}
.kt-dark .settings-group label {
    color: #999;
}
.kt-dark .settings-btn {
    background: #2d2d2d;
    color: #eee;
    border-color: #444;
}
.kt-dark .settings-btn:hover {
    background: #3d3d3d;
}
.kt-dark .settings-btn.active {
    background: #00d1b2;
    color: white;
    border-color: #00d1b2;
}
.kt-dark .settings-tag-btn {
    background: #2d2d2d;
    color: #ccc;
    border-color: #444;
}
.kt-dark .settings-tag-btn:hover {
    background: #3d3d3d;
}
.kt-dark .settings-tag-btn.active {
    background: #00d1b2;
    color: white;
    border-color: #00d1b2;
}
.kt-dark .settings-select,
.kt-dark .settings-input,
.kt-dark .settings-textarea {
    background: #2d2d2d;
    color: #eee;
    border-color: #444;
}
.kt-dark .settings-textarea:focus {
    border-color: #00d1b2;
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.15);
}
.kt-dark .settings-checkbox-label {
    color: #eee !important;
}
.kt-dark .widget-footer {
    background: #252525;
    border-top-color: #333;
}
.kt-dark .widget-text textarea,
.kt-dark .widget-text .text-editor,
.kt-dark .picker-names {
    background: #2d2d2d;
    color: #eee;
    border-color: #444;
}
.kt-dark .qr-title {
    color: #eee;
}
.kt-dark .settings-qr-url,
.kt-dark .settings-qr-title {
    background: #2d2d2d !important;
    color: #eee !important;
    border-color: #444 !important;
}
.kt-dark .timer-digit,
.kt-dark .timer-colon,
.kt-dark .stopwatch-display,
.kt-dark .clock-display {
    color: #eee;
}
.kt-dark .timer-digit-btn {
    color: #aaa;
}
.kt-dark .timer-digit-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #eee;
}
.kt-dark .clock-date {
    color: #999;
}
.kt-dark .clock-alarm-item,
.kt-dark .sw-alarm-item {
    background: #2d2d2d !important;
}
.kt-dark .clock-alarm-item span,
.kt-dark .sw-alarm-item span {
    color: #ccc !important;
}
.kt-dark .clock-alarm-remove,
.kt-dark .sw-alarm-remove {
    color: #666 !important;
}
.kt-dark .clock-alarm-remove:hover,
.kt-dark .sw-alarm-remove:hover {
    color: #ff6b6b !important;
}
.kt-dark .font-btn,
.kt-dark .timer-controls button,
.kt-dark .timer-presets button,
.kt-dark .stopwatch-controls button {
    background: #333;
    border-color: #444;
    color: #eee;
}
.kt-dark .font-size-display {
    color: #999;
}
.kt-dark .ws-display-icon {
    background: #2d2d2d;
    border-color: #444;
}
.kt-dark .ws-display-icon i {
    color: #eee;
}
.kt-dark .ws-display-label {
    color: #ddd;
}
.kt-dark .ws-btn {
    background: #2d2d2d;
    border-color: #444;
}
.kt-dark .ws-btn i {
    color: #ccc;
}
.kt-dark .dice-total {
    color: #eee;
}
.kt-dark .dice-roll-btn {
    background: var(--widget-accent, #00b89c);
}
.kt-dark .settings-dice-item {
    background: #2d2d2d !important;
}
.kt-dark .dice-history-item {
    background: #2d2d2d;
}
.kt-dark .dice-history-item .dh-sum {
    color: #eee;
}
.kt-dark .dice-type-btn {
    border-color: #555;
}
.kt-dark .image-placeholder {
    border-color: #444;
    color: #666;
}
.kt-dark #toolbar {
    background: rgba(20, 20, 35, 0.35);
    border-color: rgba(255, 255, 255, 0.1);
}
.kt-dark #toolbar-restore-btn {
    background: rgba(20, 20, 35, 0.4);
    color: rgba(255,255,255,0.5);
}
.kt-dark #toolbar-restore-btn:hover {
    background: rgba(20, 20, 35, 0.6);
    color: #fff;
}
.kt-dark .tool-btn {
    background: transparent;
}
.kt-dark .tool-btn:hover {
    background: transparent;
}
.kt-dark .undo-redo-btn {
    background: linear-gradient(145deg, #2d2d3d 0%, #1e1e2e 100%);
    color: #888;
}
.kt-dark .undo-redo-btn:hover {
    background: linear-gradient(145deg, #3d3d4d 0%, #2d2d3d 100%);
    color: #00d1b2;
}
.kt-dark .tool-btn span {
    color: rgba(255,255,255,0.8);
}
.kt-dark .toolbar-scroll {
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.kt-dark #more-widgets-panel {
    background: #1e1e2e;
    color: #eee;
}
.kt-dark .more-panel-header {
    background: #2d2d2d;
    border-color: #333;
}
.kt-dark .more-panel-header h4 {
    color: #eee;
}
.kt-dark .more-panel-footer {
    border-color: #333;
}
.kt-dark .more-panel-edit-btn {
    border-color: #444;
    color: #aaa;
}
.kt-dark .more-panel-edit-btn:hover {
    border-color: #00d1b2;
    color: #00d1b2;
}
.kt-dark .toolbar-editor-content {
    background: #1e1e2e;
    color: #eee;
}
.kt-dark .toolbar-editor-section h4 {
    color: #ddd;
}
.kt-dark .toolbar-editor-desc {
    color: #777;
}
.kt-dark .toolbar-editor-counter {
    background: #1b3a1b;
    color: #66bb6a;
}
.kt-dark .toolbar-editor-counter.is-full {
    background: #3e2200;
    color: #ffb74d;
}
.kt-dark .toolbar-editor-full-msg {
    background: #3e2200;
    color: #ffb74d;
}
.kt-dark .toolbar-editor-divider {
    color: #444;
}
.kt-dark .toolbar-editor-divider span {
    background: #1e1e2e;
}
.kt-dark .toolbar-editor-zone {
    border-color: #333;
}
.kt-dark .toolbar-editor-zone-main {
    background: rgba(0, 209, 178, 0.04);
    border-color: #1a3a35;
}
.kt-dark .toolbar-editor-zone-main.is-full {
    border-color: #5d3a00;
    background: rgba(255, 152, 0, 0.04);
}
.kt-dark .toolbar-editor-zone.drag-over {
    border-color: #00d1b2;
    background: rgba(0, 209, 178, 0.08);
}
.kt-dark .toolbar-editor-zone-main.is-full.drag-over {
    border-color: #e65100;
    background: rgba(230, 81, 0, 0.06);
}
.kt-dark .toolbar-editor-item {
    background: #2d2d3d;
    border-color: #3d3d4d;
}
.kt-dark .toolbar-editor-item span {
    color: #bbb;
}
.kt-dark #background-panel {
    background: #1e1e2e;
    color: #eee;
}
.kt-dark .bg-panel-header {
    background: #2d2d2d;
    border-color: #333;
}
.kt-dark .bg-panel-header h4 {
    color: #eee;
}
.kt-dark .bg-section h5 {
    color: #888;
}
.kt-dark #widget-manager {
    background: #1e1e2e;
    color: #eee;
}
.kt-dark .manager-header {
    background: #2d2d2d;
    border-color: #333;
}
.kt-dark .manager-header h4 {
    color: #eee;
}
.kt-dark .manager-footer {
    background: #2d2d2d;
    border-color: #333;
}
.kt-dark .manager-btn {
    background: #333;
    border-color: #444;
    color: #eee;
}
.kt-dark .manager-btn:hover {
    background: #444;
}
.kt-dark .manager-btn.danger {
    border-color: #5a2020;
}
.kt-dark .manager-btn.danger:hover {
    background: #3a1515;
}
.kt-dark .widget-list-item {
    border-color: #333;
}
.kt-dark .widget-list-item:hover {
    background: #2d2d2d;
}
.kt-dark .widget-list-name {
    color: #eee;
}
.kt-dark .widget-action-btn {
    color: #888;
}
.kt-dark .widget-action-btn:hover {
    background: #333;
    color: #eee;
}
.kt-dark .widget-action-btn.delete:hover {
    background: #3a1515;
    color: #ff6b6b;
}
.kt-dark .manager-empty-state {
    color: #777;
}
.kt-dark .close-panel {
    color: #888;
}
.kt-dark .close-panel:hover {
    color: #eee;
}
.kt-dark .toolbar-separator {
    background: rgba(255,255,255,0.15);
}
.kt-dark .annotation-toolbar {
    background: #1e1e2e;
}
.kt-dark .widget.loading::after {
    background: rgba(30, 30, 46, 0.9);
}
.alarm-add-form {
    background: #f8f9fa;
    border: 1px solid #eee;
}
.kt-dark .alarm-add-form {
    background: #2d2d2d;
    border-color: #444;
}
.kt-dark .alarm-add-form div {
    color: #aaa !important;
}
.kt-dark .timer-sound-select {
    background: #2d2d2d;
    border-color: #444;
    color: #eee;
}
.kt-dark .checkbox-label {
    color: #ccc;
}
.kt-dark .annotation-toolbar-minimized {
    background: #00d1b2;
}
.kt-dark .kt-modal-content {
    background: #1e1e2e;
    color: #eee;
}
.kt-dark .kt-modal-header {
    border-color: #333;
}
.kt-dark .kt-modal-header h3 {
    color: #eee;
}
.kt-dark .kt-modal-close {
    color: #888;
}
.kt-dark .kt-modal-close:hover {
    color: #eee;
}
.kt-dark .kt-modal-footer {
    border-color: #333;
}
.kt-dark .kt-form-group input,
.kt-dark .kt-form-group textarea,
.kt-dark .kt-form-group select {
    background: #2d2d2d;
    border-color: #444;
    color: #eee;
}
.kt-dark .kt-panel {
    background: #1e1e2e;
    border-color: #333;
    color: #eee;
}
.kt-dark .kt-panel-header {
    border-color: #333;
}
.kt-dark .kt-panel-header h4 {
    color: #eee;
}
.kt-dark .kt-board-item {
    border-color: #333;
}
.kt-dark .kt-board-item:hover {
    background: #2d2d2d;
    border-color: #555;
}
.kt-dark .kt-board-item.active {
    background: #1e2a4a;
    border-color: #4facfe;
}
.kt-dark .kt-board-item-title {
    color: #eee;
}
.kt-dark .kt-board-item-actions button {
    border-color: #444;
    color: #aaa;
}
.kt-dark .kt-board-item-actions button:hover {
    background: #333;
    border-color: #555;
    color: #eee;
}
.kt-dark .kt-board-item-actions button.danger:hover {
    background: #3a1515;
    border-color: #f14668;
    color: #f14668;
}
.kt-dark .kt-badge-public {
    background: #1a3a1a;
    color: #6ee7b7;
}
.kt-dark .kt-share-link-row input {
    background: #2d2d2d;
    color: #eee;
    border-color: #444;
}

/* ===== Annotation Overlay ===== */
.annotation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 90px);
    z-index: 9998;
    pointer-events: auto;
}

.annotation-overlay.hidden {
    display: none;
}

.annotation-overlay.annotation-locked {
    pointer-events: none;
}

.annotation-locked-btn {
    color: #00d1b2 !important;
    position: relative;
}

.annotation-locked-btn::after {
    display: none;
}

.annotation-overlay svg {
    width: 100%;
    height: 100%;
}

.annotation-overlay.eraser-mode {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='4' y='8' width='16' height='12' rx='2' fill='%23fff' stroke='%23333' stroke-width='1.5'/%3E%3Crect x='4' y='8' width='16' height='5' rx='1' fill='%23e0e0e0' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") 12 20, pointer;
}

.annotation-overlay .annotation-object:hover {
    filter: none;
}

.annotation-overlay.eraser-mode .annotation-object:hover {
    filter: brightness(0.5);
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='4' y='8' width='16' height='12' rx='2' fill='%23fff' stroke='%23333' stroke-width='1.5'/%3E%3Crect x='4' y='8' width='16' height='5' rx='1' fill='%23e0e0e0' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") 12 20, pointer;
}

.annotation-toolbar {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(240, 240, 245, 0.7);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 12px;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 9999;
    max-width: calc(100vw - 24px);
}

.annotation-toolbar.hidden {
    display: none;
}

.ann-custom-color-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
    background: conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) !important;
    background-origin: border-box !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.ann-custom-color-btn input[type="color"] {
    opacity: 0;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    cursor: pointer;
    border: none;
    padding: 0;
}

.annotation-toolbar input[type="range"] {
    width: 80px;
}

.annotation-separator {
    width: 1px;
    height: 40px;
    background: rgba(0,0,0,0.08);
    align-self: center;
}

.annotation-toolbar-full {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ann-left-section {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.ann-tools-section {
    display: flex;
    gap: 0;
    align-items: flex-end;
}

.ann-tool-btn {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
    border-radius: 10px;
    transition: all 0.2s ease;
    width: 52px;
    gap: 3px;
}

.ann-tool-btn:hover {
    transform: translateY(-2px);
}

.ann-tool-btn span {
    font-size: 9px;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}

.ann-tool-btn .tool-btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.ann-tool-btn.active .tool-btn-icon {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 4px rgba(0,0,0,0.15);
}

.ann-tool-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.ann-tool-btn:disabled:hover {
    transform: none;
}

.annotation-colors {
    display: flex;
    gap: 5px;
    align-items: center;
}

.annotation-toolbar input[type="range"] {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    outline: none;
}

.annotation-toolbar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #5C6BC0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.ann-color-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    padding: 0 !important;
    min-width: 0 !important;
}

.ann-color-btn:hover {
    transform: scale(1.15);
}

.ann-color-btn.active {
    border-color: #333 !important;
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}

.annotation-toolbar-minimized {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 56px;
    background: rgba(240, 240, 245, 0.7);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background 0.2s, box-shadow 0.2s;
    z-index: 9999;
}

.annotation-toolbar-minimized.left {
    left: 0;
    border-radius: 0 10px 10px 0;
}

.annotation-toolbar-minimized.right {
    right: 0;
    left: auto;
    border-radius: 10px 0 0 10px;
}

.annotation-toolbar-minimized:hover {
    background: rgba(240, 240, 245, 0.9);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.annotation-toolbar-minimized.hidden {
    display: none;
}

.annotation-toolbar.minimized {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0;
    bottom: auto;
    left: auto;
    transform: none;
    transform: none;
}

.annotation-toolbar.minimized .annotation-toolbar-full {
    display: none;
}

/* annotate-btn is now inside the control-menu */
#annotate-btn.active .tool-btn-icon {
    box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.4), 0 2px 8px rgba(0,0,0,0.15);
}

/* ===== Analog Clock ===== */
/* (Clock toggle button removed — now in settings panel) */

.clock-content {
    min-height: auto;
}

.clock-analog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.analog-clock-face {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);
    border: 4px solid #333;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1), inset 0 2px 10px rgba(0,0,0,0.05);
}

.clock-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    border-radius: 3px;
}

.hour-hand {
    width: 6px;
    height: 50px;
    background: #333;
    transform: translateX(-50%);
}

.minute-hand {
    width: 4px;
    height: 70px;
    background: #555;
    transform: translateX(-50%);
}

.second-hand {
    width: 2px;
    height: 80px;
    background: #ff4444;
    transform: translateX(-50%);
}

.clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
    z-index: 10;
}

.clock-numbers {
    position: absolute;
    width: 100%;
    height: 100%;
}

.clock-numbers span {
    position: absolute;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock-numbers span:nth-child(1) { top: 10%; left: 65%; }
.clock-numbers span:nth-child(2) { top: 22%; left: 78%; }
.clock-numbers span:nth-child(3) { top: 42%; left: 85%; }
.clock-numbers span:nth-child(4) { top: 62%; left: 78%; }
.clock-numbers span:nth-child(5) { top: 75%; left: 65%; }
.clock-numbers span:nth-child(6) { top: 82%; left: 45%; }
.clock-numbers span:nth-child(7) { top: 75%; left: 22%; }
.clock-numbers span:nth-child(8) { top: 62%; left: 8%; }
.clock-numbers span:nth-child(9) { top: 42%; left: 2%; }
.clock-numbers span:nth-child(10) { top: 22%; left: 5%; }
.clock-numbers span:nth-child(11) { top: 10%; left: 20%; }
.clock-numbers span:nth-child(12) { top: 2%; left: 42%; }

.analog-date {
    font-size: 14px;
    color: #888;
    text-align: center;
    width: 100%;
}

/* ===== Video Widget ===== */
.widget-video {
    min-width: 400px;
    min-height: 300px;
}

.video-content {
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.widget-video.has-video {
    background: #000;
}

.widget-video.has-video .video-content {
    padding: 0 !important;
    gap: 0;
    border-radius: 0;
    align-items: stretch;
    overflow: hidden;
}

.video-input-container {
    width: 100%;
    max-width: 360px;
}

.video-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.video-input:focus {
    outline: none;
    border-color: #00d1b2;
}

.video-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ccc;
    min-height: 180px;
}

.video-placeholder i {
    font-size: 60px;
    color: #ff0000;
    opacity: 0.3;
}

.video-placeholder span {
    font-size: 14px;
    color: #999;
}

.video-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ff6b6b;
    min-height: 180px;
    text-align: center;
    padding: 20px;
}

.video-error i {
    font-size: 40px;
}

.video-error span {
    font-size: 14px;
}

.video-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
}

.widget-video.widget-selected .video-overlay,
.widget-video.widget-spotlight .video-overlay {
    pointer-events: none;
}

.video-iframe {
    flex: 1;
    width: 100%;
    min-height: 0;
}

.widget-video:not(.has-video) .video-iframe {
    min-height: 200px;
    border-radius: 8px;
}


/* Settings panel video list */
.settings-video-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-video-item {
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 8px 10px;
    transition: border-color 0.15s;
}

.settings-video-item.active {
    border-color: #00d1b2;
}

.settings-video-item-header {
    display: flex;
    gap: 4px;
    align-items: center;
}

.settings-video-item-header .settings-input {
    flex: 1;
    min-width: 0;
}

.settings-video-url {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-dark .video-input {
    background: #2d2d2d;
    color: #eee;
    border-color: #444;
}

.kt-dark .settings-video-item {
    border-color: #444;
}

.kt-dark .settings-video-item.active {
    border-color: #00d1b2;
}

/* ===== Timetable Widget ===== */
.widget-timetable {
    min-width: 150px;
    min-height: 200px;
}

.timetable-content {
    padding: 10px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.timetable-grid {
    width: 100%;
}

.timetable-row {
    display: flex;
    border-bottom: 1px solid #eee;
}

.timetable-row:last-child {
    border-bottom: none;
}

.timetable-header-row {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
}

.timetable-header-row .timetable-time-cell,
.timetable-header-row .timetable-lesson-cell {
    padding: 10px;
}

.timetable-time-cell {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.timetable-lesson-cell {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.time-input {
    width: 44px;
    padding: 8px 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #00d1b2;
    background: transparent;
    text-align: center;
    transition: all 0.2s;
}

.time-input:focus {
    outline: none;
    border-color: #00d1b2;
    background: white;
}

.lesson-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    background: transparent;
    transition: all 0.2s;
}

.lesson-input:focus {
    outline: none;
    border-color: #00d1b2;
    background: white;
}

.timetable-row.current-lesson {
    background: linear-gradient(90deg, rgba(21, 101, 192, 0.15) 0%, rgba(21, 101, 192, 0.05) 100%);
    border-left: 3px solid var(--widget-accent, #00d1b2);
}

.timetable-row.current-lesson .time-input {
    color: var(--widget-accent, #00d1b2);
    font-weight: 700;
}

.timetable-row.current-lesson .lesson-input {
    font-weight: 600;
}

.timetable-actions {
    margin-top: 10px;
    display: none;
    justify-content: center;
}

.widget-selected:not(.multi-selected) .timetable-actions {
    display: flex;
}

.timetable-add-btn {
    padding: 8px 16px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.timetable-add-btn:hover {
    background: var(--widget-accent, #00d1b2);
    color: white;
    border-color: var(--widget-accent, #00d1b2);
}

.timetable-del-cell {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
}
.widget-selected:not(.multi-selected) .timetable-del-cell {
    display: flex;
}

.timetable-del-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1;
}

.timetable-del-btn:hover {
    color: #f14668;
    background: rgba(241, 70, 104, 0.1);
}

.timetable-header-row .timetable-del-cell {
    visibility: hidden;
}

/* Timetable settings */
.tt-templates-list,
.tt-plans-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.tt-template-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.15s;
}

.tt-template-item:hover {
    background: #eee;
}

.tt-template-name {
    flex: 1;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-template-info {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}

.tt-template-actions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.tt-template-actions .settings-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 6px;
}

.tt-template-actions .tt-delete-times,
.tt-template-actions .tt-delete-plan {
    color: #ccc;
}

.tt-template-actions .tt-delete-times:hover,
.tt-template-actions .tt-delete-plan:hover {
    color: #f14668;
    background: rgba(241, 70, 104, 0.1);
}

.tt-template-actions .tt-apply-builtin,
.tt-template-actions .tt-apply-times,
.tt-template-actions .tt-apply-plan {
    color: #999;
}

.tt-template-actions .tt-apply-builtin:hover,
.tt-template-actions .tt-apply-times:hover,
.tt-template-actions .tt-apply-plan:hover {
    color: #00d1b2;
    background: rgba(0, 209, 178, 0.1);
}

.tt-save-row {
    display: flex;
    gap: 6px;
}

.tt-save-row .settings-input {
    flex: 1;
    min-width: 0;
}

.tt-save-row .settings-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00d1b2;
}

.tt-save-row .settings-btn:hover {
    background: rgba(0, 209, 178, 0.1);
}

.tt-empty {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    padding: 10px 0;
}

.tt-hint {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
    line-height: 1.4;
}

.tt-hint span {
    color: #666;
    font-style: italic;
}

.tt-clear-lessons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Dark mode - timetable settings */
.kt-dark .timetable-row {
    border-color: #333;
}
.kt-dark .timetable-header-row {
    background: #2d2d2d;
    color: #aaa;
}
.kt-dark .time-input:focus,
.kt-dark .lesson-input:focus {
    background: #2d2d2d;
}
.kt-dark .lesson-input {
    color: #eee;
}
.kt-dark .timetable-add-btn {
    background: #2d2d2d;
    border-color: #444;
    color: #ccc;
}
.kt-dark .timetable-add-btn:hover {
    background: #333;
}
.kt-dark .tt-template-item {
    background: #2a2a3e;
}

.kt-dark .tt-template-item:hover {
    background: #333;
}

.kt-dark .tt-template-actions .tt-delete-times,
.kt-dark .tt-template-actions .tt-delete-plan {
    color: #555;
}

/* ===== Responsive adjustments for new widgets ===== */
@media screen and (max-width: 768px) {
    .annotation-toolbar {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
        transform: none;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .widget-video {
        min-width: 280px !important;
    }

    #widget-settings-panel {
        width: 100%;
    }
    
    .analog-clock-face {
        width: 140px;
        height: 140px;
    }
    
    .hour-hand { height: 40px; }
    .minute-hand { height: 55px; }
    .second-hand { height: 60px; }
    
    .clock-numbers span {
        font-size: 11px;
    }
}

/* ===== Dark mode for new widgets ===== */
.kt-dark .annotation-toolbar {
    background: #2d2d2d;
}
.kt-dark .analog-clock-face {
    background: linear-gradient(145deg, #2d2d2d 0%, #252525 100%);
    border-color: #eee;
}
.kt-dark .clock-hand.hour-hand,
.kt-dark .clock-hand.minute-hand {
    background: #eee;
}
.kt-dark .clock-center {
    background: #eee;
}
.kt-dark .clock-numbers span {
    color: #eee;
}
.kt-dark .video-input {
    background: #2d2d2d;
    color: #eee;
    border-color: #444;
}
.kt-dark .settings-video-item {
    border-color: #444;
}
.kt-dark .settings-video-item.active {
    border-color: #00d1b2;
}
.kt-dark .timetable-header-row {
    background: #333;
}
.kt-dark .timetable-row {
    border-color: #444;
}
.kt-dark .time-input,
.kt-dark .lesson-input {
    color: #eee;
}
.kt-dark .timetable-add-btn {
    background: #333;
    border-color: #444;
    color: #eee;
}
.kt-dark .timetable-del-btn {
    color: #666;
}
.kt-dark .timetable-del-btn:hover {
    color: #f14668;
    background: rgba(241, 70, 104, 0.15);
}

/* (Minimized state removed — no longer used) */

/* ===== Timer Options ===== */
.timer-options {
    margin-bottom: 12px;
    width: 100%;
}

.timer-sound-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    background-color: white;
    cursor: pointer;
}

.timer-sound-select:focus {
    outline: none;
    border-color: #00d1b2;
}

/* ===== Picker Options ===== */
.picker-options {
    margin-bottom: 15px;
    width: 100%;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    justify-content: center;
}

.checkbox-label input {
    cursor: pointer;
}

/* ===== Widget Manager ===== */
#widget-manager {
    position: fixed;
    bottom: 100px;
    left: 20px;
    width: 300px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1001;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

#widget-manager.hidden {
    display: none;
}

.manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.manager-header h4 {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.manager-content {
    flex: 1;
    min-height: 60px;
    overflow-y: auto;
    padding: 4px 0;
}

.manager-empty-state {
    padding: 24px 16px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.widget-list-item {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.widget-list-item:hover {
    background: rgba(0,0,0,0.04);
}

.widget-list-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.widget-list-icon i {
    font-size: 14px;
    color: #fff;
}

.widget-list-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.widget-list-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.widget-list-item:hover .widget-list-actions {
    opacity: 1;
}

.widget-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.15s;
    font-size: 12px;
}

.widget-action-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #333;
}

.widget-action-btn.delete:hover {
    background: rgba(255,60,60,0.1);
    color: #e53935;
}

.manager-footer {
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    gap: 10px;
}

.manager-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.manager-btn:hover {
    background: #f0f0f0;
}

.manager-btn.danger {
    color: #ff4444;
    border-color: #ffcdcd;
}

.manager-btn.danger:hover {
    background: #ffecec;
}

.toolbar-separator {
    width: 1px;
    background: rgba(0,0,0,0.1);
    margin: 0 5px;
    height: 40px;
    align-self: center;
}

/* Dark mode for manager */
.kt-dark #widget-manager {
    background: #1e1e1e;
}
.kt-dark .manager-header, .kt-dark .manager-footer {
    background: #2d2d2d;
    border-color: #333;
}
.kt-dark .manager-header h4, .kt-dark .widget-list-name {
    color: #eee;
}
.kt-dark .widget-list-item {
    border-color: #333;
}
.kt-dark .widget-list-item:hover {
    background: #2d2d2d;
}
.kt-dark .manager-btn {
    background: #333;
    border-color: #444;
    color: #eee;
}
.kt-dark .manager-btn:hover {
    background: #444;
}
.kt-dark .toolbar-separator {
    background: rgba(255,255,255,0.15);
}
.kt-dark .kt-modal-content {
    background: #1e1e1e;
    color: #eee;
}
.kt-dark .kt-modal-header {
    border-color: #333;
}
.kt-dark .kt-modal-footer {
    border-color: #333;
}
.kt-dark .kt-form-group input,
.kt-dark .kt-form-group textarea,
.kt-dark .kt-form-group select {
    background: #2d2d2d;
    border-color: #444;
    color: #eee;
}
.kt-dark .kt-panel {
    background: #1e1e1e;
    border-color: #333;
}
.kt-dark .kt-panel-header {
    border-color: #333;
}
.kt-dark .kt-board-item {
    border-color: #333;
}
.kt-dark .kt-board-item:hover {
    background: #2d2d2d;
}

/* ===== Save/Load/Share Modal Styles ===== */

/* ===== Spotlight ===== */
.spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99998;
    animation: spotlightFadeIn 0.2s ease;
}

.spotlight-overlay.spotlight-overlay-light {
    background: rgba(255, 255, 255, 0.75);
}

@keyframes spotlightFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.spotlight-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    backdrop-filter: blur(4px);
}

.spotlight-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.spotlight-btn-light {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

.spotlight-mute {
    position: fixed;
    top: 20px;
    right: 76px;
    z-index: 100000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    backdrop-filter: blur(4px);
}

.spotlight-mute:hover {
    background: rgba(255, 255, 255, 0.3);
}

.spotlight-btn-light:hover {
    background: rgba(0, 0, 0, 0.2);
}

.widget-spotlight {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: 70vw !important;
    height: 75vh !important;
    z-index: 99999 !important;
    border-radius: 12px !important;
    animation: spotlightZoomIn 0.25s ease forwards;
}

.widget-spotlight .resize-handle {
    display: none !important;
}

/* Picker in spotlight: horizontal layout */
.widget-spotlight .picker-content {
    flex-direction: row !important;
    gap: 20px;
    padding: 20px !important;
}

.widget-spotlight .picker-display {
    flex: 1;
    height: 100%;
}

.widget-spotlight .picker-count {
    display: none;
}

.widget-spotlight .picker-btn {
    writing-mode: horizontal-tb;
    padding: 16px 32px;
    font-size: 18px;
    align-self: center;
}

.widget-qr-code.widget-spotlight .qr-content {
    padding: 40px 60px;
    gap: 24px;
}

.widget-qr-code.widget-spotlight .qr-title {
    font-size: 36px;
}

.widget-traffic-light.widget-spotlight {
    width: 35vh !important;
    height: 90vh !important;
    background: transparent !important;
    box-shadow: none !important;
}

#app-container.spotlight-active #toolbar,
#app-container.spotlight-active .control-menu,
#app-container.spotlight-active .fullscreen-corner-btn,
#app-container.spotlight-active #more-widgets-panel,
#app-container.spotlight-active #widget-manager,
#app-container.spotlight-active #widget-settings-panel,
#app-container.spotlight-active #background-panel,
#app-container.spotlight-active #annotation-toolbar,
#app-container.spotlight-active #minimized-tray {
    display: none !important;
}

#app-container.spotlight-active .widget:not(.widget-spotlight) {
    display: none !important;
}

/* Timetable spotlight */
.widget-timetable.widget-spotlight .timetable-content {
    padding: 24px 32px !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

.widget-timetable.widget-spotlight .timetable-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    gap: 0 40px;
    width: auto;
}

.widget-timetable.widget-spotlight .timetable-header-row {
    display: none !important;
}

.widget-timetable.widget-spotlight .timetable-row {
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 2px 0;
}

.widget-timetable.widget-spotlight .time-input {
    font-size: 20px;
    width: 65px;
    padding: 10px 4px;
}

.widget-timetable.widget-spotlight .lesson-input {
    font-size: 20px;
    padding: 10px 8px;
}

.widget-timetable.widget-spotlight .timetable-del-cell {
    display: none !important;
}

.widget-timetable.widget-spotlight .timetable-actions {
    display: none !important;
}

.widget-timetable.widget-spotlight .timetable-row.current-lesson {
    border-radius: 8px;
}

@keyframes spotlightZoomIn {
    from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.7); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.kt-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kt-modal.hidden {
    display: none;
}

.kt-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.kt-modal-content {
    position: relative;
    background: rgba(245, 245, 248, 0.92);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
    width: 90%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: ktModalIn 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@keyframes ktModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.kt-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.kt-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.kt-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
    line-height: 1;
}

.kt-modal-close:hover {
    color: #333;
}

.kt-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.kt-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.kt-form-group {
    margin-bottom: 16px;
}

.kt-form-group:last-child {
    margin-bottom: 0;
}

.kt-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
}

.kt-form-group input[type="text"],
.kt-form-group textarea,
.kt-form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.kt-form-group input[type="text"]:focus,
.kt-form-group textarea:focus,
.kt-form-group select:focus {
    outline: none;
    border-color: #4facfe;
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.15);
}

.kt-form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.kt-share-link-row {
    display: flex;
    gap: 8px;
}

.kt-share-link-row input {
    flex: 1;
    background: #f5f5f5;
}

.kt-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal !important;
}

.kt-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.kt-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: inherit;
}

.kt-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.kt-btn-primary {
    background: #4facfe;
    color: white;
}

.kt-btn-primary:hover:not(:disabled) {
    background: #3a9cee;
}

.kt-btn-secondary {
    background: #e8e8e8;
    color: #555;
}

.kt-btn-secondary:hover {
    background: #ddd;
}

/* ===== My Boards Panel ===== */

.kt-panel {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 350px;
    max-height: 80vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 99998;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: ktModalIn 0.2s ease;
}

.kt-panel.hidden {
    display: none;
}

.kt-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.kt-panel-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.kt-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.kt-board-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.kt-board-item:hover {
    background: #f5f7ff;
    border-color: #c8d6ff;
}

.kt-board-item.active {
    background: #eef3ff;
    border-color: #4facfe;
}

.kt-board-item-info {
    flex: 1;
    min-width: 0;
}

.kt-board-item-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kt-board-item-meta {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.kt-badge-public {
    background: #e3f8e3;
    color: #2e7d32;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.kt-board-item-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

.kt-board-item-actions button {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    transition: all 0.15s;
}

.kt-board-item-actions button:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

.kt-board-item-actions button.danger:hover {
    background: #fde8e8;
    border-color: #f14668;
    color: #f14668;
}

.kt-loading {
    text-align: center;
    padding: 30px;
    color: #888;
    font-size: 14px;
}

.kt-empty-state {
    text-align: center;
    padding: 30px;
    color: #aaa;
}

.kt-empty-state i {
    font-size: 32px;
    margin-bottom: 10px;
}

.kt-empty-state p {
    font-size: 13px;
}

/* ===== Menu Board Name ===== */

.control-menu-board-name {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    max-width: 100%;
}

.control-menu-board-name.hidden {
    display: none;
}

.menu-board-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.menu-board-title:hover {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.03);
}

.menu-board-title.editing {
    border-color: #48c78e;
    background: #fff;
    cursor: text;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

.menu-save-indicator {
    font-size: 8px;
    color: #ffdd57;
    flex-shrink: 0;
    transition: color 0.3s, opacity 0.3s;
}

.menu-save-indicator.saved {
    color: #48c774;
}


/* View mode title bar */
.view-title-bar {
    display: flex !important;
    gap: 12px;
    align-items: center;
}

.view-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

.view-meta {
    font-size: 11px;
    opacity: 0.8;
}

/* ===== Toast Notification ===== */

@keyframes ktSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes ktSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* ===== Responsive adjustments for panels ===== */

@media (max-width: 600px) {
    .kt-panel {
        width: calc(100vw - 20px);
        left: 10px;
        right: 10px;
    }

    .kt-modal-content {
        width: 95%;
    }
}

/* ===== Date Widget ===== */
.date-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px;
    text-align: center;
    height: 100%;
}
.date-day-name {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
}
.date-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.date-number {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: #333;
}
.date-month {
    font-size: 22px;
    font-weight: 500;
    color: #555;
}
.date-year {
    font-size: 16px;
    color: #888;
    font-weight: 500;
}
.date-week {
    font-size: 13px;
    color: #aaa;
    margin-top: 2px;
}
.date-style-compact .date-content { padding: 6px; gap: 2px; }
.date-style-compact .date-day-name { font-size: 18px; letter-spacing: 3px; }
.date-style-compact .date-number { font-size: 64px; }
.date-style-compact .date-month { font-size: 26px; }
.date-style-compact .date-week { font-size: 15px; }
.date-style-compact .date-year { display: none; }
.date-style-minimal .date-content { padding: 4px; gap: 0; }
.date-style-minimal .date-day-name { display: none; }
.date-style-minimal .date-number { font-size: 90px; }
.date-style-minimal .date-month { font-size: 28px; }
.date-style-minimal .date-year { display: none; }
.date-style-minimal .date-week { display: none; }
.widget-date.no-bg {
    background: transparent !important;
    box-shadow: none !important;
}
.widget-date.no-bg:hover {
    box-shadow: none !important;
}

.kt-dark .date-day-name { color: #aaa; }
.kt-dark .date-number { color: #eee; }
.kt-dark .date-month { color: #ccc; }
.kt-dark .date-year { color: #888; }
.kt-dark .date-week { color: #666; }

/* ===== Checklist Widget ===== */
.widget-checklist {
    min-height: auto;
    height: auto !important;
}
.widget-checklist.widget-spotlight {
    width: auto !important;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}
.widget-checklist.widget-spotlight .cl-toggle-add,
.widget-checklist.widget-spotlight .cl-add-row { display: none !important; }
.widget-checklist.widget-spotlight .cl-del { display: none !important; }
.widget-checklist.widget-spotlight .cl-title { pointer-events: none; }
.cl-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.cl-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 0 2px;
}
.cl-toggle-add {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.cl-toggle-add:hover { color: var(--widget-accent, #00d1b2); background: rgba(0,0,0,0.05); }
.cl-toggle-add.active { color: #fff; background: var(--widget-accent, #00d1b2); transform: rotate(45deg); }
.cl-toggle-add.active:hover { filter: brightness(0.9); }
.kt-dark .cl-toggle-add { color: #666; }
.kt-dark .cl-toggle-add:hover { color: var(--widget-accent, #00d1b2); background: rgba(255,255,255,0.06); }
.kt-dark .cl-toggle-add.active { color: #fff; background: var(--widget-accent, #00d1b2); }
.cl-add-hidden { display: none !important; }
.cl-hide-done .cl-item.cl-done { display: none; }
.cl-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    outline: none;
    flex: 1;
}
.cl-title:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}
.cl-count {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 8px;
    min-width: 3.5ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cl-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.widget-checklist:not(.widget-spotlight) .cl-items {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.cl-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border-radius: 4px;
    transition: background 0.1s;
    width: 100%;
}
.cl-item:hover { background: rgba(0,0,0,0.03); }
.cl-item.cl-dragging {
    opacity: 0.55;
    background: var(--widget-accent, #00d1b2);
    background: color-mix(in srgb, var(--widget-accent, #00d1b2) 14%, transparent);
}
.cl-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    color: #ccc;
    cursor: grab;
    font-size: 11px;
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s;
    touch-action: none;
}
.cl-item:hover .cl-grip { opacity: 1; color: #aaa; }
.cl-grip:active { cursor: grabbing; }
.widget-checklist.widget-spotlight .cl-grip { display: none !important; }
.kt-dark .cl-grip { color: #555; }
.kt-dark .cl-item:hover .cl-grip { color: #888; }
.cl-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--widget-accent, #00d1b2);
}
.cl-text {
    font-size: 14px;
    color: #333;
    transition: color 0.2s, opacity 0.2s;
    text-align: left;
    word-break: break-word;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.cl-text.cl-editing {
    cursor: text;
    outline: 2px solid var(--widget-accent, #00d1b2);
    outline-offset: 1px;
    border-radius: 3px;
    background: rgba(0,0,0,0.02);
}
.cl-strikethrough {
    text-decoration: line-through;
    opacity: 0.5;
}
.cl-done .cl-text { color: #888; }
.cl-del {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    flex-shrink: 0;
    transition: all 0.15s;
}
.cl-item:hover .cl-del { opacity: 1; }
.cl-del:hover { color: #e74c3c; background: rgba(0,0,0,0.06); }
.cl-add-row {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}
.cl-add-input {
    flex: 1;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    background: transparent;
    color: inherit;
}
.cl-add-input:focus { border-color: var(--widget-accent, #00d1b2); }
.cl-add-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--widget-accent, #00d1b2);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cl-add-btn:hover { filter: brightness(0.9); }

.kt-dark .cl-title { color: #eee; }
.kt-dark .cl-text { color: #ddd; }
.kt-dark .cl-done .cl-text { color: #777; }
.kt-dark .cl-add-input { border-color: #555; color: #ddd; }
.kt-dark .cl-item:hover { background: rgba(255,255,255,0.04); }

/* ===== Counter Widget ===== */
.widget-counter .widget-content {
    padding: 2px 8px;
}
.cnt-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.widget-counter.no-bg {
    background: transparent !important;
    box-shadow: none !important;
}
.widget-counter.no-bg:hover {
    box-shadow: none !important;
}
.widget-counter.no-bg .cnt-content {
    padding-top: 0;
    padding-bottom: 0;
}
.widget-counter .cnt-label.is-hidden {
    display: none;
}
.cnt-label {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    text-align: center;
    margin-bottom: 2px;
    outline: none;
    min-height: 18px;
}
.cnt-label:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    pointer-events: none;
}
.cnt-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cnt-value {
    font-size: 56px;
    font-weight: 800;
    color: #00d1b2;
    min-width: 60px;
    text-align: center;
    line-height: 1;
    transition: transform 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cnt-value.cnt-bump {
    animation: cntBump 0.3s ease;
}
@keyframes cntBump {
    50% { transform: scale(1.2); }
}
.cnt-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}
.cnt-minus {
    background: #fee;
    color: #e74c3c;
}
.cnt-plus {
    background: #efe;
    color: #2ecc71;
}
.cnt-minus:hover { background: #fcc; transform: scale(1.1); }
.cnt-plus:hover { background: #cfc; transform: scale(1.1); }

.kt-dark .cnt-label { color: #aaa; }
.kt-dark .cnt-minus { background: #3a2020; }
.kt-dark .cnt-plus { background: #1a3a20; }
.kt-dark .cnt-minus:hover { background: #4a2525; }
.kt-dark .cnt-plus:hover { background: #254a25; }

/* ===== Weather Widget ===== */
.widget-weather .widget-content {
    padding: 4px;
}

.wth-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wth-loading {
    font-size: 24px;
    color: #aaa;
}
.wth-data {
    text-align: center;
    width: 100%;
}
.wth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 4px;
}
.wth-temp {
    font-size: 42px;
    font-weight: 800;
    color: #333;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.wth-icon {
    color: #f39c12;
}
.wth-desc {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 8px;
}
.wth-details {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
    color: #888;
}
.wth-details i {
    margin-right: 3px;
}
.wth-city-name {
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
}
.wth-error {
    text-align: center;
    color: #aaa;
    font-size: 14px;
}
.wth-error i {
    display: block;
    font-size: 24px;
    margin-bottom: 6px;
}

.kt-dark .wth-temp { color: #eee; }
.kt-dark .wth-desc { color: #ccc; }
.kt-dark .wth-details { color: #999; }
.kt-dark .wth-city-name { color: #666; }
.widget-weather.no-bg {
    background: transparent !important;
    box-shadow: none !important;
}
.widget-weather.no-bg:hover {
    box-shadow: none !important;
}


/* ===== Scoreboard Widget ===== */
.scoreboard-content {
    padding: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sb-teams {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 0;
    height: 100%;
}
.sb-team {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--team-color) 12%, white);
    border-radius: 10px;
    padding: 4px 4px 6px;
    border-bottom: 3px solid var(--team-color);
    overflow: hidden;
}
.sb-team-name {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-align: center;
    outline: none;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sb-score-row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}
.sb-score {
    font-size: 32px;
    font-weight: 800;
    color: var(--team-color);
    min-width: 30px;
    text-align: center;
    transition: transform 0.2s;
}
.sb-score.sb-score-bump {
    animation: sbBump 0.3s ease;
}
@keyframes sbBump {
    50% { transform: scale(1.3); }
}
.sb-minus, .sb-plus {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.15s;
}
.sb-minus {
    background: #fee;
    color: #e74c3c;
}
.sb-plus {
    background: #efe;
    color: #2ecc71;
}
.sb-minus:hover { background: #fcc; }
.sb-plus:hover { background: #cfc; }
.sb-winner-badge {
    font-size: 14px;
    margin-top: 2px;
    animation: sbWinPulse 1s ease infinite;
}
@keyframes sbWinPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.widget-scoreboard.no-bg {
    background: transparent !important;
    box-shadow: none !important;
}
.widget-scoreboard.no-bg:hover {
    box-shadow: none !important;
}

/* Scoreboard spotlight */
.widget-scoreboard.widget-spotlight .scoreboard-content {
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.widget-scoreboard.widget-spotlight .sb-teams {
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}
.widget-scoreboard.widget-spotlight .sb-team {
    padding: 8px 4px 12px;
    border-radius: 14px;
    border-bottom-width: 4px;
}
.widget-scoreboard.widget-spotlight .sb-score {
    min-width: 0;
    overflow: hidden;
    flex: 1;
}
.widget-scoreboard.widget-spotlight .sb-score-row {
    width: 100%;
    justify-content: center;
}
.widget-scoreboard.widget-spotlight .sb-minus,
.widget-scoreboard.widget-spotlight .sb-plus {
    flex-shrink: 0;
}

.kt-dark .sb-team { background: color-mix(in srgb, var(--team-color) 15%, #2a2a2a); }
.kt-dark .sb-team-name { color: #ccc; }
.kt-dark .sb-minus { background: #3a2020; }
.kt-dark .sb-plus { background: #1a3a20; }

/* ===== Ambient Sound Widget ===== */
.ambient-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.ambient-title {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    text-align: center;
    margin-bottom: 6px;
}
.ambient-channels {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ambient-ch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.ambient-ch i {
    width: 20px;
    text-align: center;
    color: #666;
    font-size: 13px;
}
.ambient-ch span {
    font-size: 12px;
    color: #555;
    width: 75px;
    flex-shrink: 0;
}
.ambient-vol {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
}
.ambient-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00d1b2;
    cursor: pointer;
}
.ambient-master {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}
.ambient-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--widget-accent, #00d1b2);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.ambient-play-btn:hover { filter: brightness(0.9); transform: scale(1.1); }

.widget-ambient {
    transition: box-shadow 0.2s ease, outline 0.15s ease, height 0.3s ease;
}
.ambient-ch-hidden {
    display: none;
}

.kt-dark .ambient-ch i { color: #aaa; }
.kt-dark .ambient-ch span { color: #ccc; }
.kt-dark .ambient-vol { background: #444; }

/* ===== Group Maker Widget ===== */
.gm-content {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gm-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
}
.gm-count-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #555;
}
.gm-count-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #555;
    transition: all 0.15s;
}
.gm-count-btn:hover { border-color: #00d1b2; color: #00d1b2; }
.gm-count-val {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    min-width: 30px;
    text-align: center;
}
.gm-generate-btn {
    padding: 10px 24px;
    border-radius: 10px;
    border: none;
    background: var(--widget-accent, #00d1b2);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.gm-generate-btn:hover { filter: brightness(0.9); transform: translateY(-1px); }
.gm-result {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: center;
}
.gm-group {
    flex: 1 1 120px;
    min-width: 100px;
    background: color-mix(in srgb, var(--gm-color) 10%, #fff);
    border-left: 3px solid var(--gm-color);
    border-radius: 8px;
    padding: 6px 8px;
}
.gm-group-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--gm-color);
    margin-bottom: 4px;
}
.gm-member-count {
    font-weight: 400;
    color: #999;
    font-size: 11px;
}
.gm-group-members {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.gm-member {
    font-size: 12px;
    background: rgba(255,255,255,0.8);
    padding: 2px 6px;
    border-radius: 4px;
    color: #333;
}
.gm-regenerate-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: #f0f4f8;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    margin-top: 6px;
    transition: opacity 0.15s, background 0.15s;
    opacity: 0;
    pointer-events: none;
}
.widget-selected .gm-regenerate-btn,
.widget-spotlight .gm-regenerate-btn {
    opacity: 1;
    pointer-events: auto;
}
.gm-regenerate-btn:hover { background: #e0e8f0; }

.gm-setup-hint {
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* No-bg mode */
.widget-group-maker.no-bg {
    background: transparent !important;
    box-shadow: none !important;
}
.widget-group-maker.no-bg:hover {
    box-shadow: none !important;
}
.widget-group-maker.no-bg .gm-setup { color: inherit; }
.widget-group-maker.no-bg .gm-regenerate-btn {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
}
.kt-dark .widget-group-maker.no-bg .gm-regenerate-btn {
    background: rgba(0,0,0,0.4);
}

/* Settings panel: group count row */
.settings-gm-count-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-gm-count-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #555;
    transition: all 0.15s;
}
.settings-gm-count-btn:hover { border-color: #00d1b2; color: #00d1b2; }
.settings-gm-count-val {
    font-size: 22px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}

/* Dark mode */
.kt-dark .gm-count-row { color: #ccc; }
.kt-dark .gm-count-val { color: #eee; }
.kt-dark .gm-count-btn { background: #333; border-color: #555; color: #ccc; }
.kt-dark .gm-count-btn:hover { border-color: #00d1b2; color: #00d1b2; }
.kt-dark .gm-generate-btn { background: #00b89c; }
.kt-dark .gm-generate-btn:hover { background: #00a389; }
.kt-dark .gm-group { background: color-mix(in srgb, var(--gm-color) 15%, #2a2a2a); }
.kt-dark .gm-member { background: rgba(0,0,0,0.3); color: #ddd; }
.kt-dark .gm-member-count { color: #777; }
.kt-dark .gm-regenerate-btn { background: #333; color: #ccc; }
.kt-dark .gm-regenerate-btn:hover { background: #3d3d3d; }
.kt-dark .gm-setup-hint { color: #777; }
.kt-dark .settings-gm-count-btn { background: #333; border-color: #555; color: #ccc; }
.kt-dark .settings-gm-count-btn:hover { border-color: #00d1b2; color: #00d1b2; }

/* Spotlight mode */
.widget-group-maker.widget-spotlight .gm-content {
    padding: 20px;
}
.widget-group-maker.widget-spotlight .gm-setup {
    gap: 20px;
}
.widget-group-maker.widget-spotlight .gm-count-row {
    font-size: 20px;
    gap: 14px;
}
.widget-group-maker.widget-spotlight .gm-count-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
}
.widget-group-maker.widget-spotlight .gm-count-val {
    font-size: 40px;
    min-width: 44px;
}
.widget-group-maker.widget-spotlight .gm-generate-btn {
    padding: 14px 36px;
    font-size: 18px;
    border-radius: 12px;
}
.widget-group-maker.widget-spotlight .gm-result {
    gap: 10px;
    padding: 4px;
}
.widget-group-maker.widget-spotlight .gm-group {
    flex: 1 1 180px;
    min-width: 140px;
    padding: 10px 14px;
    border-radius: 10px;
    border-left-width: 4px;
}
.widget-group-maker.widget-spotlight .gm-group-header {
    font-size: 16px;
    margin-bottom: 6px;
}
.widget-group-maker.widget-spotlight .gm-member-count {
    font-size: 14px;
}
.widget-group-maker.widget-spotlight .gm-group-members {
    gap: 5px;
}
.widget-group-maker.widget-spotlight .gm-member {
    font-size: 15px;
    padding: 4px 10px;
    border-radius: 6px;
}
.widget-group-maker.widget-spotlight .gm-regenerate-btn {
    padding: 12px;
    font-size: 16px;
    margin-top: 10px;
    border-radius: 10px;
}
.widget-group-maker.widget-spotlight .gm-setup-hint {
    font-size: 16px;
}

/* ===== Quick Poll Widget ===== */
.widget-quick-poll > .widget-content,
.widget-mood-meter > .widget-content {
    padding: 4px;
    justify-content: flex-start;
    align-items: stretch;
}
.qp-content {
    padding: 2px 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.qp-setup {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.qp-question-text {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 3px;
}
.qp-results-area {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.qp-option {
    display: flex;
    align-items: center;
    gap: 5px;
}
.qp-option-label {
    font-size: 13px;
    font-weight: 600;
    min-width: 24px;
    color: #444;
}
.qp-option-bar {
    flex: 1;
    height: 20px;
    background: #f0f0f0;
    border-radius: 6px;
    overflow: hidden;
}
.qp-option-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    min-width: 0;
}
.qp-option-count {
    font-size: 13px;
    font-weight: 700;
    min-width: 20px;
    text-align: right;
    color: #555;
}
.qp-join-info {
    text-align: center;
    padding: 3px 0;
    border-top: 1px solid #eee;
    margin-top: 3px;
}
.qp-code {
    font-size: 13px;
    font-weight: 700;
    color: #00d1b2;
    word-break: break-all;
}
.qp-count {
    font-size: 11px;
    color: #888;
    margin-top: 1px;
}
.qp-start-btn, .qp-stop-btn {
    padding: 7px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: auto;
    transition: all 0.15s;
}
.qp-start-btn {
    background: var(--widget-accent, #00d1b2);
    color: #fff;
}
.qp-start-btn:hover { filter: brightness(0.9); }
.qp-stop-btn {
    background: #e74c3c;
    color: #fff;
}
.qp-stop-btn:hover { background: #c0392b; }

.join-qr-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 14px;
    padding: 2px 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.join-qr-btn:hover { opacity: 1; }
.join-qr-overlay {
    position: absolute;
    inset: 0;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
}
.join-qr-overlay .join-qr-code {
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}
.kt-dark .join-qr-overlay {
    background: var(--bg-card, #2a2a2a);
}

.kt-dark .qp-question-text { color: #eee; }
.kt-dark .qp-option-label { color: #ccc; }
.kt-dark .qp-option-bar { background: #333; }
.kt-dark .qp-option-count { color: #ccc; }
.kt-dark .qp-join-info { border-color: #444; }

/* ===== Mood Meter Widget ===== */
.mm-content {
    padding: 2px 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mm-display {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.mm-bars {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    justify-content: center;
}
.mm-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    max-width: 55px;
    height: 100%;
    justify-content: flex-end;
}
.mm-emoji {
    font-size: 22px;
    order: -1;
}
.mm-bar-fill {
    width: 100%;
    border-radius: 6px 6px 0 0;
    transition: height 0.5s ease;
    min-height: 0;
}
.mm-bar[data-mood="great"] .mm-bar-fill { background: #2ecc71; }
.mm-bar[data-mood="good"] .mm-bar-fill { background: #87d37c; }
.mm-bar[data-mood="neutral"] .mm-bar-fill { background: #f39c12; }
.mm-bar[data-mood="bad"] .mm-bar-fill { background: #e67e22; }
.mm-bar[data-mood="terrible"] .mm-bar-fill { background: #e74c3c; }
.mm-bar-count {
    font-size: 12px;
    font-weight: 700;
    color: #555;
}
.mm-join-info {
    text-align: center;
    padding: 3px 0;
    border-top: 1px solid #eee;
    margin-top: 3px;
}
.mm-code {
    font-size: 13px;
    font-weight: 700;
    color: #00d1b2;
    word-break: break-all;
}
.mm-count {
    font-size: 11px;
    color: #888;
}
.mm-start-btn, .mm-stop-btn {
    padding: 7px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: auto;
    transition: all 0.15s;
}
.mm-start-btn { background: var(--widget-accent, #00d1b2); color: #fff; }
.mm-start-btn:hover { filter: brightness(0.9); }
.mm-stop-btn { background: #e74c3c; color: #fff; }
.mm-stop-btn:hover { background: #c0392b; }

.kt-dark .mm-bar-count { color: #ccc; }
.kt-dark .mm-join-info { border-color: #444; }

/* ===== Pomodoro Indicator ===== */
.pomodoro-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    font-size: 12px;
    flex-basis: 100%;
    order: 10;
    margin-top: -8px;
}
.pomo-phase {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pomo-work { background: #fee2e2; color: #dc2626; }
.pomo-shortBreak { background: #d1fae5; color: #059669; }
.pomo-longBreak { background: #dbeafe; color: #2563eb; }
.pomo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: transparent;
}
.pomo-dot.filled {
    background: #00d1b2;
    border-color: #00d1b2;
}

.kt-dark .pomo-work { background: #7f1d1d; color: #fca5a5; }
.kt-dark .pomo-shortBreak { background: #064e3b; color: #6ee7b7; }
.kt-dark .pomo-longBreak { background: #1e3a5f; color: #93c5fd; }
.kt-dark .pomo-dot { border-color: #555; }

/* ===== Slide Navigation ===== */
.slide-nav {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(240, 240, 245, 0.7);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    padding: 4px 5px;
    z-index: 1001;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: opacity 0.2s;
}

.slide-nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
}

.slide-nav-list:empty {
    display: none;
}

.slide-nav-arrow {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-nav-arrow:hover:not(.disabled) {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

.slide-nav-arrow.disabled {
    opacity: 0.25;
    cursor: default;
}

.slide-nav-current {
    width: 46px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.slide-nav-add {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: #777;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-nav-add:hover:not(.disabled) {
    color: #00d1b2;
    background: rgba(0, 209, 178, 0.15);
}

.slide-nav-add.disabled {
    opacity: 0.25;
    cursor: default;
    border-color: rgba(255, 255, 255, 0.15);
}

/* Slide context menu */
.slide-context-menu {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 6px;
    z-index: 100001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 140px;
}

.slide-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    color: #333;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.slide-ctx-item:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}

.slide-ctx-item.danger {
    color: #ff7878;
}

.slide-ctx-item.danger:hover {
    background: rgba(255, 80, 80, 0.15);
    color: #ff6b6b;
}

/* Hide slide nav during spotlight */
#app-container.spotlight-active .slide-nav {
    display: none;
}

/* Narrow screens: move slide nav above toolbar */
@media (max-width: 900px) {
    .slide-nav {
        bottom: auto;
        right: 50%;
        transform: translateX(50%);
        top: 14px;
    }
}

@media (max-width: 768px) {
    .slide-nav {
        padding: 3px 4px;
    }
    .slide-nav-arrow,
    .slide-nav-current,
    .slide-nav-add {
        width: 26px;
        height: 26px;
    }
    .slide-nav-current {
        width: 40px;
        font-size: 12px;
    }
}