:root {
    /* Base Named Colors with Variants */
    --brilliant-rose: #FA50A2; /* Base pink accent - only for errors and stars */
    --brilliant-rose-highlight: #FDB4D7; /* Highlight variant (+20% lightness) */
    --brilliant-rose-shade: #DF056F; /* Shade variant (-20% lightness) */

    --timberwolf: #C9C5BA; /* Base light neutral - primary for backgrounds, frames, fills */
    --timberwolf-highlight: #F6F5F3; /* Highlight variant (+20% lightness) */
    --timberwolf-shade: #9C9581; /* Shade variant (-20% lightness) */

    --cambridge-blue: #96B0A5; /* Base mid green-blue - secondary accent */
    --cambridge-blue-highlight: #D0DBD7; /* Highlight variant (+20% lightness) */
    --cambridge-blue-shade: #607F72; /* Shade variant (-20% lightness) */

    --air-force-blue: #688996; /* Base blue-gray - primary emphasis (titles etc.) */
    --air-force-blue-highlight: #A4B8C0; /* Highlight variant (+20% lightness) */
    --air-force-blue-shade: #3E525A; /* Shade variant (-20% lightness) */

    --caribbean-current: #407077; /* Base dark teal */
    --caribbean-current-highlight: #6DA8B0; /* Highlight variant (+20% lightness) */
    --caribbean-current-shade: #1C3235; /* Shade variant (-20% lightness) */

    /* Core KinPen System - Updated with timberwolf basis */
    --KinPenShine: var(--timberwolf-highlight); /* Highlights, shine edges */
    --KinPenHalfShine: var(--timberwolf); /* Half-shine for subtle highlights */
    --KinPenBackground: var(--timberwolf); /* Widget/list backgrounds - primary neutral */
    --KinPenHalfShadow: var(--timberwolf-shade); /* Half-shadow for subtle shading */
    --KinPenShadow: var(--caribbean-current); /* Shadows, shade edges */
    --KinPenText: #000000; /* Text color - black */
    --KinPenFill: var(--timberwolf-shade); /* Fill areas, selections - timberwolf variant */
    --KinPenMark: var(--cambridge-blue); /* Marks, cursors, emphasis lines - cambridge blue */

    --KinPenMenuBackground: var(--timberwolf-highlight); /* Menu backgrounds, lighter timberwolf */
    --KinPenMenuText: var(--air-force-blue); /* Menu text */
    --KinPenHighlightBackground: var(--cambridge-blue-shade); /* Highlight backgrounds - cambridge blue */
    --KinPenHighlightText: var(--caribbean-current-shade); /* Highlight text */

    /* UI Components: Layer (base canvas) */
    --KinPenLayerBackground: var(--timberwolf); /* Layer backgrounds - timberwolf basis */

    /* Frame (bevel borders) */
    --KinPenFrameShine: var(--timberwolf-highlight); /* Frame shine */
    --KinPenFrameShadow: var(--caribbean-current); /* Frame shadow */
    --KinPenFrameHalfShine: var(--timberwolf); /* Frame subtle shine */
    --KinPenFrameHalfShadow: var(--timberwolf-shade); /* Frame subtle shadow */

    /* Button (recessed/raised) */
    --KinPenButtonBackground: var(--timberwolf); /* Button idle bg - timberwolf */
    --KinPenButtonText: var(--air-force-blue); /* Button text */
    --KinPenButtonShine: var(--timberwolf-highlight); /* Button raised shine */
    --KinPenButtonShadow: var(--timberwolf-shade); /* Button pressed shadow */
    --KinPenButtonFill: var(--air-force-blue-highlight); /* Button active fill - air-force blue */

    /* Input (text fields) */
    --KinPenInputBackground: var(--timberwolf-shade); /* Input bg - timberwolf variant */
    --KinPenInputText: var(--air-force-blue); /* Input text */
    --KinPenInputBorderShine: var(--timberwolf); /* Input border shine */
    --KinPenInputBorderShadow: var(--timberwolf-shade); /* Input border shadow */
    --KinPenInputFocusMark: var(--cambridge-blue); /* Input focus outline - cambridge blue */

    /* Gadget (general) */
    --KinPenGadgetBackground: var(--timberwolf); /* Gadget bg - timberwolf */
    --KinPenGadgetText: var(--air-force-blue); /* Gadget labels */
    --KinPenGadgetShine: var(--timberwolf-highlight); /* Gadget highlight */
    --KinPenGadgetShadow: var(--timberwolf-shade); /* Gadget recess */

    /* Error (alerts) - pink only */
    --KinPenErrorText: var(--brilliant-rose-shade); /* Error text - pink */
    --KinPenErrorBackground: var(--brilliant-rose-highlight); /* Error bg - pink */
    --KinPenErrorBorderShine: var(--timberwolf); /* Error border shine */
    --KinPenErrorBorderShadow: var(--caribbean-current-shade); /* Error border shadow */

    /* Titlebar (special area with white background) */
    --KinPenTitlebarBackground: #FFFFFF; /* Titlebar bg - white */
    --KinPenTitlebarText: #000000; /* Titlebar text - black for contrast */
    --KinPenTitlebarShine: var(--air-force-blue-highlight); /* Titlebar shine */
    --KinPenTitlebarShadow: var(--air-force-blue-shade); /* Titlebar shadow */

    /* Symbols/Icons (pink for stars) */
    --KinPenSymbol: var(--brilliant-rose); /* Symbol color - pink for stars */

    /* Shadow variants */
    --KinPenShadowTransparent: rgba(28, 50, 53, 0.25); /* Half-transparent shadow for windows */

    /* KinOS glass / desktop (web workspace) */
    --kin-sky-mid: #c9d8ea;
    --kin-desktop-glow: radial-gradient(ellipse 130% 70% at 50% -15%, rgba(255, 255, 255, 0.75) 0%, transparent 52%);
    --kin-desktop-vignette: linear-gradient(
        165deg,
        rgba(232, 240, 248, 0.94) 0%,
        rgba(198, 214, 232, 0.88) 42%,
        rgba(208, 218, 230, 0.92) 100%
    );
    --kin-desktop-wallpaper-tint: linear-gradient(
        180deg,
        rgba(230, 240, 250, 0.55) 0%,
        rgba(200, 216, 232, 0.65) 100%
    );
    --kin-glass-blur: 12px;
    --kin-glass-fill: rgba(255, 255, 255, 0.42);
    --kin-glass-fill-strong: rgba(255, 255, 255, 0.52);
    --kin-glass-content: rgba(255, 255, 255, 0.38);
    --kin-window-background: #e8f1f7bf;
    --kin-glass-border: rgba(255, 255, 255, 0.42);
    --kin-glass-border-mute: rgba(255, 255, 255, 0.22);
    --kin-glass-border-active: rgba(164, 184, 192, 0.95);
    --kin-titlebar-frost: rgba(255, 255, 255, 0.58);
    --kin-titlebar-frost-active: rgba(255, 255, 255, 0.72);
    --kin-shell-titlebar-frost: rgba(255, 255, 255, 0.4);
    --kin-window-shadow: 0 10px 40px rgba(62, 82, 90, 0.14), 0 2px 12px rgba(28, 50, 53, 0.1);
    --kin-window-shadow-active: 0 12px 44px rgba(62, 82, 90, 0.2), 0 0 0 1px rgba(164, 184, 192, 0.5);
    --kin-scrollbar-thumb: rgba(104, 137, 150, 0.55);
    --kin-scrollbar-track: rgba(255, 255, 255, 0.12);

    /* Configurable values */
    --KinPenBorderRadius: 6px; /* Rounded corners for all rectangles */
    --KinPenBorderRadiusWindow: 11px; /* For windows — glass desktop */
    --KinPenBorderWidth: 1px; /* Maximum border width */

    /* Toolmanager dock — gap; insets reserve space for panels on each edge (JS) */
    --kin-tooldock-gap: 12px;
    --kin-tooldock-margin: 0px;
    --kin-tooldock-inset-top: 0px;
    --kin-tooldock-inset-right: 0px;
    --kin-tooldock-inset-bottom: 0px;
    --kin-tooldock-inset-left: 0px;
}

/* Kin UI component helpers — use theme tokens so components match the workspace
   Buttons: top highlight (KinPenButtonShine) + outer drop shadow (KinPenButtonShadow)
   Panels/Groups: inner highlight + inner shadow for rounded containers
*/
.kin-ui-button {
    background: var(--KinPenButtonBackground);
    color: var(--KinPenButtonText);
    border-radius: var(--KinPenBorderRadius);
    box-shadow: inset 0 1px 0 var(--KinPenButtonShine), 0 2px 8px var(--KinPenButtonShadow);
    border: var(--KinPenBorderWidth) solid transparent;
}
.kin-ui-button:hover {
    box-shadow: inset 0 1px 0 var(--KinPenButtonShine), 0 6px 18px var(--KinPenButtonShadow);
}
.kin-ui-button:active {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.18), 0 0 0 transparent;
}

.kin-ui-panel,
.kin-ui-group {
    background: var(--KinPenBackground);
    border-radius: var(--KinPenBorderRadius);
    border-top: var(--KinPenBorderWidth) solid var(--KinPenFrameShine);
    border-left: var(--KinPenBorderWidth) solid var(--KinPenFrameShine);
    border-bottom: var(--KinPenBorderWidth) solid var(--KinPenFrameHalfShadow);
    border-right: var(--KinPenBorderWidth) solid var(--KinPenFrameHalfShadow);
    box-shadow: inset 0 1px 0 var(--KinPenFrameShine), inset 0 -1px 0 var(--KinPenFrameHalfShadow), 0 6px 18px var(--KinPenShadowTransparent);
    padding: 8px;
}

/* Reusable action bar for apps: place this element outside any scrollable area so buttons stay visible */
.kin-action-bar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    padding: 8px;
    flex-shrink: 0; /* do not collapse when parent flex container shrinks */
    border-top: var(--KinPenBorderWidth) solid var(--KinPenFrameHalfShadow);
    background: transparent;
}

/* Dark glass workspace (Amiga-inspired cinematic UI) */
:root[data-kin-workspace-theme="dark-glass"] {
    --KinPenShine: #3d4a58;
    --KinPenHalfShine: #2a3440;
    --KinPenBackground: #1e252d;
    --KinPenHalfShadow: #151a20;
    --KinPenShadow: #0a0c10;
    --KinPenText: #e8edf2;
    --KinPenFill: #2a3440;
    --KinPenMark: #6da8b0;

    --KinPenMenuBackground: rgba(30, 38, 48, 0.94);
    --KinPenMenuText: #c8d4e0;
    --KinPenHighlightBackground: #3a4a58;
    --KinPenHighlightText: #e8edf2;

    --KinPenLayerBackground: #12161c;

    --KinPenFrameShine: #4a5c6e;
    --KinPenFrameShadow: #0d1014;
    --KinPenFrameHalfShine: #2d3844;
    --KinPenFrameHalfShadow: #1a2028;

    --KinPenButtonBackground: #2d3848;
    --KinPenButtonText: #e8edf2;
    --KinPenButtonShine: #455a6e;
    --KinPenButtonShadow: #121820;
    --KinPenButtonFill: #3d5a68;

    --KinPenInputBackground: #151b22;
    --KinPenInputText: #e0e8f0;
    --KinPenInputBorderShine: #3a4552;
    --KinPenInputBorderShadow: #0d1116;
    --KinPenInputFocusMark: #7ec8e8;

    --KinPenGadgetBackground: #252d38;
    --KinPenGadgetText: #b8c8d8;

    --KinPenErrorText: #ffb8d4;
    --KinPenErrorBackground: rgba(80, 24, 48, 0.55);
    --KinPenErrorBorderShine: #5a4050;
    --KinPenErrorBorderShadow: #301018;

    --KinPenTitlebarBackground: rgba(28, 36, 46, 0.75);
    --KinPenTitlebarText: #e8edf2;
    --KinPenTitlebarShine: #5a6e82;
    --KinPenTitlebarShadow: #0d1218;

    --KinPenSymbol: #ff6b9d;
    --KinPenShadowTransparent: rgba(0, 0, 0, 0.45);

    --kin-sky-mid: #121820;
    --kin-desktop-glow: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(100, 140, 180, 0.12) 0%, transparent 55%);
    --kin-desktop-vignette: linear-gradient(
        165deg,
        rgba(18, 24, 32, 0.92) 0%,
        rgba(14, 18, 26, 0.96) 45%,
        rgba(16, 22, 30, 0.94) 100%
    );
    --kin-desktop-wallpaper-tint: linear-gradient(
        180deg,
        rgba(20, 28, 40, 0.45) 0%,
        rgba(10, 14, 22, 0.72) 100%
    );
    --kin-glass-blur: 16px;
    --kin-glass-fill: rgba(22, 30, 42, 0.55);
    --kin-glass-fill-strong: rgba(28, 38, 52, 0.62);
    --kin-glass-content: rgba(18, 26, 36, 0.5);
    --kin-window-background: rgba(17, 24, 34, 0.8);
    --kin-glass-border: rgba(140, 170, 200, 0.28);
    --kin-glass-border-mute: rgba(100, 130, 160, 0.18);
    --kin-glass-border-active: rgba(160, 200, 230, 0.55);
    --kin-titlebar-frost: rgba(24, 32, 44, 0.65);
    --kin-titlebar-frost-active: rgba(32, 42, 56, 0.78);
    --kin-shell-titlebar-frost: rgba(20, 28, 40, 0.55);
    --kin-window-shadow:
        inset 0 1px 0 rgba(200, 220, 240, 0.14),
        inset 1px 0 0 rgba(200, 220, 240, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 10px 28px rgba(0, 0, 0, 0.5),
        0 24px 64px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.4);
    --kin-window-shadow-active:
        inset 0 1px 0 rgba(220, 235, 255, 0.2),
        inset 1px 0 0 rgba(200, 220, 240, 0.1),
        0 0 0 1px rgba(140, 180, 220, 0.35),
        0 0 32px rgba(100, 160, 220, 0.14),
        0 14px 40px rgba(0, 0, 0, 0.55),
        0 28px 72px rgba(0, 0, 0, 0.58),
        0 6px 16px rgba(0, 0, 0, 0.45);
    --kin-scrollbar-thumb: rgba(120, 150, 180, 0.45);
    --kin-scrollbar-track: rgba(255, 255, 255, 0.06);
}

:root[data-kin-workspace-theme="dark-glass"] .ScreenTitlebar > .ScreenTitle {
    color: #c8d8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82), 0 0 1px rgba(0, 0, 0, 0.65);
}

:root[data-kin-workspace-theme="dark-glass"] .ScreenGadget {
    color: #a8b8c8;
}

:root[data-kin-workspace-theme="dark-glass"] .ScreenKeyboardGadget {
    color: #a8b8c8;
}

:root[data-kin-workspace-theme="dark-glass"] .ScreenKeyboardGadget--active {
    color: #7dcea0;
    border-color: rgba(100, 200, 140, 0.45);
    background: rgba(80, 180, 120, 0.15);
}

:root[data-kin-workspace-theme="dark-glass"] .WindowTitlebar {
    color: #d0dce8;
    box-shadow: 0 1px 0 rgba(160, 200, 230, 0.12) inset;
}

:root[data-kin-workspace-theme="dark-glass"] .WindowTitleArea {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88), 0 0 1px rgba(0, 0, 0, 0.7);
}

:root[data-kin-workspace-theme="dark-glass"] .Window.active .WindowTitlebar {
    color: #e8f0f8;
}

:root[data-kin-workspace-theme="dark-glass"] .WindowCloseGadget {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 82, 76, 0.85);
    border-color: rgba(180, 50, 48, 0.9);
}

:root[data-kin-workspace-theme="dark-glass"] .WindowCloseGadget:hover {
    background: rgba(255, 110, 104, 0.95);
    border-color: rgba(255, 140, 130, 0.85);
}

:root[data-kin-workspace-theme="dark-glass"] .WindowCloseGadgetInner {
    background: rgba(40, 12, 10, 0.85);
    width: 7px;
    height: 5px;
}

:root[data-kin-workspace-theme="dark-glass"] .WindowBottomBar {
    background: rgba(16, 22, 32, 0.45);
    border-top-color: var(--kin-glass-border-mute);
}

:root[data-kin-workspace-theme="dark-glass"] .WindowResizeGadget {
    filter: invert(0.85) brightness(1.1);
}

:root[data-kin-workspace-theme="dark-glass"] .WindowGadget {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 20px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    border: 1px solid;
    border-color: rgba(180, 200, 220, 0.35) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.55) rgba(180, 200, 220, 0.22);
    background: linear-gradient(180deg, #4a5a6e 0%, #2f3a48 45%, #252d38 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 4px rgba(0, 0, 0, 0.35);
    color: #e8f0f8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

:root[data-kin-workspace-theme="dark-glass"] .WindowGadget:hover {
    filter: brightness(1.12);
}

:root[data-kin-workspace-theme="dark-glass"] .WindowGadget:active {
    border-color: rgba(0, 0, 0, 0.55) rgba(180, 200, 220, 0.25) rgba(180, 200, 220, 0.2) rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

:root[data-kin-workspace-theme="dark-glass"] .WindowGadgetGlyph {
    font-size: 11px;
    opacity: 0.95;
    pointer-events: none;
}

:root[data-kin-workspace-theme="dark-glass"] .Window--zoomed .WindowZoomGadget {
    background: linear-gradient(180deg, #5a6a7e 0%, #3d4a58 50%, #2a3440 100%);
}

/* --- GTK-aligned workspace themes (embed / Linux app menu) — ids match gtk-theme-name --- */

:root[data-kin-workspace-theme="Adwaita"] {
    --KinPenShine: #ffffff;
    --KinPenHalfShine: #f6f5f4;
    --KinPenBackground: #f6f5f4;
    --KinPenHalfShadow: #deddda;
    --KinPenShadow: #c0bfbc;
    --KinPenText: #2e3436;
    --KinPenFill: #deddda;
    --KinPenMark: #3584e7;

    --KinPenMenuBackground: #ffffff;
    --KinPenMenuText: #2e3436;
    --KinPenHighlightBackground: #3584e7;
    --KinPenHighlightText: #ffffff;

    --KinPenLayerBackground: #ebebeb;

    --KinPenFrameShine: #ffffff;
    --KinPenFrameShadow: #c0bfbc;
    --KinPenFrameHalfShine: #f6f5f4;
    --KinPenFrameHalfShadow: #deddda;

    --KinPenButtonBackground: #f6f5f4;
    --KinPenButtonText: #2e3436;
    --KinPenButtonShine: #ffffff;
    --KinPenButtonShadow: #c0bfbc;
    --KinPenButtonFill: #3584e7;

    --KinPenInputBackground: #ffffff;
    --KinPenInputText: #2e3436;
    --KinPenInputBorderShine: #ffffff;
    --KinPenInputBorderShadow: #c0bfbc;
    --KinPenInputFocusMark: #3584e7;

    --KinPenGadgetBackground: #f6f5f4;
    --KinPenGadgetText: #2e3436;
    --KinPenGadgetShine: #ffffff;
    --KinPenGadgetShadow: #deddda;

    --KinPenErrorText: #c01c28;
    --KinPenErrorBackground: #ffdeda;
    --KinPenErrorBorderShine: #ffffff;
    --KinPenErrorBorderShadow: #c0bfbc;

    --KinPenTitlebarBackground: #ebebeb;
    --KinPenTitlebarText: #2e3436;
    --KinPenTitlebarShine: #ffffff;
    --KinPenTitlebarShadow: #c0bfbc;

    --KinPenSymbol: #3584e7;
    --KinPenShadowTransparent: rgba(46, 52, 54, 0.2);

    --kin-sky-mid: #d6d6d4;
    --kin-desktop-glow: radial-gradient(ellipse 130% 70% at 50% -15%, rgba(255, 255, 255, 0.85) 0%, transparent 52%);
    --kin-desktop-vignette: linear-gradient(165deg, rgba(246, 245, 244, 0.98) 0%, rgba(235, 235, 233, 0.95) 100%);
    --kin-desktop-wallpaper-tint: linear-gradient(180deg, rgba(246, 245, 244, 0.7) 0%, rgba(222, 221, 218, 0.85) 100%);
    --kin-glass-blur: 10px;
    --kin-glass-fill: rgba(255, 255, 255, 0.72);
    --kin-glass-fill-strong: rgba(255, 255, 255, 0.88);
    --kin-glass-content: rgba(255, 255, 255, 0.82);
    --kin-window-background: rgba(250, 250, 249, 0.92);
    --kin-glass-border: rgba(192, 191, 188, 0.65);
    --kin-glass-border-mute: rgba(192, 191, 188, 0.35);
    --kin-glass-border-active: rgba(53, 132, 231, 0.55);
    --kin-titlebar-frost: rgba(235, 235, 233, 0.92);
    --kin-titlebar-frost-active: rgba(255, 255, 255, 0.95);
    --kin-shell-titlebar-frost: rgba(235, 235, 233, 0.88);
    --kin-window-shadow: 0 8px 32px rgba(46, 52, 54, 0.12), 0 1px 3px rgba(46, 52, 54, 0.08);
    --kin-window-shadow-active: 0 8px 36px rgba(46, 52, 54, 0.16), 0 0 0 1px rgba(53, 132, 231, 0.35);
    --kin-scrollbar-thumb: rgba(46, 52, 54, 0.35);
    --kin-scrollbar-track: rgba(246, 245, 244, 0.5);

    --KinPenBorderRadius: 8px;
    --KinPenBorderRadiusWindow: 12px;
}

:root[data-kin-workspace-theme="Adwaita-dark"] {
    --KinPenShine: #3d3846;
    --KinPenHalfShine: #353535;
    --KinPenBackground: #242424;
    --KinPenHalfShadow: #1e1e1e;
    --KinPenShadow: #141414;
    --KinPenText: #eeeeec;
    --KinPenFill: #303030;
    --KinPenMark: #78aeed;

    --KinPenMenuBackground: #2d2d2d;
    --KinPenMenuText: #eeeeec;
    --KinPenHighlightBackground: #3584e7;
    --KinPenHighlightText: #ffffff;

    --KinPenLayerBackground: #1e1e1e;

    --KinPenFrameShine: #3d3d3d;
    --KinPenFrameShadow: #0d0d0d;
    --KinPenFrameHalfShine: #303030;
    --KinPenFrameHalfShadow: #1a1a1a;

    --KinPenButtonBackground: #353535;
    --KinPenButtonText: #eeeeec;
    --KinPenButtonShine: #454545;
    --KinPenButtonShadow: #141414;
    --KinPenButtonFill: #3584e7;

    --KinPenInputBackground: #1e1e1e;
    --KinPenInputText: #eeeeec;
    --KinPenInputBorderShine: #3d3d3d;
    --KinPenInputBorderShadow: #0d0d0d;
    --KinPenInputFocusMark: #78aeed;

    --KinPenGadgetBackground: #303030;
    --KinPenGadgetText: #d0d0d0;
    --KinPenGadgetShine: #404040;
    --KinPenGadgetShadow: #141414;

    --KinPenErrorText: #ff7b63;
    --KinPenErrorBackground: rgba(90, 32, 32, 0.55);
    --KinPenErrorBorderShine: #5a3030;
    --KinPenErrorBorderShadow: #1a1010;

    --KinPenTitlebarBackground: #303030;
    --KinPenTitlebarText: #eeeeec;
    --KinPenTitlebarShine: #454545;
    --KinPenTitlebarShadow: #141414;

    --KinPenSymbol: #78aeed;
    --KinPenShadowTransparent: rgba(0, 0, 0, 0.45);

    --kin-sky-mid: #1a1a1a;
    --kin-desktop-glow: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(120, 174, 237, 0.08) 0%, transparent 55%);
    --kin-desktop-vignette: linear-gradient(165deg, rgba(30, 30, 30, 0.96) 0%, rgba(20, 20, 20, 0.98) 100%);
    --kin-desktop-wallpaper-tint: linear-gradient(180deg, rgba(36, 36, 36, 0.55) 0%, rgba(14, 14, 14, 0.85) 100%);
    --kin-glass-blur: 14px;
    --kin-glass-fill: rgba(36, 36, 36, 0.72);
    --kin-glass-fill-strong: rgba(48, 48, 48, 0.82);
    --kin-glass-content: rgba(30, 30, 30, 0.78);
    --kin-window-background: rgba(30, 30, 30, 0.88);
    --kin-glass-border: rgba(255, 255, 255, 0.12);
    --kin-glass-border-mute: rgba(255, 255, 255, 0.06);
    --kin-glass-border-active: rgba(120, 174, 237, 0.45);
    --kin-titlebar-frost: rgba(48, 48, 48, 0.88);
    --kin-titlebar-frost-active: rgba(58, 58, 58, 0.92);
    --kin-shell-titlebar-frost: rgba(40, 40, 40, 0.85);
    --kin-window-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --kin-window-shadow-active: 0 12px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(120, 174, 237, 0.25);
    --kin-scrollbar-thumb: rgba(238, 238, 236, 0.35);
    --kin-scrollbar-track: rgba(255, 255, 255, 0.05);

    --KinPenBorderRadius: 8px;
    --KinPenBorderRadiusWindow: 12px;
}

:root[data-kin-workspace-theme="Yaru"] {
    --KinPenShine: #fdfdfd;
    --KinPenHalfShine: #f7f7f7;
    --KinPenBackground: #f7f7f7;
    --KinPenHalfShadow: #d9d9d9;
    --KinPenShadow: #b0b0b0;
    --KinPenText: #111111;
    --KinPenFill: #e8e8e8;
    --KinPenMark: #109a26;

    --KinPenMenuBackground: #ffffff;
    --KinPenMenuText: #111111;
    --KinPenHighlightBackground: #109a26;
    --KinPenHighlightText: #ffffff;

    --KinPenLayerBackground: #ebebeb;

    --KinPenFrameShine: #ffffff;
    --KinPenFrameShadow: #b0b0b0;
    --KinPenFrameHalfShine: #f7f7f7;
    --KinPenFrameHalfShadow: #d9d9d9;

    --KinPenButtonBackground: #f7f7f7;
    --KinPenButtonText: #111111;
    --KinPenButtonShine: #ffffff;
    --KinPenButtonShadow: #c8c8c8;
    --KinPenButtonFill: #109a26;

    --KinPenInputBackground: #ffffff;
    --KinPenInputText: #111111;
    --KinPenInputBorderShine: #ffffff;
    --KinPenInputBorderShadow: #b0b0b0;
    --KinPenInputFocusMark: #109a26;

    --KinPenGadgetBackground: #f0f0f0;
    --KinPenGadgetText: #3d3d3d;
    --KinPenGadgetShine: #ffffff;
    --KinPenGadgetShadow: #d9d9d9;

    --KinPenErrorText: #c7162b;
    --KinPenErrorBackground: #fbe9eb;
    --KinPenErrorBorderShine: #ffffff;
    --KinPenErrorBorderShadow: #b0b0b0;

    --KinPenTitlebarBackground: #e6e6e6;
    --KinPenTitlebarText: #111111;
    --KinPenTitlebarShine: #f7f7f7;
    --KinPenTitlebarShadow: #b0b0b0;

    --KinPenSymbol: #109a26;
    --KinPenShadowTransparent: rgba(17, 17, 17, 0.18);

    --kin-sky-mid: #d0d0d0;
    --kin-desktop-glow: radial-gradient(ellipse 130% 70% at 50% -15%, rgba(255, 255, 255, 0.9) 0%, transparent 52%);
    --kin-desktop-vignette: linear-gradient(165deg, rgba(247, 247, 247, 0.98) 0%, rgba(230, 230, 230, 0.96) 100%);
    --kin-desktop-wallpaper-tint: linear-gradient(180deg, rgba(247, 247, 247, 0.75) 0%, rgba(220, 220, 220, 0.88) 100%);
    --kin-glass-blur: 10px;
    --kin-glass-fill: rgba(255, 255, 255, 0.75);
    --kin-glass-fill-strong: rgba(255, 255, 255, 0.9);
    --kin-glass-content: rgba(255, 255, 255, 0.85);
    --kin-window-background: rgba(247, 247, 247, 0.92);
    --kin-glass-border: rgba(176, 176, 176, 0.5);
    --kin-glass-border-mute: rgba(176, 176, 176, 0.28);
    --kin-glass-border-active: rgba(16, 154, 38, 0.45);
    --kin-titlebar-frost: rgba(230, 230, 230, 0.94);
    --kin-titlebar-frost-active: rgba(255, 255, 255, 0.96);
    --kin-shell-titlebar-frost: rgba(230, 230, 230, 0.9);
    --kin-window-shadow: 0 8px 32px rgba(17, 17, 17, 0.12), 0 1px 3px rgba(17, 17, 17, 0.1);
    --kin-window-shadow-active: 0 8px 36px rgba(17, 17, 17, 0.16), 0 0 0 1px rgba(16, 154, 38, 0.35);
    --kin-scrollbar-thumb: rgba(17, 17, 17, 0.32);
    --kin-scrollbar-track: rgba(247, 247, 247, 0.45);

    --KinPenBorderRadius: 6px;
    --KinPenBorderRadiusWindow: 10px;
}

:root[data-kin-workspace-theme="Yaru-dark"] {
    --KinPenShine: #3d3d3d;
    --KinPenHalfShine: #333333;
    --KinPenBackground: #2b2b2b;
    --KinPenHalfShadow: #252525;
    --KinPenShadow: #181818;
    --KinPenText: #f7f7f7;
    --KinPenFill: #353535;
    --KinPenMark: #19a354;

    --KinPenMenuBackground: #333333;
    --KinPenMenuText: #f7f7f7;
    --KinPenHighlightBackground: #19a354;
    --KinPenHighlightText: #ffffff;

    --KinPenLayerBackground: #242424;

    --KinPenFrameShine: #404040;
    --KinPenFrameShadow: #121212;
    --KinPenFrameHalfShine: #353535;
    --KinPenFrameHalfShadow: #222222;

    --KinPenButtonBackground: #333333;
    --KinPenButtonText: #f7f7f7;
    --KinPenButtonShine: #454545;
    --KinPenButtonShadow: #141414;
    --KinPenButtonFill: #19a354;

    --KinPenInputBackground: #242424;
    --KinPenInputText: #f7f7f7;
    --KinPenInputBorderShine: #404040;
    --KinPenInputBorderShadow: #121212;
    --KinPenInputFocusMark: #19a354;

    --KinPenGadgetBackground: #303030;
    --KinPenGadgetText: #d0d0d0;
    --KinPenGadgetShine: #404040;
    --KinPenGadgetShadow: #1a1a1a;

    --KinPenErrorText: #f89b9b;
    --KinPenErrorBackground: rgba(80, 32, 32, 0.5);
    --KinPenErrorBorderShine: #503030;
    --KinPenErrorBorderShadow: #201010;

    --KinPenTitlebarBackground: #303030;
    --KinPenTitlebarText: #f7f7f7;
    --KinPenTitlebarShine: #454545;
    --KinPenTitlebarShadow: #141414;

    --KinPenSymbol: #19a354;
    --KinPenShadowTransparent: rgba(0, 0, 0, 0.42);

    --kin-sky-mid: #1c1c1c;
    --kin-desktop-glow: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(25, 163, 84, 0.1) 0%, transparent 55%);
    --kin-desktop-vignette: linear-gradient(165deg, rgba(36, 36, 36, 0.96) 0%, rgba(20, 20, 20, 0.98) 100%);
    --kin-desktop-wallpaper-tint: linear-gradient(180deg, rgba(43, 43, 43, 0.6) 0%, rgba(18, 18, 18, 0.88) 100%);
    --kin-glass-blur: 14px;
    --kin-glass-fill: rgba(43, 43, 43, 0.75);
    --kin-glass-fill-strong: rgba(51, 51, 51, 0.85);
    --kin-glass-content: rgba(36, 36, 36, 0.8);
    --kin-window-background: rgba(36, 36, 36, 0.9);
    --kin-glass-border: rgba(255, 255, 255, 0.1);
    --kin-glass-border-mute: rgba(255, 255, 255, 0.05);
    --kin-glass-border-active: rgba(25, 163, 84, 0.4);
    --kin-titlebar-frost: rgba(48, 48, 48, 0.9);
    --kin-titlebar-frost-active: rgba(56, 56, 56, 0.94);
    --kin-shell-titlebar-frost: rgba(44, 44, 44, 0.88);
    --kin-window-shadow: 0 10px 40px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --kin-window-shadow-active: 0 12px 44px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(25, 163, 84, 0.28);
    --kin-scrollbar-thumb: rgba(247, 247, 247, 0.32);
    --kin-scrollbar-track: rgba(255, 255, 255, 0.04);

    --KinPenBorderRadius: 6px;
    --KinPenBorderRadiusWindow: 10px;
}

:root[data-kin-workspace-theme="Breeze"] {
    --KinPenShine: #fcfcfc;
    --KinPenHalfShine: #eff0f1;
    --KinPenBackground: #eff0f1;
    --KinPenHalfShadow: #bdc3c7;
    --KinPenShadow: #909396;
    --KinPenText: #232629;
    --KinPenFill: #dae0e3;
    --KinPenMark: #3daee9;

    --KinPenMenuBackground: #fcfcfc;
    --KinPenMenuText: #232629;
    --KinPenHighlightBackground: #3daee9;
    --KinPenHighlightText: #fcfcfc;

    --KinPenLayerBackground: #e3e5e7;

    --KinPenFrameShine: #fcfcfc;
    --KinPenFrameShadow: #a0a4a8;
    --KinPenFrameHalfShine: #eff0f1;
    --KinPenFrameHalfShadow: #bdc3c7;

    --KinPenButtonBackground: #eff0f1;
    --KinPenButtonText: #232629;
    --KinPenButtonShine: #fcfcfc;
    --KinPenButtonShadow: #bdc3c7;
    --KinPenButtonFill: #3daee9;

    --KinPenInputBackground: #fcfcfc;
    --KinPenInputText: #232629;
    --KinPenInputBorderShine: #fcfcfc;
    --KinPenInputBorderShadow: #a0a4a8;
    --KinPenInputFocusMark: #3daee9;

    --KinPenGadgetBackground: #e8eaec;
    --KinPenGadgetText: #31363b;
    --KinPenGadgetShine: #fcfcfc;
    --KinPenGadgetShadow: #bdc3c7;

    --KinPenErrorText: #da4453;
    --KinPenErrorBackground: #fce4e6;
    --KinPenErrorBorderShine: #fcfcfc;
    --KinPenErrorBorderShadow: #a0a4a8;

    --KinPenTitlebarBackground: #dee1e4;
    --KinPenTitlebarText: #232629;
    --KinPenTitlebarShine: #eff0f1;
    --KinPenTitlebarShadow: #909396;

    --KinPenSymbol: #3daee9;
    --KinPenShadowTransparent: rgba(35, 38, 41, 0.2);

    --kin-sky-mid: #c8cdd1;
    --kin-desktop-glow: radial-gradient(ellipse 130% 70% at 50% -15%, rgba(255, 255, 255, 0.88) 0%, transparent 52%);
    --kin-desktop-vignette: linear-gradient(165deg, rgba(239, 240, 241, 0.98) 0%, rgba(222, 225, 228, 0.96) 100%);
    --kin-desktop-wallpaper-tint: linear-gradient(180deg, rgba(239, 240, 241, 0.72) 0%, rgba(200, 205, 210, 0.88) 100%);
    --kin-glass-blur: 10px;
    --kin-glass-fill: rgba(252, 252, 252, 0.78);
    --kin-glass-fill-strong: rgba(252, 252, 252, 0.92);
    --kin-glass-content: rgba(252, 252, 252, 0.86);
    --kin-window-background: rgba(239, 240, 241, 0.93);
    --kin-glass-border: rgba(144, 147, 150, 0.45);
    --kin-glass-border-mute: rgba(144, 147, 150, 0.25);
    --kin-glass-border-active: rgba(61, 174, 233, 0.5);
    --kin-titlebar-frost: rgba(222, 225, 228, 0.92);
    --kin-titlebar-frost-active: rgba(239, 240, 241, 0.96);
    --kin-shell-titlebar-frost: rgba(227, 229, 231, 0.9);
    --kin-window-shadow: 0 8px 32px rgba(35, 38, 41, 0.12), 0 1px 3px rgba(35, 38, 41, 0.1);
    --kin-window-shadow-active: 0 8px 36px rgba(35, 38, 41, 0.16), 0 0 0 1px rgba(61, 174, 233, 0.4);
    --kin-scrollbar-thumb: rgba(35, 38, 41, 0.35);
    --kin-scrollbar-track: rgba(239, 240, 241, 0.5);

    --KinPenBorderRadius: 4px;
    --KinPenBorderRadiusWindow: 8px;
}

:root[data-kin-workspace-theme="Breeze-Dark"] {
    --KinPenShine: #3e4247;
    --KinPenHalfShine: #383c41;
    --KinPenBackground: #31363b;
    --KinPenHalfShadow: #2a2e32;
    --KinPenShadow: #1a1d21;
    --KinPenText: #eff0f1;
    --KinPenFill: #3a3f44;
    --KinPenMark: #3daee9;

    --KinPenMenuBackground: #383c41;
    --KinPenMenuText: #eff0f1;
    --KinPenHighlightBackground: #3daee9;
    --KinPenHighlightText: #fcfcfc;

    --KinPenLayerBackground: #2a2e32;

    --KinPenFrameShine: #45494e;
    --KinPenFrameShadow: #141619;
    --KinPenFrameHalfShine: #383c41;
    --KinPenFrameHalfShadow: #25292d;

    --KinPenButtonBackground: #383c41;
    --KinPenButtonText: #eff0f1;
    --KinPenButtonShine: #4a4f55;
    --KinPenButtonShadow: #141619;
    --KinPenButtonFill: #3daee9;

    --KinPenInputBackground: #2a2e32;
    --KinPenInputText: #eff0f1;
    --KinPenInputBorderShine: #45494e;
    --KinPenInputBorderShadow: #141619;
    --KinPenInputFocusMark: #3daee9;

    --KinPenGadgetBackground: #35393e;
    --KinPenGadgetText: #c8cdd1;
    --KinPenGadgetShine: #45494e;
    --KinPenGadgetShadow: #1c1f24;

    --KinPenErrorText: #f47777;
    --KinPenErrorBackground: rgba(70, 32, 32, 0.55);
    --KinPenErrorBorderShine: #503838;
    --KinPenErrorBorderShadow: #201010;

    --KinPenTitlebarBackground: #35393e;
    --KinPenTitlebarText: #eff0f1;
    --KinPenTitlebarShine: #4a4f55;
    --KinPenTitlebarShadow: #141619;

    --KinPenSymbol: #3daee9;
    --KinPenShadowTransparent: rgba(0, 0, 0, 0.45);

    --kin-sky-mid: #232629;
    --kin-desktop-glow: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(61, 174, 233, 0.12) 0%, transparent 55%);
    --kin-desktop-vignette: linear-gradient(165deg, rgba(42, 46, 50, 0.97) 0%, rgba(26, 29, 33, 0.99) 100%);
    --kin-desktop-wallpaper-tint: linear-gradient(180deg, rgba(49, 54, 59, 0.65) 0%, rgba(22, 24, 28, 0.9) 100%);
    --kin-glass-blur: 14px;
    --kin-glass-fill: rgba(49, 54, 59, 0.78);
    --kin-glass-fill-strong: rgba(56, 60, 65, 0.88);
    --kin-glass-content: rgba(42, 46, 50, 0.82);
    --kin-window-background: rgba(42, 46, 50, 0.92);
    --kin-glass-border: rgba(239, 240, 241, 0.1);
    --kin-glass-border-mute: rgba(239, 240, 241, 0.05);
    --kin-glass-border-active: rgba(61, 174, 233, 0.45);
    --kin-titlebar-frost: rgba(53, 57, 62, 0.9);
    --kin-titlebar-frost-active: rgba(62, 66, 71, 0.94);
    --kin-shell-titlebar-frost: rgba(49, 54, 59, 0.88);
    --kin-window-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(239, 240, 241, 0.06);
    --kin-window-shadow-active: 0 12px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(61, 174, 233, 0.3);
    --kin-scrollbar-thumb: rgba(239, 240, 241, 0.32);
    --kin-scrollbar-track: rgba(255, 255, 255, 0.04);

    --KinPenBorderRadius: 4px;
    --KinPenBorderRadiusWindow: 8px;
}

@font-face {
    font-family: 'Maven Pro';
    src: url('/assets/MavenPro-VariableFont_wght.ttf') format('truetype');
}

html * {
    font-family: 'Maven Pro', sans-serif;
    font-size: 15px;
    color: var(--KinPenText);
    box-sizing: border-box;
}

/* GNOME/GTK embed themes: prefer Cantarell like host shell */
:root[data-kin-workspace-theme="Adwaita"] html *,
:root[data-kin-workspace-theme="Adwaita-dark"] html *,
:root[data-kin-workspace-theme="Yaru"] html *,
:root[data-kin-workspace-theme="Yaru-dark"] html *,
:root[data-kin-workspace-theme="Breeze"] html *,
:root[data-kin-workspace-theme="Breeze-Dark"] html * {
    font-family: Cantarell, 'Maven Pro', system-ui, sans-serif;
}