/* ============================================================
   GAPIFY UI — CONSOLIDATED STYLES
   Single source of truth for all UI styling.
   Compiled to dist/tailwind.css via:  npm run tw:build
   Watched for changes via:            npm run tw:watch

   Do NOT edit dist/tailwind.css directly — it is generated.
   All CSS changes belong in this file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;


/* ============================================================
   CSS VARIABLE FALLBACKS
   The real values are injected at runtime by customerconfig.js.
   These fallbacks ensure the UI renders correctly before JS runs.
   ============================================================ */
:root {
    --brand-red:    #E63946;
    --brand-orange: #FF6F00;
    --brand-yellow: #FFD700;
    --brand-blue:   #1E88E5;
    --brand-teal:   #009688;

    --main-green:  #31a574;
    --main-black:  #131313;

    --top-text-color:     #ffffff;
    --tab-active-text:    #ffffff;
    --tab-inactive-text:  rgba(255,255,255,0.95);

    --channel-border-color: rgba(255,255,255,0.5);

    --primary-button-bg:   #ffffff;
    --primary-button-text: #000000;

    --modal-header-bg:     #f5f5f5;
    --modal-header-text:   #222;
    --modal-header-border: #2a8f64;

    --logo-font:        Poppins, Arial, Helvetica, sans-serif;
    --top-height:       5rem;
    --left-menu-width:  14rem;
    --right-panel-width: 18rem;
    --logo-width:  calc(var(--left-menu-width) - 1.5rem);
    --logo-height: var(--top-height);

    --channel-panel-bg:          #fff;
    --channel-panel-border:      #aaa;
    --channel-panel-text:        #666;
    --channel-input-border:      #ccc;
    --channel-input-bg-disabled: #fff;
    --channel-button-bg:         #fff;
    --channel-button-border:     #aaa;
    --selected-link-border:      #777;

    --device-select-text:   #000;
    --device-select-bg:     #fff;
    --device-select-border: #ccc;

    --run-button-bg:           #fff;
    --run-button-text:         var(--main-black);
    --run-button-border:       var(--main-green);
    --run-button-hover-shadow: var(--main-green);

    --account-panel-bg:     #fefefe;
    --account-panel-border: #ccc;
    --account-panel-text:   #222;
    --notify-panel-bg:      #fff;
    --notify-bg:            var(--brand-blue);
    --notify-text:          #fff;
    --notify-border:        #ccc;
    --notify-border-hover:  #aaa;

    --progress-bar-bg: var(--brand-blue);

    --privacy-link-color: inherit;

    --modal-bg:                        #fff;
    --modal-border:                    var(--main-green);
    --modal-search-bg:                 #f5f5f5;
    --modal-search-border:             #ddd;
    --modal-search-icon:               #666;
    --modal-search-input-bg:           #fff;
    --modal-search-input-border:       #ccc;
    --modal-search-input-focus-border: var(--main-green);
    --extension-sidebar-bg:            #f9f9f9;
    --extension-sidebar-border:        #ddd;
    --extension-sidebar-item-color:    #333;
    --extension-sidebar-item-hover-bg:    #e8e8e8;
    --extension-sidebar-item-active-bg:   var(--main-green);
    --extension-sidebar-item-active-color: white;
    --extension-sidebar-hr-bg:         #ddd;
    --extension-card-bg:               #ffffff;
    --extension-card-border:           #ddd;
    --extension-card-hover-shadow:     rgba(0,0,0,0.15);
    --extension-cover-bg:              #f5f5f5;
    --extension-name-color:            #333;
    --extension-author-color:          #666;
    --extension-other-color:           #999;
    --extension-other-version-bg:      #f0f0f0;
    --extension-other-link-color:      #666;
    --extension-other-link-hover-color: var(--main-green);
    --extension-description-color:     #555;
    --extension-install-bg:            var(--main-green);
    --extension-install-hover-bg:      #2a8f64;
    --extension-install-text:          #ffffff;
    --extension-uninstall-bg:          #e74c3c;
    --extension-uninstall-hover-bg:    #c0392b;
    --extension-uninstall-text:        #ffffff;
    --installed-icon-color:            var(--main-green);

    --loading-color:        #666;
    --spinner-border:       #f3f3f3;
    --spinner-border-top:   var(--main-green);

    --empty-state-color:      #666;
    --empty-state-text-color: #333;

    --scrollbar-track-bg:       #f1f1f1;
    --scrollbar-thumb-bg:       #888;
    --scrollbar-thumb-hover-bg: #555;

    --checkswitch-checked-bg: var(--brand-teal);
    --checkswitch-bg:         grey;
    --checkswitch-handle-bg:  #fff;

    --modal-close-hover-color: #000;

    --blinking-bg:     #fff;
    --blinking-bg-alt: var(--brand-blue);

    --toolbar-popup-bg:            #ffffff;
    --toolbar-popup-border:        #cccccc;
    --toolbar-popup-shadow:        rgba(0,0,0,0.5);
    --toolbar-button-border:       #cccccc;
    --toolbar-button-hover-shadow: #cccccc;

    --toolbar-device-bg:     #ffffff;
    --toolbar-device-border: #ff6f00;

    /* Icon URL variables
       Paths use ../ so they resolve correctly from both:
         src/tailwind.css  (ui/src/) → ../ = ui/
         dist/tailwind.css (ui/dist/) → ../ = ui/  */
    --icon-sprite:         url('../media/icons.svg');
    --extension-icon:      url('../customer/example/images/extension1.png');
    --firmware-icon:       url('../customer/example/images/firmware1.png');
    --cloud-save-icon:     url('../customer/example/images/cloud-save.png');
    --logo-url:            url('../customer/example/images/logo.png');

    --project-save-icon:   url('../media/save.png');
    --project-rename-icon: url('../media/edit.png');
    --project-share-icon:  url('../media/share.png');
}


/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
@layer base {
    html, body { @apply h-full; }

    body {
        background-color: #F8F9FA;
        font-family: 'Poppins', sans-serif !important;
        margin: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    label { user-select: none; }

    input:focus,
    textarea:focus,
    select:focus,
    span:focus { outline: none; }

    h1 {
        font-weight: normal;
        font-size: 140%;
        margin-left: 5px;
        margin-right: 5px;
    }

    table { border-collapse: collapse; margin: 0; padding: 0; border: none; }
    td    { padding: 0; vertical-align: top; }

    tt {
        font-size: 0.9em;
        padding: 0.25rem 0.5rem;
        background: #eaeaea;
        margin: 0 0.25em;
        border-radius: 1rem;
        font-weight: bold;
    }
}


/* ============================================================
   COMPONENT STYLES
   ============================================================ */
@layer components {

    .farSide { text-align: right; }

    /* ── Icon buttons ── */
    button.icon,
    label.button.icon {
        border-radius: 2rem;
        border: 1px solid transparent;
        background-color: transparent;
        color: #000;
        padding: .25rem;
        transition: border-color ease .125s;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    button.icon:hover, label.button.icon:hover { border: 1px solid #000; }
    button.icon:active, label.button.icon:active { border-color: #000; }
    button.disabled:hover { opacity: 0.6; }
    button.disabled { display: none; }

    button.icon.text, label.icon.text {
        display: inline-flex;
        align-items: center;
        font-weight: bold;
        font-size: 1rem;
        padding: .25em .5em;
        white-space: nowrap;
    }
    button.icon.text::before, label.icon.text::before { margin-right: .25rem; }

    .faIcon:before { font-weight: 700; }
    .toolbar .topButton { color: var(--main-green) !important; }

    /* ── Top menu ── */
    .top-menu {
        background: linear-gradient(to right, var(--brand-red), var(--brand-orange), var(--brand-yellow), var(--brand-blue), var(--brand-teal));
        height: var(--top-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .5rem 0 1rem;
        user-select: none;
        width: 100vw;
        box-sizing: border-box;
        color: var(--top-text-color);
    }

    /* Logo */
    .top-menu > .logo {
        @apply flex items-center;
        font-family: var(--logo-font);
        color: var(--top-text-color);
        height: var(--top-height);
    }

    #logo {
        width: var(--logo-width);
        height: var(--logo-height);
        object-fit: contain;
        object-position: center;
        @apply block;
    }

    /* Tabs */
    .top-menu > .tabs {
        margin: 0 0.5rem;
        @apply flex w-full overflow-x-auto overflow-y-hidden h-full items-center;
        scrollbar-width: none;
        padding: 0;
        min-width: 0;
        flex-shrink: 1;
    }
    .top-menu > .tabs::-webkit-scrollbar { display: none; }

    .tabon  { color: var(--tab-active-text); font-weight: 600; }
    .taboff { color: var(--tab-inactive-text); transition: opacity 0.2s ease; }
    .taboff:hover { color: var(--tab-active-text); cursor: pointer; }

    .tabs > div {
        min-width: fit-content;
        padding: 0rem 1rem;
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
        flex-shrink: 1;
        transition: box-shadow ease .125s, background-color linear .125s, border-color linear .125s, color linear .125s;
        margin: 0;
        border: 0px;
        background: none;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 550;
        text-transform: uppercase;
        vertical-align: middle;
        height: 100%;
        line-height: var(--top-height);
    }
    .tabs > div.on    { white-space: nowrap; background: var(--main-green); color: var(--main-black); font-weight: 750; }
    .tabs > div:hover { background-color: var(--main-green); color: var(--main-black); font-weight: 750; }
    .tabs > div.on:hover { color: var(--main-black) !important; }

    /* Channel connect */
    .top-menu #channel_connect {
        display: flex;
        border-radius: 2rem;
        border: 1px solid var(--channel-border-color);
        margin-right: .25rem;
        box-sizing: border-box;
        overflow: hidden;
    }
    .top-menu #channel_connect > a {
        -webkit-tap-highlight-color: transparent;
        display: inline-block;
        border-radius: 2rem;
        padding: .25rem;
        border: 1px solid transparent;
        box-sizing: content-box;
        margin: -1px;
        opacity: 0.6;
        color: var(--top-text-color);
        transition: all 0.2s ease;
    }
    .top-menu #channel_connect > a.selected {
        opacity: 1;
        border: 1px solid var(--selected-link-border);
        background-color: var(--primary-button-bg);
        color: var(--primary-button-text);
    }
    .top-menu #channel_connect:hover > a.selected { box-shadow: -1px 0 3px rgba(0,0,0,0.2); }

    /* Toolbar buttons */
    .toolbar button, .top-menu button {
        background: transparent;
        border: none;
        color: var(--top-text-color);
        cursor: pointer;
        transition: opacity 0.2s ease;
    }
    .toolbar button:hover, .top-menu button:hover { opacity: 0.85; }

    /* Modal header (extension/overlay modals) */
    .modal-header {
        background-color: var(--main-green);
        color: var(--modal-header-text);
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--modal-header-border);
        flex-shrink: 0;
        cursor: grab;
        user-select: none;
    }
    .modal-header.dragging { cursor: grabbing; }
    .modal-title { margin: 0; font-size: 22px; font-weight: bold; }
    .close-btn {
        background: none; border: none; color: white; font-size: 28px;
        cursor: pointer; padding: 0; width: 35px; height: 35px;
        line-height: 28px; transition: color 0.2s;
    }
    .close-btn:hover { color: var(--modal-close-hover-color); }

    #loadXML, #put-file-select { display: none; }

    /* Channel panel */
    .channel-panel {
        box-sizing: border-box; z-index: 999; position: fixed;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        width: 18.5rem;
        transition: .125s ease top, .125s ease opacity, .125s ease transform;
        background: var(--channel-panel-bg);
        border-radius: 1.5em; padding: 0.25rem; top: -15rem; right: 22rem;
        margin-right: 0; border: 1px solid var(--channel-panel-border);
        box-shadow: 0em 0em 0.5em rgba(0,0,0,0.5); opacity: 0; transform: scale(0.5);
    }
    .channel-panel#show { top: .25rem; opacity: 1; transform: scale(1); }
    .channel-panel > div > span {
        width: 100%; border-radius: 2rem; color: var(--channel-panel-text);
        display: inline-block; box-sizing: border-box; text-align: left;
        padding: 0.5rem 0.5rem 0.125rem 0.5rem;
    }
    .channel-panel input, #file_save_as input {
        border: none; padding: 0; height: 2rem; font-size: 0.8rem; font-weight: bold;
    }
    .channel-panel input:focus { outline: 0 !important; }
    .channel-panel #url, .channel-panel #password { border-bottom: 1px solid var(--channel-input-border); }
    .channel-panel #url { margin-bottom: 1rem; }
    .channel-panel #url:disabled { background-color: var(--channel-input-bg-disabled); }
    .channel-panel > div {
        box-sizing: border-box; border: 1px solid #ccc;
        border-radius: 1.25rem; text-align: end; width: 100%;
    }
    .channel-panel > div:first-of-type { margin: 0.25rem 0; }
    .channel-panel .icon:before { margin-right: .25rem; }

    #bluetoothButton, #serialButton, #networkButton, #scanButton { display: inline-flex; align-items: center; }
    #bluetoothButton, #serialButton, #networkButton { font-weight: bold; line-height: 1.75rem; font-size: 1rem; width: 100%; }
    #networkButton, #serialButton { margin-top: -1px; }
    #scanButton { line-height: 1.25rem; font-size: 0.8rem; margin: 0.125rem; padding-right: 0.5rem; }
    #closeZone { position: absolute; width: 100vw; height: 100%; top: 0; z-index: 997; display: none; }
    #closeZone.on { display: block; }
    #connectButton { border: none; background: none; }
    #channelButton { border-color: var(--channel-button-border); margin: -1px; background: var(--channel-button-bg); }
    #channel_connect.wait, #toolbarButton.wait { animation: blinking 1s infinite; }

    /* Run button */
    #runButton {
        border: none; margin: -1px; opacity: 1; padding: 0.25rem .4rem;
        background: var(--run-button-bg); color: var(--run-button-text) !important;
        border: 1px solid var(--run-button-border);
    }
    #runButton:hover { box-shadow: -1px 0 3px var(--run-button-hover-shadow); }

    .privacyLink { font-family: Poppins,Roboto,Arial,Helvetica,sans-serif; font-size: small; text-decoration: none; }

    #languageMenu { border: none; height: 2rem; width: 100%; border-radius: 1rem; background: var(--device-select-bg); padding: .25em; }

    /* Account / Notify */
    .account-panel, .notify-panel, .notify {
        user-select: none;
        transition: top ease .5s, right ease .5s, opacity ease .125s, background linear .5s, margin-right ease .125s;
        transition-delay: 0s, 0s, .1s, 0s, 0s;
        color: var(--account-panel-text);
        opacity: 0;
        background: var(--account-panel-bg);
    }
    .toast-container { z-index: 100; }
    .notify {
        z-index: 999; right: -18em; bottom: .5em; padding: 1em; position: fixed;
        box-shadow: 0 .125em .5em rgba(0,0,0,.6);
        background: var(--notify-bg); color: var(--notify-text);
    }
    .notify#show { opacity: 1; right: .5em; }
    .notify hr { border: none; height: 1px; background-color: var(--notify-text); }
    .notify-panel > span, .notify { border-radius: .25rem; }
    .notify-panel > span {
        background: var(--notify-panel-bg); padding: 1em; display: flex;
        align-items: center; justify-content: space-between; margin: .25rem 0;
        transition: box-shadow ease .125s; box-sizing: border-box;
        border: solid 1px var(--notify-border);
    }
    .notify-panel > span:hover { border-color: var(--notify-border-hover); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
    .notify-panel > span > span { cursor: pointer; opacity: .6; transition: opacity linear .125s; }
    .notify-panel > span > span:hover { opacity: 1; }
    .notify-panel, .account-panel {
        position: fixed; overflow-y: auto; z-index: 998; width: 18rem; padding: 0 .5em;
        top: 3.5rem; bottom: 0; right: -22em; background: var(--account-panel-bg);
        border-left: solid 1px var(--account-panel-border); display: flex;
        box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.5);
    }
    .account-panel { flex-direction: column; justify-content: space-between; }
    .notify-panel  { flex-direction: column-reverse; justify-content: end; }
    .notify-panel#show, .account-panel#show { opacity: 1; right: 0; }
    #account_header { font-size: 1.25rem; margin: .5em 0; display: block; }
    #account_user { border-bottom: 1px dashed var(--account-panel-text); font-weight: bold; padding-bottom: .125rem; }

    /* Progress bar */
    .progress-bar {
        z-index: 500; position: fixed; left: 0; right: 0;
        overflow: hidden; height: 0; transition: .125s ease height; top: var(--top-height);
    }
    .progress-bar#on { height: .25em; }
    .progress-bar div { content: ''; position: absolute; height: 100%; background: var(--progress-bar-bg); width: 0%; transition: .125s linear width; }

    /* Modal overlay */
    .modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; pointer-events: none; }
    .modal-overlay.active { display: block; }
    .modal-container {
        position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
        background-color: var(--modal-bg); width: 90%; max-width: 1400px; height: 80vh;
        border: 2px solid var(--modal-border); box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
    }

    /* Search */
    .search-container { padding: 12px 20px; background-color: var(--modal-search-bg); border-bottom: 1px solid var(--modal-search-border); flex-shrink: 0; }
    .search-box { position: relative; width: 100%; }
    .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--modal-search-icon); }
    .search-input { width: 100%; padding: 8px 8px 8px 35px; border: 1px solid var(--modal-search-input-border); border-radius: 4px; font-size: 14px; box-sizing: border-box; background: var(--modal-search-input-bg); }
    .search-input:focus { outline: none; border-color: var(--modal-search-input-focus-border); }

    /* Extension list layout */
    .extensions-list { display: flex; flex: 1; overflow: hidden; min-height: 0; }
    .extension-category-list {
        width: 180px; background-color: var(--extension-sidebar-bg);
        border-right: 1px solid var(--extension-sidebar-border);
        overflow-y: auto; list-style: none; margin: 0; padding: 8px 0; flex-shrink: 0;
    }
    .extension-category-list li { padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--extension-sidebar-item-color); transition: background-color 0.2s; user-select: none; }
    .extension-category-list li:hover { background-color: var(--extension-sidebar-item-hover-bg); }
    .extension-category-list li.active { background-color: var(--extension-sidebar-item-active-bg); color: var(--extension-sidebar-item-active-color); font-weight: bold; }
    .extension-category-list li.hr { height: 1px; background-color: var(--extension-sidebar-hr-bg); margin: 8px 0; padding: 0; cursor: default; }
    .extension-category-list li.hr:hover { background-color: var(--extension-sidebar-hr-bg); }
    .extension-grid { flex: 1; overflow-y: auto; padding: 15px; }
    .extension-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; list-style: none; margin: 0; padding: 0; }
    .extension-list li { display: block; }

    /* Extension card */
    .extension-box {
        background: var(--extension-card-bg); border: 1px solid var(--extension-card-border);
        border-radius: 6px; padding: 12px; transition: all 0.3s;
        display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
    }
    .extension-box:hover { box-shadow: 0 4px 12px var(--extension-card-hover-shadow); transform: translateY(-2px); }
    .extension-box .header { display: flex; gap: 10px; margin-bottom: 8px; }
    .extension-box .cover { width: 45px; height: 45px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-color: var(--extension-cover-bg); border-radius: 4px; }
    .extension-box .cover img { width: 100%; height: 100%; object-fit: contain; }
    .extension-box .detail { flex: 1; min-width: 0; }
    .extension-box .name { font-size: 15px; font-weight: bold; color: var(--extension-name-color); margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
    .installed-icon { color: var(--installed-icon-color); font-size: 13px; }
    .extension-box .author { font-size: 11px; color: var(--extension-author-color); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .extension-box .other { font-size: 10px; color: var(--extension-other-color); display: flex; align-items: center; gap: 6px; }
    .extension-box .other .version { background-color: var(--extension-other-version-bg); padding: 2px 6px; border-radius: 3px; }
    .extension-box .other a { color: var(--extension-other-link-color); transition: color 0.2s; text-decoration: none; }
    .extension-box .other a:hover { color: var(--extension-other-link-hover-color); }
    .extension-box .description { font-size: 12px; color: var(--extension-description-color); margin: 8px 0; line-height: 1.4; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .extension-box .button { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; flex-shrink: 0; }
    .extension-box .button button { width: 100%; padding: 6px 12px; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.2s; font-weight: 500; }
    .extension-install { background-color: var(--extension-install-bg); color: var(--extension-install-text); }
    .extension-install:hover:not(:disabled) { background-color: var(--extension-install-hover-bg); }
    .extension-uninstall { background-color: var(--extension-uninstall-bg); color: var(--extension-uninstall-text); }
    .extension-uninstall:hover:not(:disabled) { background-color: var(--extension-uninstall-hover-bg); }
    .extension-box .button button:disabled { opacity: 0.6; cursor: not-allowed; }

    /* Force extension button colours */
    button.extension-upgrade   { background-color: #FF9800 !important; color: white !important; animation: pulse-orange 2s ease-in-out infinite; }
    button.extension-upgrade:hover { background: #F57C00; animation: none; }
    button.extension-cleanup   { background-color: turquoise !important; color: white !important; border: none; }
    button.extension-cleanup:hover:not(:disabled) { background: #757575 !important; }
    button.extension-install   { background-color: var(--extension-install-bg) !important; color: var(--extension-install-text) !important; }
    button.extension-uninstall { background-color: var(--extension-uninstall-bg) !important; color: var(--extension-uninstall-text) !important; }

    /* Spinner / empty state */
    .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: var(--loading-color); }
    .spinner { border: 3px solid var(--spinner-border); border-top: 3px solid var(--spinner-border-top); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 15px; }
    .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: var(--empty-state-color); text-align: center; }
    .empty-state-icon { font-size: 48px; margin-bottom: 15px; }
    .empty-state h3 { margin: 0 0 10px 0; color: var(--empty-state-text-color); }
    .empty-state p { margin: 0; color: #666; }

    /* More info / tags */
    .more-info-bar { margin-top: auto; padding-top: 10px; border-top: 1px solid #e0e0e0; }
    .extension-moreinfo { background: none; border: 1px solid #90CAF9; border-radius: 4px; color: #1976d2; font-size: 13px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s, color 0.2s; width: 100%; justify-content: center; box-sizing: border-box; }
    .extension-moreinfo:hover { background: #e3f2fd; color: #0d47a1; }
    .extension-loading { display: inline-block; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 0.6s linear infinite; }
    .extension-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .extension-tag  { background: #f5f5f5; color: #666; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
    .version-upgrade { background: #fff3e0; color: #f57c00; border: 1px solid #ffe0b2; }
    .device-badge { display: inline-flex; align-items: center; gap: 4px; background: #e8f5e9; color: #2e7d32; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
    .notification-badge { position: absolute; top: -6px; right: -6px; background: #ff5722; color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; }
    .upgrade-icon { color: #FF9800; font-size: 16px; display: inline-flex; align-items: center; animation: bounce 1s ease-in-out infinite; }
    .pricing-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; text-transform: capitalize; }
    .pricing-free { background: #e8f5e9; color: #2e7d32; }
    .pricing-paid { background: #fff3e0; color: #e65100; }

    /* Extension info modal */
    .ext-info-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
    .ext-info-dialog { background: #fff; border-radius: 12px; max-width: 620px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.3); overflow: hidden; }
    .ext-info-header { padding: 20px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; }
    .ext-info-header h2 { margin: 0; font-size: 1.1rem; color: #1a1a2e; }
    .ext-info-header h2 i { color: #4A90E2; margin-right: 8px; }
    .ext-info-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #666; line-height: 1; padding: 0 4px; }
    .ext-info-close:hover { color: #333; }
    .ext-info-content { padding: 24px; overflow-y: auto; font-size: 0.9rem; line-height: 1.75; color: #333; }
    .ext-info-content h1,.ext-info-content h2,.ext-info-content h3,.ext-info-content h4 { margin: 1em 0 0.5em; color: #1a1a2e; line-height: 1.3; }
    .ext-info-content h1 { font-size: 1.3rem; } .ext-info-content h2 { font-size: 1.15rem; } .ext-info-content h3 { font-size: 1.05rem; } .ext-info-content h4 { font-size: 0.95rem; }
    .ext-info-content p { margin: 0.5em 0; }
    .ext-info-content ul,.ext-info-content ol { margin: 0.5em 0; padding-left: 1.5em; }
    .ext-info-content li { margin: 0.3em 0; }
    .ext-info-content code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-family: "Consolas","Monaco",monospace; font-size: 0.85em; color: #d63384; }
    .ext-info-content pre { background: #1e1e2e; color: #cdd6f4; padding: 14px 18px; border-radius: 8px; overflow-x: auto; margin: 0.75em 0; line-height: 1.5; }
    .ext-info-content pre code { background: none; padding: 0; color: inherit; font-size: 0.85em; }
    .ext-info-content table { width: 100%; border-collapse: collapse; margin: 0.75em 0; font-size: 0.85em; }
    .ext-info-content th,.ext-info-content td { border: 1px solid #e0e0e0; padding: 8px 12px; text-align: left; }
    .ext-info-content th { background: #f8f9fa; font-weight: 600; }
    .ext-info-content a { color: #1976d2; text-decoration: none; }
    .ext-info-content a:hover { text-decoration: underline; }
    .ext-info-content blockquote { border-left: 3px solid #90CAF9; margin: 0.75em 0; padding: 8px 16px; background: #f8f9fa; color: #555; }
    .ext-info-content hr { border: none; border-top: 1px solid #e0e0e0; margin: 1em 0; }

    /* checkswitch */
    .checkswitch { -webkit-tap-highlight-color: transparent; display: flex; justify-content: space-between; line-height: 1.5rem; cursor: pointer; padding: 0.5rem; }
    input.checkswitch[type="checkbox"] { -webkit-tap-highlight-color: transparent; display: none; }
    .checkswitch input:checked ~ #checkswitchspan,
    .checkswitch input:checked ~ span { background: var(--checkswitch-checked-bg); }
    .checkswitch #checkswitchspan { width: 2.5em; height: 1.5em; background: var(--checkswitch-bg); display: inline-block; border-radius: 1.5em; position: relative; line-height: 1.5rem; }
    .checkswitch span { height: 1.5em; display: inline-block; position: relative; line-height: 1.5rem; }
    .checkswitch #checkswitchspan::after { content: ""; position: absolute; top: 0.074em; left: 0.075em; width: 1.35em; height: 1.35em; background: var(--checkswitch-handle-bg); border-radius: 1.35em; transition: left 0.25s ease-out 0s, transform 0.25s ease-out 0s; box-shadow: rgb(0 0 0 / 20%) 0px 1px 3px; }
    .checkswitch input:checked ~ #checkswitchspan::after,
    .checkswitch input:checked ~ span::after { left: -0.27em; transform: translateX(100%); }

    /* Content panels */
    #content_blocks, #content_iot { visibility: hidden; }
    .content:not(#content_blocks):not(#content_iot) { display: none; }
    .content { width: 100vw; top: var(--top-height); margin: 0; position: absolute; opacity: 0; }
    .content:not(#content_blocks) { transition: .125s ease left, .125s ease opacity, .125s ease width; }
    .content#content_blocks { margin-top: -1px; }
    .content.ani#content_blocks,.content.ani#content_iot,#content_iot.ani #content_iot { visibility: visible !important; }
    .content.ani:not(#content_console):not(#content_files) { display: block !important; }
    .content.ani#content_console { display: flex !important; }
    .content.ani#content_files   { display: grid !important; }
    .content.ani.on { left: 0; opacity: 1; }
    .content.pos1  { width: 50vw !important; }
    .content._pos1 { width: 50vw; left: -1em !important; }
    .content.pos2  { width: 50vw; left: 50vw !important; border-left: 1px solid #ccc; }
    .content._pos2 { width: 50vw; left: calc(50vw + 1em) !important; }
    pre.content { border: 1px solid #ccc; overflow: scroll; }
    #content_blocks,#content_device,#content_code,#content_console,#content_files,
    #content_programs,#content_mqtt,#content_iot,#content_databoard,#content_teacher {
        height: calc(100vh - var(--top-height));
    }
    #content_device { overflow-y: auto; overflow-x: hidden; }
    #content_device #device_img { max-width: 75rem; width: 100%; }
    .blocklySvg { border-top: none !important; }

    /* Console */
    #content_console { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
    .console-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0.75rem; padding: 0 0.75rem 0.75rem 0.75rem; overflow: hidden; }
    .terminal-section { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #000; border-radius: 0.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.5); overflow: visible; padding: 0.5rem; }
    #content_console #term { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    #content_console #term .xterm { flex: 1; min-height: 0; }
    #content_console #term .xterm-viewport { overflow-y: scroll !important; }
    #file-boxes-console { display: flex; flex-direction: row; gap: 0.5rem; width: 100%; flex-shrink: 0; justify-content: center; user-select: none; flex-wrap: wrap; }
    #content_console #file-boxes-console button { white-space: nowrap; margin-left: 0; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 0; background-color: var(--main-green); font-size: 0.8rem; text-transform: uppercase; line-height: 1.5rem; border: none; flex-shrink: 0; }

    /* Files */
    #content_files { grid-template-columns: 18rem calc(100% - 18rem); }
    #file-boxes #file-header-cloud,#file-boxes #file-header-laptop,#file-boxes #file-status { padding: 0 .25em 0 .5em; text-align: center; }
    #file-boxes #file-header-cloud,#file-boxes #file-header-laptop { display: flex; height: 2.5rem; align-items: center; justify-content: space-between; font-weight: bold; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
    #file-boxes #file-header-cloud > span,#file-boxes #file-header-laptop > span { flex-grow: 2; }
    #file_save_as { height: 2.5rem; border-bottom: 1px solid #ccc; display: flex; align-items: center; padding: 0 .5rem 0 1.85rem; }
    #file_save_as.py #updateXMLButton,#file_save_as.py #generated2DeviceButton { display: none; }
    #file_save_as.bipes-xml #uploadAsDiv,#file_save_as.pyOnDevice #uploadAsDiv { display: none; }
    #file_save_as input { font-weight: bold; border-left: 1px solid #ccc; padding-left: .5rem; }
    #file-boxes #file-status { height: 1.5rem; line-height: 1.5rem; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; color: #666; font-size: 0.85rem; overflow: hidden; font-weight: bold; background: #f7f7f7; }
    #filesPanel { display: block; max-height: calc(100vh - var(--top-height) - 8.5rem); overflow-y: auto; padding: 0.25rem 0.5rem; flex: 1; min-height: 0; }
    #filesPanel h2,.account-panel h2 { font-size: 1rem; display: flex; align-items: center; margin: 0; height: 2.5rem; }
    #fileList > div,#fileTemplate > div,#blocks2Code > div,#ProjectList > div { display: flex; align-items: stretch; justify-content: space-between; margin: 0.25rem 0; padding: 0.25rem; border-radius: .25rem; border: 1px solid #ccc; cursor: pointer; min-height: 2rem; font-size: 0.9rem; }
    #fileList > div > div:last-child,#ProjectList > div > div:last-child { flex-shrink: 0; }
    #fileList .runText,#ProjectList .runText { width: 100%; font-family: Poppins; }
    #fileTemplate > div,#blocks2Code > div { align-items: center; word-break: break-word; font-family: Poppins; }
    #fileList > div > div,#ProjectList > div > div { display: inline-flex; align-items: center; word-break: break-word; }
    #fileList .runText > span,#blocks2Code > div > span { font-size: 0.8rem; border: 1px solid #9C27B0; border-radius: .75rem; padding: .175rem .25rem; color: #9C27B0; margin-left: .25rem; font-weight: bold; word-break: keep-all; font-family: Poppins; }
    #fileList #runIcon { filter: brightness(0); }
    #filesPanel details,.account-panel summary { overflow: hidden; transition: .125s ease border; }
    #filesPanel summary,.account-panel summary { -webkit-tap-highlight-color: transparent; white-space: normal; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
    #filesPanel summary > h2:before,.account-panel summary > h2:before { content: "\1433"; margin-right: .5rem; transition: transform .25s ease; display: inline-block; font-weight: normal; font-size: 0.8rem; line-height: 1rem; }
    #filesPanel details[open] summary > h2:before,.account-panel details[open] summary > h2:before { transform: rotateZ(90deg); }
    #ProjectList > div { transition: box-shadow ease .125s, background-color linear .125s, border-color linear .125s, color linear .125s; }
    #ProjectList > .current { color: #fff; background: var(--main-green); box-shadow: 0 0.125em 0.25em var(--main-black); }
    #ProjectList .current span { filter: invert(1); }
    #put-file-select-cloud:before { background-position: left calc(-1.5rem*19) top; }
    #saveToCloudBtn::before,#loadToWorkspaceBtn::before { display: none !important; content: none !important; }

    /* Teacher */
    #content_teacher { padding: 0 !important; overflow: hidden; }
    #teacherDashboardFrame { width: 100%; height: 100%; border: none; display: block; }
    #content_teacher.ani { display: flex !important; flex-direction: column; }

    /* Extension button */
    #extensionButton { background-image: var(--extension-icon); background-position: center; background-size: 70%; background-repeat: no-repeat; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; }
    #extensionButton:before,#downloadIcon:before { background: none; content: none; }

    /* Sprited icons */
    button.icon:before,#deviceSelect.icon:before,a.icon:before,span.icon:before,label.icon:before {
        content: "";
        background-image: var(--icon-sprite);
        width: 1.5rem; height: 1.5rem;
        background-size: auto 3rem;
    }
    button.icon:before,label.icon:before { display: block; }
    span.icon:before { display: inline-block; }
    button.icon.medium:before { width: 2.5rem; height: 2.5rem; background-size: auto 5rem; }

    #firmwareButton.icon:before { background-image: var(--firmware-icon) !important; background-size: contain !important; background-repeat: no-repeat; background-position: center; }
    #firmwareButton { background-image: var(--firmware-icon); }

    #linkButton.notext.icon:before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; }
    #linkButton.notext.icon { background-image: var(--cloud-save-icon) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; width: 1.5rem !important; height: 1.5rem !important; padding: 0.25rem !important; box-sizing: content-box !important; }

    /* Sprite offsets */
    #saveButton:before,#downloadIcon:before         { background-position: left calc(-1.5rem*1)  top; }
    #loadButton:before                               { background-position: left calc(-1.5rem*2)  top; }
    #trashButton:before,#trashIcon:before            { background-position: left calc(-1.5rem*3)  top; }
    #notificationButton:before                       { background-position: left calc(-1.5rem*4)  top; }
    #runButton:before,#runIcon:before                { transition: background ease .125s; background-position: left calc(-1.5rem*5) top; }
    #runButton.on:before                             { background-position: left calc(-1.5rem*5)  bottom; }
    #languageIcon:before                             { background-position: left calc(-1.5rem*6)  top; }
    #deviceSelect:before                             { background-position: left calc(-1.5rem*7)  top; }
    #serialButton:before,#channelButton.webserial:before  { background-position: left calc(-1.5rem*9)  top; }
    #networkButton:before,#channelButton.websocket:before { background-position: left calc(-1.5rem*10) top; }
    #toolbarButton:before                            { background-position: left calc(-2.5rem*11) top; }
    #toolbarButton.on:before                         { background-position: left calc(-2.5rem*11) bottom; }
    #forumButton:before                              { background-position: left calc(-1.5rem*12) top; }
    #connectButton:before                            { background-position: left calc(-1.5rem*13) top; }
    #connectButton.on:before                         { background-position: left calc(-1.5rem*13) bottom; }
    #scanButton:before                               { background-position: left calc(-1.5rem*14) top; }
    #bluetoothButton:before,#channelButton.webbluetooth:before { background-position: left calc(-1.5rem*15) top; }
    #settingsGeneric:before                          { background-position: left calc(-1.5rem*16) top; }
    #tipsGeneric:before                              { background-position: left calc(-1.5rem*17) top; }
    #refreshFilesList:before                         { background-position: left calc(-1.5rem*18) top; }
    #putFileButton:before,#editor2DeviceButton:before,
    #editor3DeviceButton:before,#generated2DeviceButton:before { background-position: left calc(-1.5rem*19) top; }
    #updateXMLButton:before                          { background-position: left calc(-1.5rem*20) bottom; }
    #accountButton:before                            { background-position: left calc(-1.5rem*22) top; }
    #newProjectButton:before                         { background-position: left calc(-1.5rem*23) top; }

    /* Device selector */
    #deviceSelect { display: inline-flex; align-items: center; border-radius: 2rem; padding-left: .5rem; padding-right: .5rem; background-color: var(--toolbar-device-bg); border: 1px solid var(--toolbar-device-border); }
    #device_selector { appearance: none; background-color: transparent; border: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; height: 2rem; }
    #device_selector:focus { color: var(--device-select-text); }

    /* Student/Teacher login button */
    #studentTeacherLoginBtn { align-items: center !important; justify-content: center !important; font-size: 16px !important; font-weight: 600 !important; padding: 12px 20px !important; border-radius: 8px !important; transition: all 0.3s ease !important; }
    #studentTeacherLoginBtn #loginStatus { font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; }
    #studentTeacherLoginBtn[data-role="teacher"] { background: linear-gradient(135deg,#ff9800 0%,#f57c00 100%) !important; }
    #studentTeacherLoginBtn[data-role="student"] { background: linear-gradient(135deg,#4caf50 0%,#388e3c 100%) !important; }
    #studentTeacherLoginBtn[data-role="none"]    { background: linear-gradient(135deg,#2196f3 0%,#1976d2 100%) !important; }
    #loginStatus::before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 8px; background-size: contain; background-repeat: no-repeat; background-position: center; }
    #studentTeacherLoginBtn[data-role="teacher"] #loginStatus::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M19 17v-2.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5V17h-1v-2.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5V17h-1v-4h4v4h-1z"/></svg>'); }
    #studentTeacherLoginBtn[data-role="student"] #loginStatus::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'); }
    #studentTeacherLoginBtn[data-role="none"] #loginStatus::before    { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg>'); }

    /* Hide run button (replaced by blocks-term panel) */
    button[id="runButton"] { display: none !important; }

    /* Floating blocks terminal panel */
    #blocks-term-toggle-btn { position: fixed !important; bottom: 3rem !important; right: 11rem !important; z-index: 2000000 !important; width: 3rem !important; height: 3rem !important; border-radius: 50% !important; border: 3px solid #000 !important; background: #fff !important; color: #fff !important; font-size: 1.2rem !important; cursor: pointer !important; box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
    #blocks-term-toggle-btn:hover { background: #31a574; }
    .blocks-term-panel { position: fixed; bottom: 1.5rem; left: calc(var(--left-menu-width, 140px) + var(--panel-gap, 1rem)); right: calc(var(--right-panel-width, 5rem) + var(--panel-gap, 0rem)); z-index: 9500; background: #0f1117; border-top: 2px solid #31a574; border-radius: 0.5rem 0.5rem 0 0; display: none; flex-direction: column; box-shadow: 0 -4px 16px rgba(0,0,0,0.5); transition: height 0.2s ease; height: 2.5rem; max-height: calc(100vh - var(--top-height,3.5rem) - 0.5rem); overflow: hidden; box-sizing: border-box; }
    .blocks-term-panel.open { display: flex; height: 220px; }
    .blocks-term-header { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; height: 2.5rem; flex-shrink: 0; background: #1e2a38; border-radius: 0.5rem 0.5rem 0 0; user-select: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .blocks-term-header::-webkit-scrollbar { display: none; }
    .blocks-term-title { color: #a0c8ff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; flex-shrink: 0; }
    .blocks-term-conn-label { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 1rem; white-space: nowrap; flex-shrink: 0; }
    .blocks-term-conn-label.connected    { background: rgba(49,165,116,0.2); color: #31a574; border: 1px solid #31a574; }
    .blocks-term-conn-label.disconnected { background: rgba(255,80,80,0.15); color: #ff6b6b; border: 1px solid #ff6b6b; }
    .blocks-term-tip { font-size: 0.72rem; font-weight: bold; color: rgba(255,255,255,0.5); flex-shrink: 0; cursor: default; position: relative; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: inline-flex; align-items: center; justify-content: center; }
    .blocks-term-tip::after { content: "Ctrl+Insert to copy  |  Shift+Insert to paste"; position: fixed; bottom: calc(var(--blocks-term-h,220px) + 0.1rem); left: calc(var(--left-menu-width,14rem) + 1rem); transform: none; background: #1e2a38; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); font-size: 0.72rem; font-weight: normal; white-space: nowrap; padding: 0.35rem 0.75rem; border-radius: 0.25rem; z-index: 99999; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 0.15s ease; }
    .blocks-term-tip:hover::after { visibility: visible; opacity: 1; }
    .blocks-term-side-controls { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.35rem 0.25rem; background: #1e2a38; flex-shrink: 0; justify-content: center; align-items: center; }
    .blocks-term-side-controls button { width: 1.4rem; height: 1.4rem; border-radius: 0.25rem; border: 1px solid #31a574; background: transparent; color: #31a574; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; transition: background 0.15s; }
    .blocks-term-side-controls button:hover { background: #31a574; color: #fff; }
    #blocks-term-action-buttons { display: flex; flex-wrap: nowrap; gap: 0.25rem; margin-left: auto; flex-shrink: 1; min-width: 0; overflow: hidden; }
    #blocks-term-action-buttons button { padding: 0.25rem 0.5rem; border: none; border-radius: 0.25rem; background: #31a574; color: #fff; font-size: 0.68rem; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: visible; }
    #blocks-term-action-buttons button:hover { background: #2a8f64; }
    #blocks-term-body { flex: 1; min-height: 0; display: flex; flex-direction: row; overflow: hidden; background: #1a2332; box-sizing: border-box; }
    #blocks-term-xterm { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
    #blocks-term-xterm #term { flex: 1; min-height: 0; overflow: hidden; }
    #blocks-term-xterm .xterm { flex: 1; min-height: 0; padding: 0; background: #1a2332 !important; }
    #blocks-term-xterm .xterm-viewport { background-color: #1a2332 !important; overflow-y: scroll !important; width: calc(100% + 0px) !important; }
    #blocks-term-xterm .xterm-screen { background: #1a2332 !important; display: block; }
    body.blocks-term-open #content_blocks { transition: none; padding-bottom: 0 !important; }

    /* Per-button colors */
    #bterm-run-btn   { background: #1e88e5 !important; border: 2px solid #1e88e5 !important; }
    #bterm-run-btn:hover:not(.btn-disabled)   { background: #1565c0 !important; }
    #bterm-stop-btn  { background: #e53935 !important; border: 2px solid #e53935 !important; }
    #bterm-stop-btn:hover:not(.btn-disabled)  { background: #b71c1c !important; }
    #bterm-reset-btn { background: #fb8c00 !important; border: 2px solid #fb8c00 !important; }
    #bterm-reset-btn:hover:not(.btn-disabled) { background: #e65100 !important; }
    #bterm-python-btn { background: #7b1fa2 !important; border: 2px solid #7b1fa2 !important; }
    #bterm-python-btn:hover:not(.btn-disabled) { background: #4a148c !important; }
    #bterm-clear-btn { background: #546e7a !important; border: 2px solid #546e7a !important; }
    #bterm-clear-btn:hover:not(.btn-disabled) { background: #37474f !important; }
    #blocks-term-action-buttons button.btn-active { background: #2a8f64; box-shadow: 0 0 0 3px rgba(255,255,255,0.5),0 0 12px rgba(255,255,255,0.25) !important; border-color: #fff !important; }
    #blocks-term-action-buttons button.btn-disabled,#file-boxes-console button.btn-disabled { opacity: 0.3 !important; cursor: not-allowed !important; pointer-events: none !important; }
    #file-boxes-console button.btn-active { box-shadow: 0 0 0 3px rgba(255,255,255,0.5),0 0 12px rgba(255,255,255,0.25) !important; border-color: #fff !important; }

    /* Blockly toolbox */
    .blocklyTreeLabel { color: #2c3e50; font-weight: 700; font-size: 15px; transition: color 0.2s ease; }
    .boldtext text { font-weight: 900 !important; font-size: 13px; }
    .blocklyToolboxContents { padding: 0.75em; background-color: #f8f9fa; }
    .blocklyTreeRow { padding: 8px 12px; margin-bottom: 0.5em; border-radius: 6px; transition: all 0.2s ease; cursor: pointer; border: 3px solid #8b95a1; box-shadow: 0 3px 6px rgba(0,0,0,0.15); background-color: #dce1e8; }
    .blocklyTreeRow:hover { background-color: #c8d0db; transform: translateX(2px); border-color: #6b7785; box-shadow: 0 4px 8px rgba(0,0,0,0.18); }
    .blocklyTreeRow.blocklyTreeSelected { background-color: #b8c4d1; border-color: #4a9eff; box-shadow: 0 4px 10px rgba(74,158,255,0.35); }
    .blocklyTreeIcon { margin-right: 8px; }
    .blocklyTreeSeparator { border-top: 1px solid #d1d5db; margin: 0.75em 0; opacity: 0.6; }
    .blocklyTreeRow .blocklyTreeRow { margin-left: 12px; font-size: 13px; }
    .blocklyToolboxDiv { box-shadow: 2px 0 8px rgba(0,0,0,0.08); }

    /* Splash-screen modal */
    .modal { display: none; position: fixed; z-index: 1000000; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
    .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #188; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; }
    .closeM { color: white; float: right; font-size: 28px; font-weight: bold; }
    .closeM:hover,.closeM:focus { color: #000; text-decoration: none; cursor: pointer; }
    .modal-body { padding: 2px 16px; }
    .modal-footer { padding: 2px 16px; background-color: var(--main-green,#31a574); color: white; }

    /* Help dots */
    .help-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 5px; flex-shrink: 0; vertical-align: middle; transition: background-color 0.4s ease, box-shadow 0.4s ease; }
    .help-dot.waiting { background: #FFC107; box-shadow: 0 0 4px 1px rgba(255,193,7,0.7); animation: helpPulse 1.5s infinite; }
    .help-dot.joined  { background: #4CAF50; box-shadow: 0 0 6px 2px rgba(76,175,80,0.8); animation: none; }

}


/* ============================================================
   KEYFRAME ANIMATIONS  (outside @layer — must be non-layered)
   ============================================================ */

@keyframes blinking {
    0%   { background-color: var(--blinking-bg); }
    50%  { background-color: var(--blinking-bg-alt); }
    100% { background-color: var(--blinking-bg); }
}

@keyframes spin { 100% { transform: rotate(360deg); } }

@-webkit-keyframes progress {
    0%   { left: 100%; transform: translateX(0); }
    100% { left: 0;    transform: translateX(-100%); }
}

@keyframes pulse-orange {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,152,0,0.7); }
    50%      { box-shadow: 0 0 0 8px rgba(255,152,0,0); }
}

@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@-webkit-keyframes animatetop {
    from { top: -300px; opacity: 0; }
    to   { top: 0;      opacity: 1; }
}

@keyframes animatetop {
    from { top: -300px; opacity: 0; }
    to   { top: 0;      opacity: 1; }
}

@keyframes helpPulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.4; }
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 710px)  { .tab_collapse { display: none; } }
@media (max-width: 88rem)  { .tabs > div { padding: 0 0.6rem; font-size: 0.78rem; } }
@media (max-width: 60rem)  { .tabs > div { padding: 0 0.4rem; font-size: 0.7rem;  } }
@media (max-width: 59.99em) { #device_selector { width: 13rem; } }

@media (min-width: 60em) {
    .account-panel,.notify-panel { border-radius: 1rem; margin: 0.5em; border: 1px solid var(--account-panel-border) !important; }
    .top-menu > .toolbar { display: flex; height: 2.125rem; }
    .top-menu > #toolbarButton { display: none; }
}

@media (max-width: 59.99em) {
    .notify-panel,.account-panel { padding-top: 4.5rem; }
    .top-menu > .toolbar {
        box-sizing: border-box; z-index: 999; position: fixed; display: flex; flex-wrap: wrap;
        align-items: center; justify-content: center; height: 7rem; width: 18.5rem;
        transition: .125s ease right,.125s ease top,.125s ease opacity;
        background: var(--toolbar-popup-bg); border-radius: 1em; top: -5rem; right: -20rem;
        margin-right: 0; border: 1px solid var(--toolbar-popup-border);
        box-shadow: 0 0 0.5em var(--toolbar-popup-shadow); opacity: 0;
    }
    .top-menu > .toolbar#show { top: .25rem; right: .25rem; opacity: 1; }
    .toolbar > #channel_connect { order: 1; margin-right: 0; margin-left: .125rem; }
    .logo { font-size: 0 !important; }
    #toolbarButton { border-radius: 1rem; border: 1px solid var(--toolbar-button-border); transition: .125s ease box-shadow; }
    #toolbarButton:hover { box-shadow: 0 0 0.25em var(--toolbar-button-hover-shadow); }
    .channel-panel { right: -16rem; top: 3.5rem; }
    .channel-panel#show { right: .25rem; top: 3.5rem; }
}

@media (max-width: 768px) {
    .extension-list { grid-template-columns: 1fr; }
    .extension-modal-content { width: 95%; height: 95%; }
}


/* ============================================================
   WEBKIT SCROLLBARS
   ============================================================ */

::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); }

.extension-category-list::-webkit-scrollbar,.extension-grid::-webkit-scrollbar { width: 8px; }
.extension-category-list::-webkit-scrollbar-track,.extension-grid::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); }
.extension-category-list::-webkit-scrollbar-thumb,.extension-grid::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: 4px; }
.extension-category-list::-webkit-scrollbar-thumb:hover,.extension-grid::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); }

.blocklyToolboxContents::-webkit-scrollbar       { width: 8px; }
.blocklyToolboxContents::-webkit-scrollbar-track { background: #f1f1f1; }
.blocklyToolboxContents::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.blocklyToolboxContents::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

#content_console #term .xterm-viewport::-webkit-scrollbar       { width: 6px; }
#content_console #term .xterm-viewport::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
#content_console #term .xterm-viewport::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 5px; }
#content_console #term .xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.7); }

#blocks-term-xterm .xterm-viewport::-webkit-scrollbar       { width: 6px; }
#blocks-term-xterm .xterm-viewport::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
#blocks-term-xterm .xterm-viewport::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 5px; }
#blocks-term-xterm .xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.7); }


/* ============================================================
   TAWK.TO — positioning only
   (hide rule stays inline in index.html as <style id="tawk-hide-style">
   so JS can remove it to reveal the widget for students)
   ============================================================ */
div.tawk-min-container {
    right: 100px !important;
    left: auto !important;
    bottom: 45px !important;
    position: fixed !important;
    top: auto !important;
}


/* Preserve icon button backgrounds — Tailwind preflight resets these */
.icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* ============================================================
   ADDITIONS FROM style.css — appended during style.css removal
   ============================================================ */

/* #content_files — missing overflow */
#content_files { overflow: hidden; }

/* .content — missing properties */
.content { box-sizing: border-box; overflow-x: hidden; }

/* Blocks2Code active state */
#blocks2Code > div.active { background-color: #e0e0e0; border-color: #aaa; }

/* Scan button hover spin */
#scanButton:hover:before { animation: spin 1s linear infinite; }

/* Firmware button icon size */
#firmwareButton::before { font-size: 1.2em; }

/* CodeMirror placeholder text */
.CodeMirror.cm-s-default::after {
    content: 'Select a project to view its code';
    display: block;
    text-align: center;
    color: #aaa;
    font-size: 1rem;
    font-family: Poppins;
    pointer-events: none;
    position: absolute;
    width: 100%;
    top: 40%;
    left: 0;
}
.file-open .CodeMirror.cm-s-default::after { content: none; }

/* Code view selected state */
#blocks2codePython.selected,
#blocks2codeXML.selected {
    background-color: #e0e0e0;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Files tab — right project sidebar ── */
#files-project-sidebar {
    display: none;
    flex-direction: column;
    border-left: 1px solid #ddd;
    overflow: hidden;
    background: #fff;
    position: fixed;
    top: calc(var(--top-height) + 2.5rem);
    right: 0;
    width: 260px;
    height: calc(100vh - var(--top-height) - 2.5rem);
    z-index: 100;
    box-shadow: -3px 0 12px rgba(0,0,0,0.12);
}
#files-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    height: 2.5rem;
}
#files-sidebar-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    font-family: Poppins;
}
#files-sidebar-search {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}
#filesTabSearchInput {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-family: Poppins, sans-serif;
    outline: none;
    transition: border-color ease .15s;
}
#filesTabSearchInput:focus { border-color: var(--main-green); }
#filesTabProjectList {
    overflow-y: auto;
    padding: 0.25rem;
    flex: 1;
}
#filesTabProjectList > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.25rem 0;
    padding: 0.25rem;
    border-radius: .25rem;
    border: 1px solid #ccc;
    cursor: pointer;
    min-height: 2rem;
    font-size: 0.9rem;
    font-family: Poppins;
    word-break: break-word;
    transition: box-shadow ease .125s, background-color linear .125s, border-color linear .125s, color linear .125s;
}
#filesTabProjectList > div.current {
    color: #fff;
    background: var(--main-green);
    box-shadow: 0 0.125em 0.25em var(--main-black);
}
#filesTabProjectList > div.current span { filter: invert(1); }
#filesTabProjectsBtn {
    background-color: transparent;
    color: black;
    border: none;
    border-radius: 2rem;
    padding: .25em .75em;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color ease .15s, box-shadow ease .15s;
}
#filesTabProjectsBtn:hover { background-color: #278a61; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
#filesTabProjectsBtn:active { background-color: #1f6e4d; }