/* ================================================================
   TIA v0.5.93.98 MAIN LAYOUT CSS MODULE
   Extracted from index.html to keep the main app shell smaller.
   This is layout/style-only modularization: no artwork, command,
   import/export, undo/redo, or distort behavior changes.
   ================================================================ */
html, body {
    margin:0; padding:0;
    width:100%; height:100%;
    overflow:hidden;
    background:#222;
    font-family: Arial, sans-serif;
  }

  #top1 {
    position:absolute;
    top:0; left:0; right:280px;
    height:86px;
    background:#222;
    display:flex;
    align-items:center;
    padding:0 8px;
    box-sizing:border-box;
    gap:0;
  }
  #logo-placeholder {
    width:fit-content;
    min-width:0;
    height:60px;
    background:transparent;
    border:1px solid transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:14px;
    margin-right:8px;
    box-sizing:border-box;
    overflow:hidden;
  }
  #top1-separator {
    width:1px;
    height:50%;
    background:#999;
    margin-right:8px;
  }
  .top-icon {
    width:32px;
    height:32px;
    background:#888;
    margin-right:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:16px;
    border-radius:4px;
    box-sizing:border-box;
    border:1px solid transparent;
    user-select:none;
  }
  #interactive-icons {
    display:flex;
    align-items:center;
    min-height:32px;
  }
  #interactive-icons.tia-quick-actions-mode {
    min-height:66px;
    align-items:flex-end;
  }

  /* ================================================================
     TIA TOP BAR QUICK ACTION ICONS SECTION
     Selection/action buttons beside the logo. Future module target:
     src/ui/top-quick-actions.css
     ================================================================ */
  #interactive-icons.tia-quick-actions-mode {
    gap:var(--tia-dynamic-button-spacing, 6px);
    flex-wrap:nowrap;
    overflow:hidden;
  }
  .top-icon.tia-quick-action-icon {
    font-size:10px;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1;
    background:linear-gradient(180deg, rgba(92,96,98,0.95), rgba(58,62,64,0.95));
    border-color:rgba(255,255,255,0.12);
  }
  .top-icon.tia-quick-action-icon:hover,
  .top-icon.tia-quick-action-icon:focus {
    border-color:rgba(99,255,157,0.55);
    box-shadow:0 0 0 2px rgba(99,255,157,0.14) inset;
    outline:none;
  }
  .top-icon.tia-quick-action-icon.tia-quick-action-danger {
    background:linear-gradient(180deg, rgba(118,70,70,0.95), rgba(78,47,47,0.95));
  }
  /* ================================================================
     TIA v0.5.93.68 QUICK ACTION AVAILABILITY VISUAL REPAIR
     Enabled commands look available immediately after selection changes;
     disabled commands stay muted without the misleading red no-entry cursor.
     ================================================================ */
  .top-icon.tia-quick-action-icon.tia-quick-action-enabled {
    opacity:1;
    cursor:pointer;
    color:rgba(207,255,225,0.96);
    filter:none;
  }
  .top-icon.tia-quick-action-icon.tia-quick-action-disabled {
    opacity:0.30;
    cursor:default;
    filter:saturate(0.45);
  }
  .top-icon.tia-quick-action-separator {
    width:1px !important;
    min-width:1px !important;
    flex:0 0 1px !important;
    height:24px !important;
    min-height:24px !important;
    padding:0 !important;
    margin:0 2px !important;
    border:0;
    border-radius:0;
    background:rgba(255,255,255,0.16);
    pointer-events:none;
  }
  #tia-quick-action-status {
    margin-left:8px;
    min-width:0;
    max-width:320px;
    color:#9cffbd;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:0;
    transition:opacity 0.18s ease;
  }
  #tia-quick-action-status.tia-quick-action-status-visible {
    opacity:1;
  }

  /* ================================================================
     TIA AUTH / LOGIN SESSION CSS MODULE LINK
     Login/session styles are now isolated in src/auth/session.css.
     Keep this marker for future modular extraction.
     ================================================================ */
  .top-icon.shape-icon {
    cursor:pointer;
  }
  .top-icon.active-icon {
    border-color:#ffffff;
    box-shadow:0 0 0 2px rgba(255,255,255,0.25) inset;
    background:#6f6f6f;
  }
  .top-icon.text-icon, .top-icon.curve-control-icon {
    cursor:pointer;
  }
  .top-icon.curve-control-icon {
    width:auto;
    min-width:34px;
    padding:0 7px;
    font-size:12px;
  }
  .top-icon.curve-control-icon.wide {
    min-width:48px;
  }
  .top-icon.vector-tool-icon {
    width:auto;
    min-width:46px;
    padding:0 7px;
    font-size:12px;
    cursor:pointer;
  }
  .top-icon.vector-tool-icon.wide {
    min-width:64px;
  }

  #top2 {
    position:absolute;
    top:86px; left:0; right:280px;
    height:32px;
    background:#333;
    display:flex;
    align-items:center;
    padding:0 8px;
    box-sizing:border-box;
  }
  .dropdown-text {
    color:#fff;
    margin-right:12px;
    cursor:pointer;
    font-size:13px;
    position:relative;
    user-select:none;
  }
  .dropdown-box {
    display:none;
    position:absolute;
    top:100%; left:0;
    background:#555;
    color:#fff;
    min-width:110px;
    border:1px solid #444;
    border-radius:4px;
    padding:4px 0;
    z-index:1000;
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
  }
  .dropdown-text:hover .dropdown-box { display:block; }
  .menu-item {
    padding:4px 10px;
    white-space:nowrap;
    display:block;
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
    box-sizing:border-box;
  }
  .menu-item:hover { background:#666; }
  .top2-separator { width:1px; height:15px; background:#999; margin-left:8px; }


  /* ================================================================
     TIA ADMIN DROPDOWN SECTION
     Admin access menu in the second toolbar row.
     Future module target: src/admin/admin-dropdown.css
     ================================================================ */
  .admin-menu-spacer {
    flex:1;
    min-width:12px;
  }
  .admin-dropdown {
    margin-left:8px;
    margin-right:8px;
    padding:3px 9px;
    border:1px solid rgba(99,255,157,0.45);
    border-radius:5px;
    background:rgba(0,0,0,0.18);
    color:#dfffe9;
    font-weight:bold;
  }
  .admin-dropdown::after {
    content:'▾';
    margin-left:6px;
    font-size:10px;
    opacity:0.8;
  }
  .admin-dropdown .dropdown-box {
    left:auto;
    right:0;
    min-width:170px;
    background:#3f3f3f;
    border-color:rgba(99,255,157,0.5);
  }
  .admin-dropdown .menu-item {
    display:block;
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    color:#fff;
    font:inherit;
    font-size:12px;
    cursor:pointer;
    box-sizing:border-box;
  }
  .admin-dropdown .menu-item:hover,
  .admin-dropdown .menu-item:focus {
    background:#566258;
    color:#63ff9d;
    outline:none;
  }
  .admin-dropdown.tia-admin-role-hidden,
  .admin-dropdown [data-admin-area][hidden],
  .tia-admin-nav-button[hidden] {
    display:none !important;
  }
  .admin-status-note {
    position:absolute;
    right:268px;
    top:99px;
    z-index:1300;
    display:none;
    max-width:280px;
    padding:7px 10px;
    border:1px solid rgba(99,255,157,0.45);
    border-radius:7px;
    background:rgba(24,29,26,0.96);
    color:#eafff0;
    font-size:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    pointer-events:none;
  }
  .admin-status-note.admin-status-visible {
    display:block;
  }


  /* ================================================================
     TIA ADMIN PANEL / MODAL SECTION
     Reusable admin window shell connected to the Admin dropdown.
     Future module target: src/admin/admin-panel.css
     ================================================================ */
  .tia-admin-modal {
    position:fixed;
    inset:0;
    z-index:2600;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.54);
    backdrop-filter:blur(4px);
    font-family:Arial, sans-serif;
  }
  .tia-admin-modal.tia-admin-modal-open {
    display:flex;
  }
  .tia-admin-window {
    width:min(1440px, calc(100vw - 24px));
    height:min(780px, calc(100vh - 24px));
    background:#242628;
    color:#f3f6f4;
    border:1px solid rgba(99,255,157,0.34);
    border-radius:18px;
    box-shadow:0 30px 90px rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .tia-admin-header {
    height:56px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 18px 0 20px;
    background:linear-gradient(180deg, #303335, #252729);
    border-bottom:1px solid rgba(255,255,255,0.09);
    box-sizing:border-box;
  }
  .tia-admin-title-wrap {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .tia-admin-title-flower {
    width:26px;
    height:26px;
    flex:0 0 auto;
    filter:drop-shadow(0 0 8px rgba(99,255,157,0.16));
  }
  .tia-admin-title-block {
    min-width:0;
  }
  .tia-admin-kicker {
    display:block;
    color:#91f7b5;
    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    line-height:1.2;
  }
  .tia-admin-title {
    margin:2px 0 0;
    font-size:18px;
    font-weight:800;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tia-admin-close {
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    background:rgba(255,255,255,0.06);
    color:#fff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
  }
  .tia-admin-close:hover,
  .tia-admin-close:focus {
    border-color:rgba(99,255,157,0.55);
    color:#91f7b5;
    outline:none;
  }
  .tia-admin-body {
    flex:1;
    min-height:0;
    display:flex;
  }
  .tia-admin-sidebar {
    width:204px;
    flex:0 0 auto;
    padding:14px 10px;
    box-sizing:border-box;
    background:#1d1f21;
    border-right:1px solid rgba(255,255,255,0.08);
    overflow:auto;
  }
  .tia-admin-nav-button {
    width:100%;
    height:38px;
    margin:0 0 6px;
    padding:0 12px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:#d5d9d7;
    text-align:left;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
  }
  .tia-admin-nav-button:hover,
  .tia-admin-nav-button:focus {
    background:#2a2d2f;
    color:#fff;
    outline:none;
  }
  .tia-admin-nav-button.tia-admin-nav-active {
    background:rgba(99,255,157,0.12);
    color:#9cffbd;
    border-color:rgba(99,255,157,0.34);
  }
  .tia-admin-content {
    flex:1;
    min-width:0;
    overflow:auto;
    padding:18px;
    box-sizing:border-box;
    background:radial-gradient(circle at top left, rgba(99,255,157,0.06), transparent 38%), #282a2c;
  }
  .tia-admin-page-heading {
    margin:0 0 6px;
    font-size:24px;
    font-weight:800;
  }
  .tia-admin-page-copy {
    margin:0 0 20px;
    max-width:980px;
    color:#c3cac6;
    line-height:1.45;
    font-size:13px;
  }
  .tia-admin-card-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .tia-admin-card {
    min-height:104px;
    padding:15px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
    box-sizing:border-box;
  }
  .tia-admin-card h4 {
    margin:0 0 8px;
    font-size:14px;
    color:#ffffff;
  }
  .tia-admin-card p {
    margin:0;
    color:#bfc7c3;
    font-size:12px;
    line-height:1.42;
  }
  .tia-admin-placeholder-control {
    margin-top:12px;
    height:30px;
    border-radius:9px;
    border:1px dashed rgba(99,255,157,0.28);
    display:flex;
    align-items:center;
    padding:0 10px;
    color:#8dfab2;
    font-size:11px;
    box-sizing:border-box;
  }


  /* ================================================================
     TIA APPEARANCE PAGE SECTION
     Live theme variables and Appearance admin page controls.
     Future module target: src/admin/appearance.css
     ================================================================ */
  :root {
    --tia-app-bg:#222222;
    --tia-canvas-bg:#111111;
    --tia-top-toolbar:#222222;
    --tia-menu-toolbar:#333333;
    --tia-tabs-bar:#444444;
    --tia-side-toolbar:#555555;
    --tia-right-panel:#666666;
    --tia-bottom-bar:#777777;
    --tia-button-bg:#888888;
    --tia-active-button:#6f6f6f;
    --tia-accent:#63ff9d;
    --tia-active-tab:#2f2f2f;
    --tia-text-color:#ffffff;
    --tia-admin-panel:#242628;
  }
  html, body {
    background:var(--tia-app-bg, #222222) !important;
    color:var(--tia-text-color, #ffffff);
  }
  #top1 { background:var(--tia-top-toolbar, #222222) !important; }
  #top2 { background:var(--tia-menu-toolbar, #333333) !important; }
  #top3 { background:var(--tia-tabs-bar, #444444) !important; }
  #leftBar { background:var(--tia-side-toolbar, #555555) !important; }
  #rightBar { background:var(--tia-right-panel, #666666) !important; }


  /* ================================================================
     TIA RIGHT-SIDE PAGES / LAYERS PANEL POLISH SECTION
     Cleaner panel cards, stronger selected states, and collapsible panel shell.
     Future module target: src/ui/right-panel.css + src/ui/pages-layers-panel.css
     ================================================================ */
  /* ================================================================
     TIA RIGHT PANEL WIDTH / 20PX WIDER SECTION
     Right panel widened from 260px to 280px to give Pages/Layers names more room.
     Future module target: src/ui/right-panel-size.css
     ================================================================ */
  :root {
    --tia-right-panel-width:280px;
    --tia-right-panel-live-width:var(--tia-right-panel-width);
    --tia-right-panel-card-bg:rgba(18, 20, 20, 0.34);
    --tia-right-panel-card-border:rgba(255, 255, 255, 0.12);
    --tia-layer-row-bg:rgba(0, 0, 0, 0.18);
    --tia-layer-row-hover:rgba(99, 255, 157, 0.08);
    --tia-bottom-bar-height:32px;
    --tia-bottom-swatch-size:18px;
    --tia-bottom-swatch-gap:3px;
    --tia-bottom-fill-width:27px;
  }
  body.tia-right-panel-collapsed {
    --tia-right-panel-live-width:0px;
  }
  #top1,
  #top2,
  #top3,
  #bottomBar {
    right:var(--tia-right-panel-live-width, 280px) !important;
    transition:right 0.18s ease;
  }
  .tia-user-session-bar {
    right:calc(var(--tia-right-panel-live-width, 280px) + 16px) !important;
    transition:right 0.18s ease;
  }
  .admin-status-note {
    right:calc(var(--tia-right-panel-live-width, 280px) + 8px) !important;
    transition:right 0.18s ease;
  }
  #rightBar {
    width:var(--tia-right-panel-width, 280px) !important;
    align-items:stretch !important;
    gap:8px;
    padding:8px 10px 10px;
    border-left:1px solid rgba(255,255,255,0.13);
    box-shadow:-18px 0 36px rgba(0,0,0,0.20);
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--tia-right-panel, #666666) 88%, white 4%),
      color-mix(in srgb, var(--tia-right-panel, #666666) 78%, black 18%)
    ) !important;
    transform:translateX(0);
    transition:transform 0.18s ease, box-shadow 0.18s ease;
    z-index:1200;
  }
  body.tia-right-panel-collapsed #rightBar {
    transform:translateX(100%);
    box-shadow:none;
  }
  body:not(.tia-authenticated) #rightBar,
  body:not(.tia-authenticated) #tia-right-panel-toggle {
    visibility:hidden;
    pointer-events:none;
  }
  #control-center-placeholder,
  #pages-layers-placeholder {
    width:100% !important;
    border:1px solid var(--tia-right-panel-card-border, rgba(255,255,255,0.12)) !important;
    border-radius:12px !important;
    background:var(--tia-right-panel-card-bg, rgba(18,20,20,0.34)) !important;
    box-shadow:0 10px 26px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.06) inset;
  }
  #control-center-placeholder {
    min-height:260px;
    margin-top:0 !important;
  }
  #pages-layers-placeholder {
    margin-top:0 !important;
    padding:0;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(99,255,157,0.55) rgba(0,0,0,0.18);
  }
  #pages-layers-placeholder::-webkit-scrollbar { width:8px; }
  #pages-layers-placeholder::-webkit-scrollbar-track { background:rgba(0,0,0,0.18); border-radius:999px; }
  #pages-layers-placeholder::-webkit-scrollbar-thumb { background:rgba(99,255,157,0.48); border-radius:999px; }
  .pages-layers-header {
    min-height:40px !important;
    height:auto !important;
    padding:8px 9px !important;
    border-bottom:1px solid rgba(255,255,255,0.10) !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.10)) !important;
    position:sticky;
    top:0;
    z-index:2;
    backdrop-filter:blur(8px);
  }
  .pages-layers-title-wrap {
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
  }
  .pages-layers-title {
    color:#fff;
    font-size:12px;
    letter-spacing:0.01em;
  }
  .pages-layers-subtitle {
    color:rgba(255,255,255,0.56);
    font-size:10px;
    font-weight:normal;
  }
  .add-page-button {
    height:27px !important;
    min-width:78px !important;
    border-radius:999px !important;
    border-color:rgba(99,255,157,0.44) !important;
    background:rgba(99,255,157,0.10) !important;
    color:#dfffe9 !important;
    font-weight:bold;
    transition:background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
  }
  .add-page-button:hover,
  .add-page-button:focus {
    background:rgba(99,255,157,0.17) !important;
    border-color:rgba(99,255,157,0.78) !important;
    transform:translateY(-1px);
  }
  .page-layer-list {
    padding:8px !important;
  }
  .page-row {
    min-height:54px !important;
    gap:7px !important;
    padding:6px !important;
    border-radius:10px !important;
    border-color:rgba(255,255,255,0.10) !important;
    background:rgba(255,255,255,0.055) !important;
    box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
    transition:background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
  }
  .page-row:hover {
    background:rgba(255,255,255,0.085) !important;
    border-color:rgba(99,255,157,0.34) !important;
  }
  .page-row.active {
    border-color:rgba(99,255,157,0.76) !important;
    background:linear-gradient(90deg, rgba(99,255,157,0.18), rgba(255,255,255,0.055)) !important;
    box-shadow:0 0 0 1px rgba(99,255,157,0.10) inset, 0 10px 22px rgba(0,0,0,0.12);
  }
  .page-toggle {
    width:20px !important;
    min-width:20px !important;
    height:30px;
    border-radius:7px !important;
    color:rgba(255,255,255,0.82) !important;
  }
  .page-toggle:hover {
    background:rgba(255,255,255,0.08) !important;
    color:var(--tia-accent, #63ff9d) !important;
  }
  .page-thumbnail-wrap {
    width:58px !important;
    min-width:58px !important;
    height:40px !important;
    border-radius:8px !important;
    border-color:rgba(255,255,255,0.13) !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.20) inset;
  }
  .page-row.active .page-thumbnail-wrap {
    border-color:rgba(99,255,157,0.80) !important;
  }
  .page-title-text {
    font-size:12px;
    line-height:1.15;
  }
  .page-layer-count {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.68) !important;
    font-size:9.5px !important;
    white-space:nowrap;
  }
  .layer-row {
    min-height:30px !important;
    height:auto !important;
    margin:0 0 5px 20px !important;
    padding:4px 5px 4px 8px !important;
    gap:6px !important;
    border-radius:9px !important;
    border-color:rgba(255,255,255,0.08) !important;
    background:var(--tia-layer-row-bg, rgba(0,0,0,0.18)) !important;
    transition:background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
  }
  .layer-row:hover {
    background:var(--tia-layer-row-hover, rgba(99,255,157,0.08)) !important;
    border-color:rgba(99,255,157,0.28) !important;
    transform:translateX(-1px);
  }
  .layer-row.active {
    color:var(--tia-accent, #63ff9d) !important;
    border-color:rgba(99,255,157,0.72) !important;
    background:linear-gradient(90deg, rgba(99,255,157,0.16), rgba(0,0,0,0.16)) !important;
    box-shadow:3px 0 0 var(--tia-accent, #63ff9d) inset, 0 5px 14px rgba(0,0,0,0.12);
  }
  .layer-icon {
    width:20px !important;
    min-width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.74) !important;
    font-size:11px;
  }
  .layer-row.active .layer-icon {
    color:var(--tia-accent, #63ff9d) !important;
    background:rgba(99,255,157,0.12);
  }
  .layer-name {
    font-size:11.5px;
  }
  .page-action-button,
  .layer-state-button,
  .layer-order-button,
  .layer-rename-button {
    width:24px !important;
    min-width:24px !important;
    height:24px !important;
    border-radius:7px !important;
    background:rgba(255,255,255,0.06) !important;
    border-color:rgba(255,255,255,0.12) !important;
  }
  .layer-order-button {
    font-size:10px !important;
  }
  .page-action-button:hover,
  .layer-state-button:hover,
  .layer-order-button:hover,
  .layer-rename-button:hover {
    background:rgba(99,255,157,0.10) !important;
    border-color:rgba(99,255,157,0.65) !important;
    color:var(--tia-accent, #63ff9d) !important;
  }
  .layer-row.hidden-layer {
    opacity:0.68;
  }
  .layer-row.locked-layer {
    border-style:dashed !important;
  }
  .empty-layer-note {
    margin:4px 0 7px 22px !important;
    padding:8px 9px;
    border:1px dashed rgba(255,255,255,0.13);
    border-radius:9px;
    color:rgba(255,255,255,0.58) !important;
    background:rgba(0,0,0,0.12);
  }
  /* ================================================================
     TIA v0.5.92.6 RIGHT PANEL HANDLE CLEANUP SECTION
     Removes the extra dark vertical backing bar while keeping the green
     collapse/expand handle clickable and visible.
     ================================================================ */
  .tia-right-panel-toggle {
    position:fixed;
    top:151px;
    right:calc(var(--tia-right-panel-live-width, 280px) - 1px);
    z-index:1250;
    width:20px;
    height:34px;
    border:0;
    border-right:0;
    border-radius:0;
    background:transparent;
    color:var(--tia-accent, #63ff9d);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
    transition:right 0.18s ease, color 0.14s ease, opacity 0.14s ease;
  }

  /* ================================================================
     TIA v0.5.92.9 RIGHT PANEL HANDLE REMOVAL SECTION
     Removes the temporary right-side collapse handle entirely.
     Right panel stays open; a new handle can be designed later.
     ================================================================ */
  #tia-right-panel-toggle {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }


  /* ================================================================
     TIA v0.5.92.10 RIGHT PANEL LEFT GUTTER REMOVAL SECTION
     Removes the visible vertical gutter between the canvas and Areas 6/7.
     The right panel stays open; only the unused left padding strip is removed.
     ================================================================ */
  #rightBar {
    padding-left:0 !important;
    border-left:0 !important;
  }
  #control-center-placeholder,
  #pages-layers-placeholder {
    border-top-left-radius:0 !important;
    border-bottom-left-radius:0 !important;
  }

  .tia-right-panel-toggle:hover,
  .tia-right-panel-toggle:focus {
    background:transparent;
    outline:none;
    opacity:0.88;
  }
  body.tia-right-panel-collapsed .tia-right-panel-toggle {
    right:0;
  }
  .tia-right-panel-toggle-icon {
    display:block;
    transform:rotate(0deg);
    font-size:18px;
    line-height:1;
    text-shadow:0 0 7px rgba(99,255,157,0.55);
  }
  body.tia-right-panel-collapsed .tia-right-panel-toggle-icon {
    transform:rotate(180deg);
  }
  @media (max-width:900px) {
    :root { --tia-right-panel-width:240px; }
    .tia-right-panel-toggle { top:149px; }
  }

  #bottomBar { background:var(--tia-bottom-bar, #777777) !important; }
  #canvas { background:var(--tia-canvas-bg, #111111) !important; }
  #logo-placeholder,
  #control-center-placeholder,
  #pages-layers-placeholder,
  .page-row,
  .layer-row {
    color:var(--tia-text-color, #ffffff);
  }
  #logo-placeholder,
  #control-center-placeholder,
  #pages-layers-placeholder {
    background:color-mix(in srgb, var(--tia-right-panel, #666666) 78%, black 22%) !important;
  }
  .tool-button,
  .top-icon,
  .project-tab {
    background:var(--tia-button-bg, #888888) !important;
    color:var(--tia-text-color, #ffffff) !important;
  }
  .tool-button.active-tool,
  .top-icon.active-icon {
    background:var(--tia-active-button, #6f6f6f) !important;
    border-color:var(--tia-accent, #63ff9d) !important;
  }
  .project-tab.active-project-tab {
    background:var(--tia-active-tab, #2f2f2f) !important;
    border-color:var(--tia-accent, #63ff9d) !important;
    color:var(--tia-accent, #63ff9d) !important;
  }
  .admin-dropdown,
  .control-tab.active,
  .page-row.active,
  .layer-row.active,
  .tia-admin-kicker,
  .tia-admin-nav-button.tia-admin-nav-active,
  .tia-admin-placeholder-control {
    color:var(--tia-accent, #63ff9d) !important;
  }
  .selection-rect {
    border-color:var(--tia-accent, #63ff9d) !important;
    background:color-mix(in srgb, var(--tia-accent, #63ff9d) 15%, transparent) !important;
  }
  .tia-admin-window { background:var(--tia-admin-panel, #242628) !important; }
  .tia-admin-nav-button.tia-admin-nav-active,
  .admin-dropdown {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 55%, transparent) !important;
  }
  .tia-appearance-form {
    display:grid;
    gap:16px;
  }
  .tia-appearance-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-appearance-mode-label {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#dbe2de;
    font-weight:700;
  }
  .tia-appearance-mode-label select {
    height:32px;
    border:1px solid rgba(255,255,255,0.15);
    border-radius:9px;
    background:#141516;
    color:#fff;
    padding:0 9px;
  }
  .tia-appearance-actions {
    display:flex;
    gap:8px;
    margin-left:auto;
  }
  .tia-appearance-button {
    height:32px;
    padding:0 13px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.14);
    background:#36393b;
    color:#f7f7f7;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-appearance-button.primary {
    background:linear-gradient(135deg, var(--tia-accent, #63ff9d), color-mix(in srgb, var(--tia-accent, #63ff9d) 50%, #ffffff 50%));
    color:#111;
    border-color:transparent;
  }
  .tia-appearance-layout {
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap:14px;
  }
  .tia-appearance-section {
    padding:15px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-appearance-section h4 {
    margin:0 0 11px;
    font-size:14px;
    color:#fff;
  }
  .tia-appearance-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .tia-color-control {
    display:grid;
    grid-template-columns:26px minmax(0, 1fr) 86px;
    align-items:center;
    gap:7px;
    min-width:0;
  }
  .tia-color-control label {
    grid-column:1 / -1;
    color:#c7d0cc;
    font-size:11px;
    font-weight:700;
  }
  .tia-color-control input[type="color"] {
    width:26px;
    height:28px;
    padding:0;
    border:1px solid rgba(255,255,255,0.17);
    border-radius:7px;
    background:transparent;
    cursor:pointer;
  }
  .tia-color-control input[type="text"] {
    width:100%;
    height:28px;
    min-width:0;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:8px;
    background:#151617;
    color:#fff;
    padding:0 8px;
    box-sizing:border-box;
    font-size:11px;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .tia-appearance-status {
    min-height:18px;
    color:var(--tia-accent, #63ff9d);
    font-size:12px;
    font-weight:700;
  }
  .tia-theme-preview {
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:14px;
    background:var(--preview-app-bg, #222);
    color:var(--preview-text-color, #fff);
  }
  .tia-theme-preview-top {
    height:28px;
    background:var(--preview-top-toolbar, #222);
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 10px;
    box-sizing:border-box;
  }
  .tia-preview-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--preview-accent, #63ff9d);
  }
  .tia-theme-preview-menu {
    height:22px;
    background:var(--preview-menu-toolbar, #333);
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 10px;
    font-size:10px;
  }
  .tia-theme-preview-tabs {
    height:24px;
    background:var(--preview-tabs-bar, #444);
    display:flex;
    align-items:end;
    padding:0 9px;
  }
  .tia-theme-preview-tab {
    height:19px;
    min-width:80px;
    border-radius:6px 6px 0 0;
    background:var(--preview-active-tab, #2f2f2f);
    border:1px solid var(--preview-accent, #63ff9d);
    border-bottom:0;
    color:var(--preview-accent, #63ff9d);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
  }
  .tia-theme-preview-body {
    height:150px;
    display:grid;
    grid-template-columns:38px minmax(0, 1fr) 82px;
  }
  .tia-theme-preview-left { background:var(--preview-side-toolbar, #555); padding:8px 6px; box-sizing:border-box; }
  .tia-theme-preview-canvas { background:var(--preview-canvas-bg, #111); display:flex; align-items:center; justify-content:center; font-size:11px; color:color-mix(in srgb, var(--preview-text-color, #fff) 72%, transparent); }
  .tia-theme-preview-right { background:var(--preview-right-panel, #666); padding:8px; box-sizing:border-box; }
  .tia-theme-preview-button {
    height:22px;
    margin-bottom:7px;
    border-radius:6px;
    background:var(--preview-button-bg, #888);
  }
  .tia-theme-preview-button.active { background:var(--preview-active-button, #6f6f6f); box-shadow:0 0 0 1px var(--preview-accent, #63ff9d) inset; }
  .tia-theme-preview-bottom { height:26px; background:var(--preview-bottom-bar, #777); }
  @media (max-width:900px) {
    .tia-appearance-layout,
    .tia-appearance-grid { grid-template-columns:1fr; }
    .tia-appearance-actions { width:100%; margin-left:0; }
  }
  @media (max-width:780px) {
    .tia-admin-window {
      width:calc(100vw - 24px);
      height:calc(100vh - 24px);
    }
    .tia-admin-body {
      flex-direction:column;
    }
    .tia-admin-sidebar {
      width:100%;
      display:flex;
      gap:6px;
      overflow:auto;
      border-right:0;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .tia-admin-nav-button {
      width:auto;
      min-width:138px;
      margin:0;
      white-space:nowrap;
    }
    .tia-admin-card-grid {
      grid-template-columns:1fr;
    }
  }


  /* ================================================================
     TIA USER ACCOUNTS PAGE SECTION
     Local browser-based user account admin foundation.
     Future module target: src/admin/users.css
     ================================================================ */
  .tia-users-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-users-button {
    height:32px;
    padding:0 13px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.14);
    background:#36393b;
    color:#f7f7f7;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-users-button.primary {
    background:linear-gradient(135deg, var(--tia-accent, #63ff9d), color-mix(in srgb, var(--tia-accent, #63ff9d) 50%, #ffffff 50%));
    color:#111;
    border-color:transparent;
  }
  .tia-users-button.danger {
    border-color:rgba(255,111,111,0.32);
    color:#ffd2d2;
  }
  .tia-users-button:hover,
  .tia-users-button:focus {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 60%, transparent);
    outline:none;
  }
  .tia-users-status {
    min-height:18px;
    color:var(--tia-accent, #63ff9d);
    font-size:12px;
    font-weight:700;
    margin-left:auto;
  }
  .tia-users-add-form {
    display:none;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
    padding:14px;
    border:1px solid rgba(99,255,157,0.22);
    border-radius:14px;
    background:rgba(99,255,157,0.055);
  }
  .tia-users-add-form.tia-users-form-open {
    display:grid;
  }
  .tia-users-field {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
  }
  .tia-users-field label,
  .tia-users-checkbox-field {
    color:#c7d0cc;
    font-size:11px;
    font-weight:800;
  }
  .tia-users-field input,
  .tia-users-field select,
  .tia-users-table select,
  .tia-users-password-input {
    height:30px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:8px;
    background:#151617;
    color:#fff;
    padding:0 8px;
    box-sizing:border-box;
    font-size:12px;
  }
  .tia-users-checkbox-field {
    min-height:30px;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .tia-users-form-actions {
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }
  .tia-users-summary-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
  }
  .tia-users-summary-card {
    padding:12px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-users-summary-label {
    display:block;
    color:#b9c3be;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .tia-users-summary-value {
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:22px;
    font-weight:900;
  }
  .tia-users-table-wrap {
    overflow:auto;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.035);
  }
  .tia-users-table {
    width:100%;
    border-collapse:collapse;
    min-width:840px;
    font-size:12px;
  }
  .tia-users-table th,
  .tia-users-table td {
    padding:10px 9px;
    border-bottom:1px solid rgba(255,255,255,0.075);
    text-align:left;
    vertical-align:middle;
  }
  .tia-users-table th {
    color:#d9e1dd;
    background:rgba(0,0,0,0.16);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    white-space:nowrap;
  }
  .tia-users-table tr:last-child td {
    border-bottom:0;
  }
  .tia-users-name {
    color:#fff;
    font-weight:900;
  }
  .tia-users-muted {
    color:#aeb7b2;
    font-size:11px;
  }
  .tia-users-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:62px;
    height:22px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06);
    font-size:11px;
    font-weight:900;
  }
  .tia-users-pill.active {
    color:var(--tia-accent, #63ff9d);
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 45%, transparent);
  }
  .tia-users-pill.inactive {
    color:#ffb8b8;
    border-color:rgba(255,111,111,0.32);
  }
  .tia-users-toggle {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
    user-select:none;
    color:#d5ddd9;
    font-size:11px;
    font-weight:800;
  }
  .tia-users-toggle input {
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .tia-users-toggle span {
    width:38px;
    height:20px;
    border-radius:999px;
    background:#4e5254;
    border:1px solid rgba(255,255,255,0.13);
    box-sizing:border-box;
    position:relative;
  }
  .tia-users-toggle span::after {
    content:'';
    position:absolute;
    top:2px;
    left:2px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#d8dfdc;
    transition:transform 0.16s ease;
  }
  .tia-users-toggle input:checked + span {
    background:color-mix(in srgb, var(--tia-accent, #63ff9d) 55%, #1a1c1d 45%);
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 70%, transparent);
  }
  .tia-users-toggle input:checked + span::after {
    transform:translateX(18px);
    background:#fff;
  }

  .tia-users-password-controls {
    display:flex;
    align-items:center;
    gap:6px;
    min-width:190px;
  }
  .tia-users-password-input {
    width:112px;
    min-width:112px;
  }
  .tia-users-password-note {
    color:#aeb7b2;
    font-size:10px;
    line-height:1.2;
    margin-top:3px;
  }
  .tia-users-actions {
    display:flex;
    gap:6px;
    white-space:nowrap;
  }
  .tia-users-mini-button {
    height:26px;
    padding:0 9px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.065);
    color:#f3f3f3;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-users-mini-button:hover,
  .tia-users-mini-button:focus {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 55%, transparent);
    color:var(--tia-accent, #63ff9d);
    outline:none;
  }
  @media (max-width:560px) {
    .tia-register-grid {
      grid-template-columns:1fr;
    }
  }
  @media (max-width:900px) {
    .tia-users-add-form,
    .tia-users-summary-grid {
      grid-template-columns:1fr;
    }
    .tia-users-status {
      width:100%;
      margin-left:0;
    }
  }


  /* Step 15 Users page safety/edit/search polish */
  .tia-users-permission-notes {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
  }
  .tia-users-note-card {
    padding:12px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    color:#c9d2cd;
    font-size:12px;
    line-height:1.35;
  }
  .tia-users-note-card strong {
    display:block;
    color:#fff;
    margin-bottom:4px;
    font-size:12px;
  }
  .tia-users-filter-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    padding:12px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(0,0,0,0.12);
  }
  .tia-users-filter-row input,
  .tia-users-filter-row select {
    height:32px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:9px;
    background:#151617;
    color:#fff;
    padding:0 10px;
    font-size:12px;
    box-sizing:border-box;
  }
  .tia-users-filter-row input {
    min-width:240px;
    flex:1 1 260px;
  }
  .tia-users-filter-row select {
    flex:0 0 150px;
  }
  .tia-users-form-title {
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#fff;
    font-size:13px;
    font-weight:900;
    padding-bottom:4px;
  }
  .tia-users-editing-pill,
  .tia-users-current-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:21px;
    padding:0 8px;
    border-radius:999px;
    background:rgba(99,255,157,0.13);
    border:1px solid rgba(99,255,157,0.32);
    color:var(--tia-accent, #63ff9d);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.05em;
    white-space:nowrap;
  }
  .tia-users-current-badge {
    margin-top:5px;
  }
  .tia-users-mini-button.danger {
    border-color:rgba(255,111,111,0.34);
    color:#ffd2d2;
  }
  .tia-users-mini-button[disabled],
  .tia-users-table select[disabled],
  .tia-users-toggle input[disabled] + span {
    opacity:0.55;
    cursor:not-allowed;
  }
  .tia-users-table tr.tia-users-current-row {
    background:rgba(99,255,157,0.045);
  }
  .tia-users-empty-cell {
    padding:20px !important;
    text-align:center !important;
  }
  @media (max-width:900px) {
    .tia-users-permission-notes {
      grid-template-columns:1fr;
    }
  }



  /* ================================================================
     TIA UPLOADED FONTS PAGE SECTION
     Local browser-based font library admin foundation.
     Future module target: src/admin/uploaded-fonts.css
     ================================================================ */
  .tia-fonts-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-fonts-button {
    height:32px;
    padding:0 13px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.14);
    background:#36393b;
    color:#f7f7f7;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-fonts-button.primary {
    background:linear-gradient(135deg, var(--tia-accent, #63ff9d), color-mix(in srgb, var(--tia-accent, #63ff9d) 50%, #ffffff 50%));
    color:#111;
    border-color:transparent;
  }
  .tia-fonts-button.danger {
    border-color:rgba(255,111,111,0.32);
    color:#ffd2d2;
  }
  .tia-fonts-button:hover,
  .tia-fonts-button:focus {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 60%, transparent);
    outline:none;
  }
  .tia-fonts-status {
    min-height:18px;
    color:var(--tia-accent, #63ff9d);
    font-size:12px;
    font-weight:700;
    margin-left:auto;
  }
  .tia-fonts-add-form {
    display:none;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
    padding:14px;
    border:1px solid rgba(99,255,157,0.22);
    border-radius:14px;
    background:rgba(99,255,157,0.055);
  }
  .tia-fonts-add-form.tia-fonts-form-open {
    display:grid;
  }
  .tia-fonts-field {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
  }
  .tia-fonts-field label {
    color:#c7d0cc;
    font-size:11px;
    font-weight:800;
  }
  .tia-fonts-field input,
  .tia-fonts-field select,
  .tia-fonts-table input,
  .tia-fonts-table select {
    height:30px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:8px;
    background:#151617;
    color:#fff;
    padding:0 8px;
    box-sizing:border-box;
    font-size:12px;
  }
  .tia-fonts-field input[type="file"] {
    height:auto;
    min-height:34px;
    padding:6px 8px;
  }
  .tia-fonts-form-actions {
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }
  .tia-fonts-summary-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
  }
  .tia-fonts-summary-card {
    padding:12px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-fonts-summary-label {
    display:block;
    color:#b9c3be;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .tia-fonts-summary-value {
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:22px;
    font-weight:900;
  }
  .tia-fonts-table-wrap {
    overflow:auto;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.035);
  }
  .tia-fonts-table {
    width:100%;
    border-collapse:collapse;
    min-width:980px;
    font-size:12px;
  }
  .tia-fonts-table th,
  .tia-fonts-table td {
    padding:10px 9px;
    border-bottom:1px solid rgba(255,255,255,0.075);
    text-align:left;
    vertical-align:middle;
  }
  .tia-fonts-table th {
    color:#d9e1dd;
    background:rgba(0,0,0,0.16);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    white-space:nowrap;
  }
  .tia-fonts-table tr:last-child td {
    border-bottom:0;
  }
  .tia-fonts-name {
    color:#fff;
    font-weight:900;
  }
  .tia-fonts-muted {
    color:#aeb7b2;
    font-size:11px;
  }
  .tia-fonts-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:80px;
    height:22px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06);
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
  }
  .tia-fonts-pill.available {
    color:var(--tia-accent, #63ff9d);
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 45%, transparent);
  }
  .tia-fonts-pill.pending {
    color:#ffe0a3;
    border-color:rgba(255,210,111,0.32);
  }
  .tia-fonts-pill.disabled {
    color:#ffb8b8;
    border-color:rgba(255,111,111,0.32);
  }
  .tia-fonts-actions {
    display:flex;
    gap:6px;
    white-space:nowrap;
  }
  .tia-fonts-mini-button {
    height:26px;
    padding:0 9px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.065);
    color:#f3f3f3;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-fonts-mini-button:hover,
  .tia-fonts-mini-button:focus {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 55%, transparent);
    color:var(--tia-accent, #63ff9d);
    outline:none;
  }
  .tia-fonts-note {
    margin-top:10px;
    color:#aeb7b2;
    font-size:11px;
    line-height:1.45;
  }
  @media (max-width:900px) {
    .tia-fonts-add-form,
    .tia-fonts-summary-grid {
      grid-template-columns:1fr;
    }
    .tia-fonts-status {
      width:100%;
      margin-left:0;
    }
  }


  /* ================================================================
     TIA TEMPLATES PAGE SECTION
     Local browser-based reusable template admin foundation.
     Future module target: src/admin/templates.css
     ================================================================ */
  .tia-templates-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-templates-button {
    height:32px;
    padding:0 13px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.14);
    background:#36393b;
    color:#f7f7f7;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-templates-button.primary {
    background:linear-gradient(135deg, var(--tia-accent, #63ff9d), color-mix(in srgb, var(--tia-accent, #63ff9d) 50%, #ffffff 50%));
    color:#111;
    border-color:transparent;
  }
  .tia-templates-button.danger {
    border-color:rgba(255,111,111,0.32);
    color:#ffd2d2;
  }
  .tia-templates-button:hover,
  .tia-templates-button:focus {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 60%, transparent);
    outline:none;
  }
  .tia-templates-status {
    min-height:18px;
    color:var(--tia-accent, #63ff9d);
    font-size:12px;
    font-weight:700;
    margin-left:auto;
  }
  .tia-templates-add-form {
    display:none;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
    padding:14px;
    border:1px solid rgba(99,255,157,0.22);
    border-radius:14px;
    background:rgba(99,255,157,0.055);
  }
  .tia-templates-add-form.tia-templates-form-open {
    display:grid;
  }
  .tia-templates-field {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
  }
  .tia-templates-field label {
    color:#c7d0cc;
    font-size:11px;
    font-weight:800;
  }
  .tia-templates-field input,
  .tia-templates-field select,
  .tia-templates-table input,
  .tia-templates-table select {
    height:30px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:8px;
    background:#151617;
    color:#fff;
    padding:0 8px;
    box-sizing:border-box;
    font-size:12px;
  }
  .tia-templates-form-actions {
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }
  .tia-templates-summary-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
  }
  .tia-templates-summary-card {
    padding:12px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-templates-summary-label {
    display:block;
    color:#b9c3be;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .tia-templates-summary-value {
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:22px;
    font-weight:900;
  }
  .tia-templates-table-wrap {
    overflow:auto;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.035);
  }
  .tia-templates-table {
    width:100%;
    border-collapse:collapse;
    min-width:980px;
    font-size:12px;
  }
  .tia-templates-table th,
  .tia-templates-table td {
    padding:10px 9px;
    border-bottom:1px solid rgba(255,255,255,0.075);
    text-align:left;
    vertical-align:middle;
  }
  .tia-templates-table th {
    color:#d9e1dd;
    background:rgba(0,0,0,0.16);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    white-space:nowrap;
  }
  .tia-templates-table tr:last-child td {
    border-bottom:0;
  }
  .tia-templates-name {
    color:#fff;
    font-weight:900;
  }
  .tia-templates-muted {
    color:#aeb7b2;
    font-size:11px;
  }
  .tia-templates-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:78px;
    height:22px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06);
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
  }
  .tia-templates-pill.active {
    color:var(--tia-accent, #63ff9d);
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 45%, transparent);
  }
  .tia-templates-pill.draft {
    color:#ffe0a3;
    border-color:rgba(255,210,111,0.32);
  }
  .tia-templates-pill.archived {
    color:#b9c3ff;
    border-color:rgba(140,123,255,0.35);
  }
  .tia-templates-actions {
    display:flex;
    gap:6px;
    white-space:nowrap;
  }
  .tia-templates-mini-button {
    height:26px;
    padding:0 9px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.065);
    color:#f3f3f3;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-templates-mini-button:hover,
  .tia-templates-mini-button:focus {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 55%, transparent);
    color:var(--tia-accent, #63ff9d);
    outline:none;
  }
  .tia-templates-note {
    margin-top:10px;
    color:#aeb7b2;
    font-size:11px;
    line-height:1.45;
  }
  @media (max-width:900px) {
    .tia-templates-add-form,
    .tia-templates-summary-grid {
      grid-template-columns:1fr;
    }
    .tia-templates-status {
      width:100%;
      margin-left:0;
    }
  }


  /* ================================================================
     TIA PROJECT SETTINGS PAGE SECTION
     Local browser-based project defaults and workspace preference controls.
     Future module target: src/admin/project-settings.css
     ================================================================ */
  .tia-project-settings-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-project-settings-button {
    height:32px;
    padding:0 13px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.14);
    background:#36393b;
    color:#f7f7f7;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-project-settings-button.primary {
    background:linear-gradient(135deg, var(--tia-accent, #63ff9d), color-mix(in srgb, var(--tia-accent, #63ff9d) 50%, #ffffff 50%));
    color:#111;
    border-color:transparent;
  }
  .tia-project-settings-button.danger {
    border-color:rgba(255,111,111,0.32);
    color:#ffd2d2;
  }
  .tia-project-settings-button:hover,
  .tia-project-settings-button:focus {
    border-color:color-mix(in srgb, var(--tia-accent, #63ff9d) 60%, transparent);
    outline:none;
  }
  .tia-project-settings-status {
    min-height:18px;
    color:var(--tia-accent, #63ff9d);
    font-size:12px;
    font-weight:700;
    margin-left:auto;
  }
  .tia-project-settings-summary-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
  }
  .tia-project-settings-summary-card {
    padding:12px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-project-settings-summary-label {
    display:block;
    color:#b9c3be;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .tia-project-settings-summary-value {
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:21px;
    font-weight:900;
  }
  .tia-project-settings-layout {
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(270px, 0.85fr);
    gap:14px;
    align-items:start;
  }
  .tia-project-settings-section {
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    padding:14px;
    margin-bottom:14px;
  }
  .tia-project-settings-section h4 {
    margin:0 0 10px 0;
    color:#fff;
    font-size:13px;
    font-weight:900;
    letter-spacing:0.03em;
  }
  .tia-project-settings-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .tia-project-settings-field {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
  }
  .tia-project-settings-field.wide {
    grid-column:1 / -1;
  }
  .tia-project-settings-field label,
  .tia-project-settings-toggle span {
    color:#c7d0cc;
    font-size:11px;
    font-weight:800;
  }
  .tia-project-settings-field input,
  .tia-project-settings-field select {
    height:30px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:8px;
    background:#151617;
    color:#fff;
    padding:0 8px;
    box-sizing:border-box;
    font-size:12px;
  }
  .tia-project-settings-field input[type="color"] {
    padding:2px;
    cursor:pointer;
  }
  .tia-project-settings-field small {
    color:#9eaaa4;
    font-size:10px;
    line-height:1.35;
  }
  .tia-project-settings-toggle-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
  }
  .tia-project-settings-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:34px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:10px;
    background:rgba(0,0,0,0.14);
    box-sizing:border-box;
  }
  .tia-project-settings-toggle input {
    accent-color:var(--tia-accent, #63ff9d);
  }
  .tia-project-settings-preview {
    min-height:220px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    overflow:hidden;
    background:rgba(0,0,0,0.16);
  }
  .tia-project-settings-preview-top {
    height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    color:#fff;
    font-size:11px;
    font-weight:900;
    background:rgba(255,255,255,0.065);
    box-sizing:border-box;
  }
  .tia-project-settings-preview-body {
    position:relative;
    min-height:184px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    box-sizing:border-box;
  }
  .tia-project-settings-preview-canvas {
    position:relative;
    width:100%;
    max-width:360px;
    aspect-ratio:16 / 9;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:10px;
    background:var(--tia-project-default-bg, #111111);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
    text-align:center;
    box-shadow:0 18px 40px rgba(0,0,0,0.28);
    overflow:hidden;
  }
  .tia-project-settings-preview-canvas.grid-on {
    background-image:linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size:20px 20px;
  }
  .tia-project-settings-preview-ruler {
    position:absolute;
    background:rgba(255,255,255,0.11);
    color:#dfe6e2;
    font-size:9px;
    font-weight:900;
    display:none;
  }
  .tia-project-settings-preview-canvas.rulers-on .tia-project-settings-preview-ruler {
    display:block;
  }
  .tia-project-settings-preview-ruler.top {
    top:0;
    left:0;
    right:0;
    height:16px;
    line-height:16px;
    text-align:center;
  }
  .tia-project-settings-preview-ruler.left {
    top:0;
    left:0;
    bottom:0;
    width:18px;
    writing-mode:vertical-rl;
    text-align:center;
    line-height:18px;
  }
  .tia-project-settings-note {
    margin-top:10px;
    color:#aeb7b2;
    font-size:11px;
    line-height:1.45;
  }
  @media (max-width:900px) {
    .tia-project-settings-summary-grid,
    .tia-project-settings-layout,
    .tia-project-settings-grid,
    .tia-project-settings-toggle-grid {
      grid-template-columns:1fr;
    }
    .tia-project-settings-status {
      width:100%;
      margin-left:0;
    }
  }

  /* ================================================================
     TIA PROJECT TABS BAR SECTION
     Third row under the menu/help row.
     Future module target: src/projects/project-tabs.css
     ================================================================ */
  #top3 {
    position:absolute;
    top:118px; left:0; right:280px;
    height:25px;
    background:#444;
    display:flex;
    align-items:center;
    padding-left:50px;
    box-sizing:border-box;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(0,0,0,0.35);
    z-index:24;
  }
  .project-tabs-wrap {
    display:flex;
    align-items:center;
    gap:4px;
    height:100%;
    min-width:0;
    overflow:hidden;
    flex:1 1 auto;
  }
  .project-tab {
    width:150px;
    height:22px;
    background:#676767;
    color:#f2f2f2;
    display:flex;
    align-items:center;
    gap:5px;
    margin-right:1px;
    padding:0 5px;
    font-size:11px;
    border-radius:5px 5px 0 0;
    cursor:pointer;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0.16);
    border-bottom:none;
    user-select:none;
    min-width:0;
  }
  .project-tab:hover {
    background:#747474;
  }
  .project-tab.active-project-tab {
    background:#2f2f2f;
    color:#ffffff;
    border-color:rgba(99,255,157,0.78);
    box-shadow:0 -1px 0 rgba(99,255,157,0.35) inset, 0 0 8px rgba(99,255,157,0.12);
  }
  .project-tab-flower {
    width:14px;
    height:14px;
    flex:0 0 auto;
    display:block;
  }
  .project-tab-name {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1;
  }
  .project-tab-close {
    width:14px;
    height:14px;
    flex:0 0 auto;
    border:none;
    border-radius:3px;
    background:rgba(0,0,0,0.18);
    color:#ededed;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    line-height:1;
    cursor:pointer;
    padding:0;
  }
  .project-tab-close:hover {
    background:rgba(255,255,255,0.22);
    color:#fff;
  }
  .project-tab.project-tab-dirty .project-tab-name::after {
    content:' *';
    color:#63ff9d;
  }
  .project-new-button {
    height:21px;
    min-width:58px;
    margin:0 6px 0 4px;
    padding:0 8px;
    border:1px solid rgba(99,255,157,0.42);
    border-radius:5px;
    background:rgba(99,255,157,0.14);
    color:#eafff2;
    font-size:11px;
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
  }
  .project-new-button:hover {
    background:rgba(99,255,157,0.24);
    border-color:rgba(99,255,157,0.78);
  }
  .project-new-button-helpbar {
    margin:0 12px 0 8px;
  }
  .tia-project-status {
    max-width:min(420px, 34vw);
    margin-left:8px;
    padding-right:8px;
    color:#c8d2cd;
    font-size:10.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:0 1 auto;
  }
  .tia-project-status.saved { color:#9effbd; }
  .tia-project-status.notice { color:#ffe093; }
  /* ================================================================
     TIA AUTO-SAVE STATUS INDICATOR SECTION
     Small third-bar indicator for Chrome/Edge Project Home backups.
     Module logic: src/projects/project-home.js
     ================================================================ */
  .tia-autosave-status {
    flex:0 0 auto;
    max-width:270px;
    margin-left:8px;
    padding:3px 8px;
    border:1px solid rgba(255,255,255,0.11);
    border-radius:999px;
    background:rgba(255,255,255,0.055);
    color:#cfd9d4;
    font-size:10.5px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tia-autosave-status::before {
    content:'';
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:6px;
    border-radius:50%;
    background:#8b928f;
    vertical-align:1px;
  }
  .tia-autosave-status.is-on {
    color:#bfffd4;
    border-color:rgba(99,255,157,0.24);
    background:rgba(99,255,157,0.08);
  }
  .tia-autosave-status.is-on::before { background:#63ff9d; }
  .tia-autosave-status.is-waiting::before { background:#ffe093; }
  .tia-autosave-status.is-off,
  .tia-autosave-status.is-error { color:#ffc3c3; }
  .tia-autosave-status.is-error::before { background:#ff7373; }


  /* ================================================================
     TIA LEFT TOOLBAR WIDTH / LARGER BUTTONS SECTION
     Left toolbar widened by 10px so tool buttons have more room.
     Future module target: src/ui/left-toolbar.css
     ================================================================ */
  #leftBar {
    position:absolute;
    top:143px; left:0;
    width:94px; bottom:var(--tia-bottom-bar-height, 32px);
    background:#555;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:6px;
    box-sizing:border-box;
  }
  .tool-button {
    width:40px;
    min-height:34px;
    margin:5px 0;
    padding:2px 3px;
    background:#888;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10.5px;
    text-align:center;
    cursor:pointer;
    border-radius:5px;
    overflow:hidden;
    line-height:1.05;
    box-sizing:border-box;
    border:1px solid transparent;
    user-select:none;
    word-break:break-word;
  }
  .tool-button.active-tool {
    border-color:#ffffff;
    background:#6f6f6f;
  }


  /* ================================================================
     TIA TOOLBAR + DYNAMIC BUTTON SVG / SIZE SECTION
     Adds shared sizing for generated/dynamic buttons and optional SVG icons.
     Future module target: src/ui/button-icons.css
     ================================================================ */
  :root {
    --tia-toolbar-button-width:40px;
    --tia-toolbar-button-height:34px;
    --tia-button-svg-size:16px;
  }
  .tool-button {
    width:var(--tia-toolbar-button-width, 40px);
    min-height:var(--tia-toolbar-button-height, 34px);
  }
  .top-icon,
  .control-icon-button,
  .page-action-button,
  .layer-state-button,
  .layer-order-button,
  .layer-rename-button {
    width:var(--tia-toolbar-button-width, 40px) !important;
    min-width:var(--tia-toolbar-button-width, 40px) !important;
    height:var(--tia-toolbar-button-height, 34px) !important;
    min-height:var(--tia-toolbar-button-height, 34px) !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    flex:0 0 var(--tia-toolbar-button-width, 40px);
  }
  .control-icon-row {
    gap:6px;
    flex-wrap:wrap;
  }
  .control-icon-button {
    flex:0 0 var(--tia-toolbar-button-width, 40px) !important;
  }
  .top-icon {
    width:var(--tia-toolbar-button-width, 40px) !important;
    min-width:var(--tia-toolbar-button-width, 40px) !important;
    height:var(--tia-toolbar-button-height, 34px) !important;
    min-height:var(--tia-toolbar-button-height, 34px) !important;
    flex:0 0 var(--tia-toolbar-button-width, 40px);
  }
  .page-row {
    min-height:54px;
    align-items:center;
  }
  .layer-row {
    height:auto;
    min-height:40px;
    align-items:center;
  }
  .page-title-text,
  .layer-name {
    min-width:28px;
  }
  .tia-button-svg-holder {
    width:var(--tia-button-svg-size, 16px);
    height:var(--tia-button-svg-size, 16px);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    pointer-events:none;
  }
  .tia-button-svg-holder img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .tool-button.tia-has-custom-button-svg,
  .top-icon.tia-has-custom-button-svg,
  .control-icon-button.tia-has-custom-button-svg,
  .page-action-button.tia-has-custom-button-svg,
  .layer-state-button.tia-has-custom-button-svg,
  .layer-order-button.tia-has-custom-button-svg,
  .layer-rename-button.tia-has-custom-button-svg {
    gap:2px;
  }
  .tool-button.tia-has-custom-button-svg {
    flex-direction:column;
    font-size:8.5px;
    line-height:1;
  }
  .top-icon.tia-has-custom-button-svg,
  .control-icon-button.tia-has-custom-button-svg,
  .page-action-button.tia-has-custom-button-svg,
  .layer-state-button.tia-has-custom-button-svg,
  .layer-order-button.tia-has-custom-button-svg,
  .layer-rename-button.tia-has-custom-button-svg {
    flex-direction:column;
    font-size:9px;
    line-height:1;
  }
  .tia-button-svg-preview-row {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top:8px;
  }
  .tia-button-svg-preview-button {
    width:var(--tia-toolbar-button-width, 40px);
    height:var(--tia-toolbar-button-height, 34px);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:5px;
    background:#36393b;
    color:#fff;
    display:inline-flex;
    flex-direction:column;
    gap:2px;
    align-items:center;
    justify-content:center;
    font-size:8.5px;
    line-height:1;
    overflow:hidden;
  }
  .tia-button-svg-preview-button img {
    width:var(--tia-button-svg-size, 16px);
    height:var(--tia-button-svg-size, 16px);
    object-fit:contain;
    display:block;
  }


  /* ================================================================
     TIA PER-BUTTON SVG ICON LIBRARY SECTION
     Lets individual toolbar/dynamic buttons use their own SVG icon and hide text.
     Future module target: src/ui/button-icon-library.css
     ================================================================ */
  .tia-button-icon-only {
    font-size:0 !important;
    line-height:0 !important;
    gap:0 !important;
    color:transparent !important;
    text-indent:0 !important;
  }
  .tia-button-icon-only .tia-button-svg-holder {
    width:var(--tia-button-svg-size, 16px);
    height:var(--tia-button-svg-size, 16px);
    margin:0;
  }
  .tia-button-icon-only .tia-button-svg-holder img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }


  /* ================================================================
     TIA SVG ICON COLOR CONTROLS SECTION
     Recolors uploaded SVG button icons through CSS masks.
     Future module target: src/ui/button-icon-colors.css
     ================================================================ */
  :root {
    --tia-button-icon-color:#ffffff;
    --tia-button-icon-active-color:#63ff9d;
  }
  .tia-button-svg-holder.tia-button-icon-mask,
  .tia-button-icon-mini-preview .tia-button-icon-mask,
  .tia-button-svg-preview-button .tia-button-icon-mask {
    width:var(--tia-button-svg-size, 16px);
    height:var(--tia-button-svg-size, 16px);
    display:inline-block;
    flex:0 0 auto;
    background:var(--tia-button-icon-color, #ffffff);
    -webkit-mask:var(--tia-button-icon-mask) center / contain no-repeat;
    mask:var(--tia-button-icon-mask) center / contain no-repeat;
  }
  .tool-button.active-tool .tia-button-svg-holder.tia-button-icon-mask,
  .top-icon.active-icon .tia-button-svg-holder.tia-button-icon-mask,
  .control-icon-button.active-icon .tia-button-svg-holder.tia-button-icon-mask,
  .page-action-button.active-icon .tia-button-svg-holder.tia-button-icon-mask,
  .layer-state-button.active-icon .tia-button-svg-holder.tia-button-icon-mask,
  .layer-order-button.active-icon .tia-button-svg-holder.tia-button-icon-mask,
  .layer-rename-button.active-icon .tia-button-svg-holder.tia-button-icon-mask {
    background:var(--tia-button-icon-active-color, #63ff9d);
  }
  .tia-button-svg-holder.tia-button-icon-mask img,
  .tia-button-icon-mini-preview .tia-button-icon-mask img,
  .tia-button-svg-preview-button .tia-button-icon-mask img {
    display:none !important;
  }
  .tia-button-icon-library-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:10px;
    margin-top:10px;
  }
  .tia-button-icon-card {
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    background:rgba(0,0,0,0.16);
    padding:10px;
    min-width:0;
  }
  .tia-button-icon-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
  }
  .tia-button-icon-card-title {
    font-size:12px;
    font-weight:700;
    color:#ffffff;
    min-width:0;
  }
  .tia-button-icon-current {
    font-size:10.5px;
    color:rgba(255,255,255,0.58);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    display:block;
    margin-top:6px;
  }
  .tia-button-icon-card input[type="file"] {
    width:100%;
    font-size:11px;
  }
  .tia-button-icon-mini-preview {
    width:var(--tia-toolbar-button-width, 40px);
    height:var(--tia-toolbar-button-height, 34px);
    border:1px solid rgba(255,255,255,0.16);
    border-radius:5px;
    background:#36393b;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }
  .tia-button-icon-mini-preview img {
    width:var(--tia-button-svg-size, 16px);
    height:var(--tia-button-svg-size, 16px);
    object-fit:contain;
  }
  .tia-button-icon-mini-preview span {
    color:rgba(255,255,255,0.44);
    font-size:10px;
    line-height:1;
  }
  .tia-button-icon-clear {
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.06);
    color:#ffffff;
    border-radius:6px;
    padding:4px 7px;
    font-size:10.5px;
    cursor:pointer;
    margin-top:8px;
  }
  .tia-button-icon-clear:hover,
  .tia-button-icon-clear:focus {
    border-color:#63ff9d;
    color:#63ff9d;
  }


  /* ================================================================
     TIA ICONS & BUTTONS ADMIN PAGE SECTION
     Dedicated admin area for SVG toolbar/dynamic button icon management.
     Future module target: src/admin/icons-buttons.css
     ================================================================ */
  .tia-icons-buttons-layout {
    display:grid;
    gap:14px;
  }
  .tia-icons-buttons-toolbar {
    position:sticky;
    top:0;
    z-index:2;
  }
  .tia-icons-buttons-callout {
    border-color:rgba(99,255,157,0.22);
    background:linear-gradient(135deg, rgba(99,255,157,0.09), rgba(255,255,255,0.04));
  }
  .tia-icons-buttons-callout .tia-app-settings-button {
    margin-top:8px;
  }


  /* ================================================================
     TIA TOOLBAR ORGANIZATION POLISH SECTION
     Adjustable button sizing, spacing, dividers, hover states, and optional
     group labels for the left toolbar and dynamic toolbar buttons.
     Future module target: src/ui/toolbar-organization.css
     ================================================================ */
  :root {
    --tia-left-toolbar-width:94px;
    --tia-left-toolbar-padding-y:10px;
    --tia-toolbar-button-spacing:8px;
    --tia-dynamic-button-spacing:6px;
    --tia-toolbar-group-gap:12px;
    --tia-toolbar-divider-opacity:1;
  }
  #leftBar {
    width:var(--tia-left-toolbar-width, 50px) !important;
    padding-top:var(--tia-left-toolbar-padding-y, 6px) !important;
  }
  #top3 { padding-left:var(--tia-left-toolbar-width, 50px) !important; }
  #canvas { left:var(--tia-left-toolbar-width, 50px) !important; }
  .tool-button {
    margin:var(--tia-toolbar-button-spacing, 5px) 0 !important;
    transition:background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
  }
  #interactive-icons { gap:var(--tia-dynamic-button-spacing, 6px); }
  #interactive-icons .top-icon,
  .control-icon-row .control-icon-button { margin-right:0 !important; }
  .top-icon,
  .control-icon-button,
  .page-action-button,
  .layer-state-button,
  .layer-order-button,
  .layer-rename-button {
    transition:background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
  }
  .tool-button:hover,
  .top-icon:hover,
  .control-icon-button:hover,
  .page-action-button:hover,
  .layer-state-button:hover,
  .layer-order-button:hover,
  .layer-rename-button:hover {
    border-color:rgba(99,255,157,0.62) !important;
    box-shadow:0 0 0 1px rgba(99,255,157,0.18) inset, 0 4px 12px rgba(0,0,0,0.22);
    transform:translateY(-1px);
  }
  .tool-button.active-tool,
  .top-icon.active-icon,
  .control-icon-button.active-icon,
  .page-action-button.active-icon,
  .layer-state-button.active-icon,
  .layer-order-button.active-icon,
  .layer-rename-button.active-icon {
    border-color:rgba(99,255,157,0.88) !important;
    box-shadow:0 0 0 2px rgba(99,255,157,0.18) inset, 0 0 18px rgba(99,255,157,0.13);
  }
  .tool-button.tia-toolbar-group-start {
    position:relative;
    margin-top:calc(var(--tia-toolbar-group-gap, 12px) + var(--tia-toolbar-button-spacing, 5px)) !important;
  }
  .tool-button.tia-toolbar-group-start::before {
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    top:calc(-0.5 * var(--tia-toolbar-group-gap, 12px));
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
    opacity:var(--tia-toolbar-divider-opacity, 1);
    pointer-events:none;
  }
  body:not(.tia-toolbar-dividers-visible) .tool-button.tia-toolbar-group-start::before { opacity:0; }
  body.tia-toolbar-labels-visible .tool-button.tia-toolbar-group-start {
    margin-top:calc(var(--tia-toolbar-group-gap, 12px) + var(--tia-toolbar-button-spacing, 5px) + 11px) !important;
  }
  body.tia-toolbar-labels-visible .tool-button.tia-toolbar-group-start::after {
    content:attr(data-toolbar-group-label);
    position:absolute;
    left:-4px;
    right:-4px;
    top:calc(-1 * (var(--tia-toolbar-group-gap, 12px) + 7px));
    color:rgba(255,255,255,0.54);
    font-size:7px;
    line-height:1;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.04em;
    white-space:nowrap;
    pointer-events:none;
  }
  .tia-toolbar-organization-preview {
    display:grid;
    grid-template-columns:minmax(70px, auto) 1fr;
    gap:12px;
    align-items:start;
    margin-top:10px;
  }
  .tia-toolbar-organization-preview-left {
    width:var(--tia-left-toolbar-width, 50px);
    min-height:230px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    background:rgba(0,0,0,0.24);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:var(--tia-left-toolbar-padding-y, 6px);
    box-sizing:border-box;
  }
  .tia-toolbar-organization-preview-dynamic {
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    background:rgba(0,0,0,0.16);
    padding:10px;
    display:flex;
    flex-wrap:wrap;
    gap:var(--tia-dynamic-button-spacing, 6px);
    align-items:center;
  }
  .tia-toolbar-organization-preview .tool-button,
  .tia-toolbar-organization-preview .top-icon { pointer-events:none; }
  @media (max-width:700px) {
    .tia-toolbar-organization-preview { grid-template-columns:1fr; }
  }

  /* ================================================================
     TIA ICON MANAGEMENT POLISH SECTION
     Reset groups, icon status labels, preview grids, text-hide modes,
     import/export controls, and tooltip-safe icon-only buttons.
     Future module target: src/admin/icon-management.css
     ================================================================ */
  .tia-button-text-hidden {
    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
    text-indent:0 !important;
  }
  .tia-button-icon-card-status {
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:3px 7px;
    border-radius:999px;
    background:rgba(255,255,255,0.07);
    color:rgba(255,255,255,0.72);
    font-size:10px;
    line-height:1.2;
    width:max-content;
    max-width:100%;
  }
  .tia-button-icon-card-status.custom {
    background:rgba(99,255,157,0.12);
    color:#63ff9d;
  }
  .tia-button-icon-clear,
  .tia-button-icon-reset-group,
  .tia-button-icon-export,
  .tia-button-icon-import-label {
    min-height:26px;
  }
  .tia-button-icon-manager-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
  }
  .tia-button-icon-import-label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.06);
    color:#ffffff;
    border-radius:7px;
    padding:6px 10px;
    font-size:11px;
    cursor:pointer;
  }
  .tia-button-icon-import-label input {
    display:none;
  }
  .tia-button-icon-preview-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:8px;
    margin-top:10px;
  }
  .tia-button-icon-preview-tile {
    border:1px solid rgba(255,255,255,0.12);
    border-radius:9px;
    background:rgba(0,0,0,0.14);
    padding:8px;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .tia-button-icon-preview-tile strong {
    display:block;
    font-size:11px;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tia-button-icon-preview-tile small {
    display:block;
    font-size:9.5px;
    color:rgba(255,255,255,0.55);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tia-button-icon-preview-tile .tia-button-icon-mini-preview {
    margin:0;
  }
  .tia-icon-text-mode-note {
    color:rgba(255,255,255,0.62);
    font-size:10.5px;
    line-height:1.35;
    margin-top:6px;
  }

  #rightBar {
    position:absolute;
    top:0; right:0;
    width:280px; bottom:0;
    background:#666;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-sizing:border-box;
  }
  #control-center-placeholder {
    width:240px;
    min-height:260px;
    background:#777;
    margin-top:8px;
    border:1px solid #aaa;
    color:#fff;
    box-sizing:border-box;
    border-radius:4px;
    overflow:hidden;
    font-size:12px;
  }
  .control-tabs {
    display:flex;
    background:#555;
    border-bottom:1px solid #999;
  }
  .control-tab {
    flex:1;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-weight:bold;
    border-right:1px solid rgba(255,255,255,0.18);
    user-select:none;
  }
  .control-tab:last-child { border-right:none; }
  .control-tab.active { background:#444; color:#63ff9d; }
  .control-body {
    padding:10px;
    box-sizing:border-box;
  }
  .control-note {
    color:#e8e8e8;
    line-height:1.35;
    opacity:0.9;
  }
  .control-row {
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
  }
  .control-row label {
    width:70px;
    color:#f2f2f2;
    font-size:11px;
  }
  .control-row input,
  .control-row select {
    flex:1;
    min-width:0;
    height:24px;
    background:#444;
    color:#fff;
    border:1px solid #aaa;
    border-radius:3px;
    padding:2px 5px;
    box-sizing:border-box;
  }
  .control-button-row {
    display:flex;
    gap:6px;
    margin-top:8px;
  }
  .control-button {
    flex:1;
    height:26px;
    background:#555;
    color:#fff;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:pointer;
  }
  .control-button.active {
    border-color:#63ff9d;
    color:#63ff9d;
  }
  .control-icon-row {
    display:flex;
    gap:5px;
    margin-bottom:8px;
  }
  .control-icon-button {
    flex:1;
    height:28px;
    background:#555;
    color:#fff;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:pointer;
    font-weight:bold;
    font-size:13px;
    line-height:1;
  }
  .control-icon-button.active {
    border-color:#63ff9d;
    color:#63ff9d;
    background:#444;
  }
  #pages-layers-placeholder {
    width:240px;
    margin-top:5px;
    flex-grow:1;
    background:#2b2b2b;
    border:1px solid #555;
    color:#fff;
    box-sizing:border-box;
    margin-bottom:0;
    overflow:auto;
    font-size:12px;
  }
  .pages-layers-header {
    height:32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:5px 6px;
    border-bottom:1px solid #4a4a4a;
    box-sizing:border-box;
    font-weight:bold;
    background:#333;
  }
  .add-page-button {
    height:22px;
    min-width:74px;
    padding:2px 8px;
    border:1px solid #777;
    border-radius:4px;
    background:#4a4a4a;
    color:#fff;
    font-size:11px;
    cursor:pointer;
  }
  .add-page-button:hover { border-color:#63ff9d; color:#63ff9d; }
  .page-layer-list { padding:5px; box-sizing:border-box; }
  .page-row {
    display:flex;
    align-items:center;
    gap:5px;
    min-height:48px;
    padding:4px;
    border:1px solid #444;
    border-radius:5px;
    background:#353535;
    margin-bottom:5px;
    box-sizing:border-box;
  }
  .page-row.active { border-color:#63ff9d; background:#3a443d; }
  .page-toggle {
    background:transparent;
    border:none;
    color:#fff;
    cursor:pointer;
    padding:0;
    font-size:12px;
  }
  .page-toggle { width:16px; min-width:16px; }
  .page-thumbnail-wrap {
    width:54px;
    min-width:54px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #555;
    border-radius:4px;
    background:#151515;
    overflow:hidden;
    box-sizing:border-box;
    cursor:pointer;
  }
  .page-row.active .page-thumbnail-wrap { border-color:#63ff9d; }
  .page-thumbnail-wrap:hover { border-color:#63ff9d; }
  .page-thumbnail {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .page-title-text {
    flex:1;
    min-width:0;
    text-align:left;
    font-weight:bold;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:text;
    color:#fff;
  }
  .page-title-text:hover, .layer-name:hover { color:#63ff9d; }
  .page-layer-count { color:#aaa; font-size:10px; }
  .layer-row {
    display:flex;
    align-items:center;
    gap:5px;
    height:24px;
    margin:0 0 4px 22px;
    padding:3px 5px;
    border:1px solid #3e3e3e;
    border-radius:4px;
    background:#242424;
    color:#ddd;
    box-sizing:border-box;
    cursor:pointer;
  }
  .layer-row.active { border-color:#63ff9d; color:#63ff9d; background:#303a33; }
  .layer-icon { width:17px; text-align:center; color:#bbb; }
  .layer-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; }
  /* ================================================================
     TIA GROUP / UNGROUP LAYER BADGES SECTION
     Visual badges for grouped objects in the Pages/Layers panel.
     Future module target: src/ui/layers-group-badges.css
     ================================================================ */
  .layer-group-badge {
    flex:0 0 auto;
    font-size:9px;
    line-height:1;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#06150d;
    background:#63ff9d;
    border-radius:999px;
    padding:3px 5px;
    margin-left:4px;
    max-width:44px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .layer-row.active .layer-group-badge {
    background:#ffffff;
    color:#0b1b12;
  }
  .inline-rename-input {
    flex:1;
    min-width:0;
    height:20px;
    box-sizing:border-box;
    padding:1px 5px;
    border:1px solid #63ff9d;
    border-radius:4px;
    background:#111;
    color:#fff;
    font-size:12px;
    outline:none;
  }
  .page-action-button, .layer-state-button, .layer-order-button, .layer-rename-button {
    width:22px;
    height:20px;
    min-width:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid #555;
    border-radius:4px;
    background:#2f2f2f;
    color:#ddd;
    font-size:11px;
    line-height:1;
    cursor:pointer;
  }
  .layer-order-button {
    width:18px;
    min-width:18px;
    font-size:10px;
  }
  .page-action-button:hover, .layer-state-button:hover, .layer-order-button:hover, .layer-rename-button:hover { border-color:#63ff9d; color:#63ff9d; }
  .page-action-button.disabled, .layer-state-button.disabled, .layer-order-button.disabled, .layer-rename-button.disabled { opacity:.35; cursor:default; pointer-events:none; }
  .layer-row.hidden-layer .layer-name, .layer-row.hidden-layer .layer-icon { opacity:.45; }
  .layer-row.locked-layer .layer-name { color:#aaa; }
  .layer-row.hidden-layer.locked-layer { opacity:.72; }
  .empty-layer-note { margin:0 0 5px 24px; color:#aaa; font-size:11px; }

  #bottomBar {
    position:absolute;
    bottom:0; left:0; right:280px;
    height:var(--tia-bottom-bar-height, 32px);
    background:#777;
    display:flex;
    align-items:center;
    padding:0 6px;
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
  }
  .swatch {
    width:var(--tia-bottom-swatch-size, 18px);
    min-width:var(--tia-bottom-swatch-size, 18px);
    height:var(--tia-bottom-swatch-size, 18px);
    border:1px solid rgba(0,0,0,0.45);
    border-radius:3px;
    margin-right:var(--tia-bottom-swatch-gap, 3px);
    box-sizing:border-box;
    position:relative;
    flex:0 0 auto;
  }
  .holder-swatch,
  #bottomBar .swatch:not(.holder-swatch) {
    cursor:pointer;
  }
  .holder-swatch.active-swatch-target {
    outline:2px solid #ffffff;
    outline-offset:1px;
  }
  #bottomBar .swatch.selected-palette-color {
    outline:2px solid rgba(255,255,255,0.8);
    outline-offset:1px;
  }
  .stroke-swatch { background:#ffffff; overflow:hidden; }
  .none-swatch { background:transparent; overflow:hidden; }
  .none-swatch::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%), linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%);
    background-position:0 0, 5px 5px;
    background-size:10px 10px;
    opacity:0.28;
  }
  .none-swatch::after,
  .stroke-swatch.stroke-none::after {
    content:'';
    position:absolute;
    left:-4px;
    top:8px;
    width:26px;
    height:2px;
    background:#d40000;
    transform:rotate(-45deg);
    transform-origin:center;
  }
  /* ================================================================
     TIA STEP 45 BOTTOM COLOR BAR / FILL-STROKE CONTROLS SECTION
     Eyedropper, color-wheel fill picker, larger fill holder, stroke holder,
     no-stroke holder, and separated palette swatches.

     TIA STEP 45.1 COMPACT BOTTOM COLOR BAR SPACING PATCH
     25% smaller controls, 3px control spacing, separator between wheel/fill,
     and a shorter bottom bar height for the compact swatches.
     Future module target: src/ui/bottom-color-bar.css + src/tools/eyedropper.js
     ================================================================ */
  .separator {
    width:1px;
    min-width:1px;
    height:20px;
    margin:0 6px 0 0;
    background:rgba(255,255,255,0.32);
    border-left:1px solid rgba(0,0,0,0.32);
    flex:0 0 auto;
  }
  .tia-bottom-palette-separator {
    margin-left:3px;
    margin-right:7px;
  }
  .tia-fill-stroke-separator {
    height:18px;
    margin-left:3px;
    margin-right:6px;
    background:rgba(99,255,157,0.42);
  }
  .tia-eyedropper-button {
    width:var(--tia-bottom-swatch-size, 18px);
    min-width:var(--tia-bottom-swatch-size, 18px);
    height:var(--tia-bottom-swatch-size, 18px);
    border:1px solid rgba(0,0,0,0.48);
    border-radius:3px;
    background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.18));
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:var(--tia-bottom-swatch-gap, 3px);
    box-sizing:border-box;
    font-size:12px;
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
  }
  .tia-eyedropper-button.active {
    outline:2px solid #ffffff;
    outline-offset:1px;
    background:color-mix(in srgb, var(--tia-accent, #63ff9d) 30%, #333 70%);
  }
  .color-wheel-swatch {
    background:conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff2d55, #ff3b30) !important;
    cursor:pointer;
  }
  .color-wheel-swatch::after {
    content:'';
    position:absolute;
    inset:4px;
    border-radius:999px;
    background:rgba(255,255,255,0.58);
    box-shadow:0 0 0 1px rgba(0,0,0,0.22) inset;
  }
  #tia-color-wheel-input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
  }
  .fill-swatch {
    width:var(--tia-bottom-fill-width, 27px);
    min-width:var(--tia-bottom-fill-width, 27px);
    background:#d9d9d9;
  }


  /* ================================================================
     TIA STEP 45.2 HEX-FIRST COLOR LABELS + BUILT-IN PREMIUM SVG ICONS
     Keeps the existing icon-management system, but supplies default
     SVGs so text-only tool buttons render as icon buttons out of the box.
     Future module target: src/ui/default-button-icons.css + src/ui/color-hex-labels.css
     ================================================================ */
  .tia-button-icon-only .tia-builtin-button-svg-holder {
    width:29px;
    height:29px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.58)) drop-shadow(0 0 7px rgba(99,255,157,0.22));
  }
  .tool-button.tia-button-icon-only,
  .top-icon.tia-button-icon-only,
  .control-icon-button.tia-button-icon-only {
    background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.30)), color-mix(in srgb, var(--tia-button-bg, #2f3742) 46%, #0b1118 54%) !important;
    border-color:rgba(255,255,255,0.12) !important;
  }
  .tool-button.tia-button-icon-only:hover,
  .top-icon.tia-button-icon-only:hover,
  .control-icon-button.tia-button-icon-only:hover {
    transform:translateY(-1px);
    box-shadow:0 7px 16px rgba(0,0,0,0.22), 0 0 0 1px rgba(99,255,157,0.28) inset;
  }
  .tool-button.active-tool .tia-builtin-button-svg-holder,
  .top-icon.active-icon .tia-builtin-button-svg-holder,
  .control-icon-button.active-icon .tia-builtin-button-svg-holder {
    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.45)) drop-shadow(0 0 8px rgba(99,255,157,0.38));
  }

  /* ================================================================
     TIA v0.3.3 ICON VISIBILITY BOOST SECTION
     Larger default icons and darker, higher-contrast icon buttons.
     Future module target: src/ui/icon-visibility.css
     ================================================================ */
  .tool-button.tia-button-icon-only,
  .top-icon.tia-button-icon-only,
  .control-icon-button.tia-button-icon-only,
  .page-action-button.tia-button-icon-only,
  .layer-state-button.tia-button-icon-only,
  .layer-order-button.tia-button-icon-only,
  .layer-rename-button.tia-button-icon-only {
    background:linear-gradient(180deg, rgba(255,255,255,0.11), rgba(0,0,0,0.34)), color-mix(in srgb, var(--tia-button-bg, #2f3742) 44%, #0a1017 56%) !important;
    border-color:rgba(255,255,255,0.13) !important;
  }
  .page-action-button.tia-button-icon-only .tia-button-svg-holder,
  .layer-state-button.tia-button-icon-only .tia-button-svg-holder,
  .layer-order-button.tia-button-icon-only .tia-button-svg-holder,
  .layer-rename-button.tia-button-icon-only .tia-button-svg-holder {
    width:calc(var(--tia-button-svg-size, 26px) * 1.12);
    height:calc(var(--tia-button-svg-size, 26px) * 1.12);
  }
  body.tia-appearance-light .tool-button.tia-button-icon-only,
  body.tia-appearance-light .top-icon.tia-button-icon-only,
  body.tia-appearance-light .control-icon-button.tia-button-icon-only,
  body.tia-appearance-light .page-action-button.tia-button-icon-only,
  body.tia-appearance-light .layer-state-button.tia-button-icon-only,
  body.tia-appearance-light .layer-order-button.tia-button-icon-only,
  body.tia-appearance-light .layer-rename-button.tia-button-icon-only {
    background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.28)), color-mix(in srgb, var(--tia-button-bg, #37414c) 62%, #101820 38%) !important;
    border-color:rgba(255,255,255,0.22) !important;
  }
  #bottomBar .swatch[data-hex-label],
  #bottomBar .tia-eyedropper-button,
  #bottomBar .color-wheel-swatch {
    -webkit-user-select:none;
    user-select:none;
  }
  .add-color {
    width:var(--tia-bottom-swatch-size, 18px);
    min-width:var(--tia-bottom-swatch-size, 18px);
    height:var(--tia-bottom-swatch-size, 18px);
    border:1px solid #3e3e3e;
    border-radius:3px;
    background:#9a9a9a;
    color:#111;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:3px;
    box-sizing:border-box;
    font-weight:bold;
    flex:0 0 auto;
  }

  #canvas {
    position:absolute;
    top:120px;
    left:50px;
    background:#000;
    display:block;
    outline:none;
  }
  .selection-rect {
    position:absolute;
    border:1px dashed #63ff9d;
    background:rgba(99,255,157,0.08);
    pointer-events:none;
    z-index:20;
  }
  .top-icon.text-icon {
    cursor:pointer;
    font-size:12px;
    font-weight:bold;
  }
  .text-editor-overlay {
    position:fixed;
    left:-9999px;
    top:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    resize:none;
    border:none;
    outline:none;
    padding:0;
    margin:0;
    background:transparent;
    color:transparent;
    z-index:-1;
  }


  /* ================================================================
     TIA LOGIN SCREEN SECTION
     Temporary front-door login for testing.
     Future module target: src/auth/login.css
     ================================================================ */
  #tia-login-screen {
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at center top, #343434 0%, #171717 46%, #0a0a0c 100%);
    color:#ffffff;
    font-family:Arial, sans-serif;
  }
  #tia-login-screen.tia-login-hidden {
    opacity:0;
    pointer-events:none;
    transition:opacity 320ms ease;
  }
  .tia-login-card {
    width:min(430px, calc(100vw - 36px));
    background:rgba(28,28,31,0.96);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:24px;
    box-shadow:0 28px 80px rgba(0,0,0,0.55);
    padding:30px 30px 26px;
    box-sizing:border-box;
    text-align:center;
    max-height:calc(100vh - 36px);
    overflow:auto;
  }
  .tia-login-flower-wrap {
    width:96px;
    height:96px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    box-shadow:0 0 34px rgba(93,255,171,0.18);
  }
  .tia-flower-logo {
    width:78px;
    height:78px;
    display:block;
  }
  .tia-login-title {
    margin:0;
    font-size:32px;
    line-height:1;
    letter-spacing:0.09em;
    font-weight:800;
  }
  .tia-login-subtitle {
    margin:10px 0 24px;
    color:#cfd3d7;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap;
  }
  /* ================================================================
     TIA v0.5.92.22 PREMIUM LOGO + TAGLINE SECTION
     Refreshes the flower mark with the current tool colors, removes the
     old white center circle, aligns the toolbar flower with Area 4, and
     gives the login/splash tagline a more premium accented treatment.
     ================================================================ */
  .tia-login-flower-wrap {
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 58%, rgba(255,255,255,0.00) 100%);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 0 34px rgba(99,255,157,0.12), inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .tia-flower-logo {
    width:82px;
    height:82px;
    display:block;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,0.20));
  }
  .tia-premium-slogan-prefix {
    color:#b8c1c9;
    letter-spacing:0.18em;
    font-size:0.88em;
    font-weight:700;
  }
  .tia-premium-slogan-accent {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 12px 5px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:linear-gradient(135deg, rgba(99,255,157,0.18), rgba(98,199,255,0.16), rgba(192,132,252,0.18));
    color:#f9fbff;
    font-weight:900;
    letter-spacing:0.28em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 24px rgba(0,0,0,0.20);
    text-shadow:0 1px 0 rgba(0,0,0,0.28);
  }
  .tia-login-field {
    text-align:left;
    margin-bottom:13px;
  }
  .tia-login-field label {
    display:block;
    margin:0 0 6px;
    font-size:12px;
    color:#c8c8c8;
    letter-spacing:0.04em;
  }
  .tia-login-field input {
    width:100%;
    height:42px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.16);
    background:#111214;
    color:#ffffff;
    padding:0 13px;
    box-sizing:border-box;
    outline:none;
    font-size:14px;
  }
  .tia-login-field input:focus {
    border-color:#7dffb0;
    box-shadow:0 0 0 3px rgba(125,255,176,0.13);
  }
  .tia-login-button {
    width:100%;
    height:44px;
    margin-top:5px;
    border:0;
    border-radius:13px;
    color:#07120b;
    background:linear-gradient(135deg, #a8ff70, #62ffc1);
    font-weight:800;
    letter-spacing:0.06em;
    cursor:pointer;
    text-transform:uppercase;
  }
  .tia-login-button:hover {
    filter:brightness(1.05);
  }

  .tia-login-options-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:-2px;
    margin-bottom:8px;
    color:rgba(255,255,255,0.76);
    font-size:12px;
  }
  .tia-remember-me {
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    user-select:none;
  }
  .tia-remember-me input {
    width:14px;
    height:14px;
    accent-color:#63ff9d;
  }
  .tia-forgot-password-button {
    border:0;
    background:transparent;
    color:#9fffc3;
    padding:0;
    font:inherit;
    font-weight:bold;
    cursor:pointer;
  }
  .tia-forgot-password-button:hover,
  .tia-forgot-password-button:focus {
    color:#ffffff;
    text-decoration:underline;
  }
  .tia-login-error {
    min-height:18px;
    margin:12px 0 0;
    color:#ff8f8f;
    font-size:12px;
  }
  .tia-login-test-note {
    margin:14px 0 0;
    color:#8f969c;
    font-size:11px;
    line-height:1.4;
  }

  .tia-auth-panel {
    display:none;
  }
  .tia-auth-panel.tia-auth-panel-active {
    display:block;
  }
  .tia-auth-toggle-row {
    margin:15px 0 0;
    color:#aeb7b2;
    font-size:12px;
    line-height:1.45;
  }
  .tia-auth-toggle-button {
    border:0;
    background:transparent;
    color:#7dffb0;
    font-weight:900;
    cursor:pointer;
    padding:0 0 0 4px;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .tia-register-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .tia-register-grid .tia-login-field.wide {
    grid-column:1 / -1;
  }
  .tia-login-helper {
    margin:10px 0 0;
    color:#aeb7b2;
    font-size:11px;
    line-height:1.45;
  }
  .tia-login-helper strong {
    color:#ffffff;
    font-weight:900;
  }
  .tia-registration-disabled-note {
    display:none;
    margin:13px 0 0;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,179,71,0.24);
    background:rgba(255,179,71,0.08);
    color:#ffd596;
    font-size:12px;
    line-height:1.45;
  }
  .tia-registration-disabled-note.tia-registration-disabled-visible {
    display:block;
  }
  .tia-login-contact-line {
    margin-top:8px;
    color:#aeb7b2;
    font-size:11px;
    line-height:1.35;
  }
  .tia-login-contact-line a {
    color:#7dffb0;
    font-weight:800;
    text-decoration:none;
  }

  /* ================================================================
     TIA SPLASH SCREEN SECTION
     Large flower shown after login before workspace appears.
     Future module target: src/auth/splash.css
     ================================================================ */
  #tia-splash-screen {
    position:fixed;
    inset:0;
    z-index:4950;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:radial-gradient(circle at center, #212121 0%, #111111 48%, #050505 100%);
    opacity:0;
    pointer-events:none;
    transition:opacity 360ms ease;
  }
  #tia-splash-screen.tia-splash-visible {
    display:flex;
    opacity:1;
    pointer-events:auto;
  }
  #tia-splash-screen.tia-splash-hiding {
    opacity:0;
    pointer-events:none;
  }
  .tia-splash-flower-wrap {
    width:min(600px, 72vw);
    height:min(600px, 72vw);
    min-width:260px;
    min-height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    filter:drop-shadow(0 0 50px rgba(99,255,157,0.12)) drop-shadow(0 0 34px rgba(98,199,255,0.08));
  }
  .tia-splash-flower {
    width:100%;
    height:100%;
    display:block;
    animation:tiaSplashSpin 2s linear infinite, tiaSplashPulse 2s ease-in-out infinite;
    transform-origin:center center;
  }
  .tia-splash-title {
    margin:22px 0 0;
    color:#f3f3f3;
    font-size:34px;
    font-weight:800;
    letter-spacing:0.18em;
    text-shadow:0 6px 22px rgba(0,0,0,0.28);
  }
  .tia-splash-subtitle {
    margin:14px 0 0;
    color:#bfc4c9;
    font-size:14px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .tia-splash-subtitle .tia-premium-slogan-prefix {
    font-size:0.92em;
    letter-spacing:0.24em;
  }
  .tia-splash-subtitle .tia-premium-slogan-accent {
    padding:7px 14px 7px 16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 16px 34px rgba(0,0,0,0.24);
  }
  @keyframes tiaSplashSpin {
    from { transform:rotate(0deg) scale(0.94); }
    to { transform:rotate(360deg) scale(1.02); }
  }
  @keyframes tiaSplashPulse {
    0% { filter:brightness(0.96); }
    50% { filter:brightness(1.08); }
    100% { filter:brightness(0.96); }
  }


  /* ================================================================
     TIA APP SETTINGS PAGE SECTION
     Local browser-based global app settings, startup text, and logo controls.
     Future module target: src/admin/app-settings.css
     ================================================================ */
  .tia-default-logo-svg,
  .tia-custom-logo-img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .tia-splash-logo-current {
    animation:tiaSplashSpin 2s linear infinite, tiaSplashPulse 2s ease-in-out infinite;
    transform-origin:center center;
  }
  /* ================================================================
     TIA v0.1.1 LIGHT MODE PREMIUM POLISH + LOGO/BADGE TONE SECTION
     Keeps top-left branding transparent, compact, and ready for semantic
     versioning. Future module target: src/ui/app-branding.css
     ================================================================ */
  .tia-toolbar-logo-holder {
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    max-width:100%;
    height:100%;
    padding:5px 7px;
    box-sizing:border-box;
    min-width:0;
    background:transparent;
    border:0;
  }
  .tia-toolbar-logo-media {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
  }
  .tia-toolbar-logo-text {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:18px;
    line-height:1;
    font-weight:900;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--tia-text-color, #fff);
  }
  .tia-toolbar-version-badge {
    flex:0 0 auto;
    align-self:center;
    margin-left:1px;
    padding:2px 5px 2px 6px;
    border-radius:999px;
    border:1px solid rgba(99,255,157,0.32);
    background:rgba(99,255,157,0.10);
    color:rgba(235,255,242,0.92);
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:0.04em;
    white-space:nowrap;
    box-shadow:0 0 10px rgba(99,255,157,0.08);
  }
  /* ================================================================
     TIA v0.5.92.5 UNIFIED TOOLBAR BACKGROUND + VERSION MOVE SECTION
     Left toolbar and bottom swatch bar now match the top toolbar color.
     The version badge lives at bottom-right so the logo can be larger.
     ================================================================ */
  #leftBar {
    background:var(--tia-top-toolbar, #222222) !important;
  }
  #bottomBar {
    background:var(--tia-top-toolbar, #222222) !important;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  #logo-placeholder .tia-toolbar-logo-holder {
    gap:10px;
    padding:4px 6px 4px 0;
  }
  #logo-placeholder .tia-toolbar-logo-media {
    width:60px !important;
    height:60px !important;
    margin-left:0 !important;
  }
  #logo-placeholder .tia-toolbar-logo-media svg,
  #logo-placeholder .tia-toolbar-logo-media img {
    width:60px !important;
    height:60px !important;
  }
  #logo-placeholder .tia-toolbar-logo-text {
    font-size:22px;
    letter-spacing:0.14em;
  }
  #logo-placeholder .tia-toolbar-version-badge {
    display:none !important;
  }
  .tia-bottom-version-spacer {
    flex:1 1 auto;
    min-width:18px;
    height:1px;
  }
  .tia-bottom-version-badge {
    flex:0 0 auto;
    margin-left:12px;
    margin-right:4px;
    padding:3px 8px 4px;
    border:1px solid rgba(99,255,157,0.34);
    border-radius:999px;
    background:rgba(99,255,157,0.10);
    color:rgba(235,255,242,0.95);
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:0.04em;
    white-space:nowrap;
    box-shadow:0 0 10px rgba(99,255,157,0.08);
  }

  /* ================================================================
     TIA v0.5.92 LABELED TOOLBAR ICONS SECTION
     Larger stacked icon + label buttons for the left toolbar and top
     quick-action bar. Keeps other icon buttons unchanged.
     ================================================================ */
  .tia-toolbar-labeled-button {
    display:flex !important;
    flex-direction:column;
    align-items:center !important;
    justify-content:center !important;
    gap:4px;
    padding:6px 4px !important;
    box-sizing:border-box;
  }
  .tool-button.tia-toolbar-labeled-button {
    width:78px !important;
    min-width:78px !important;
    min-height:74px !important;
    height:74px !important;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(92,96,98,0.96), rgba(58,62,64,0.96)) !important;
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button {
    width:58px !important;
    min-width:58px !important;
    min-height:60px !important;
    height:60px !important;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(92,96,98,0.96), rgba(58,62,64,0.96)) !important;
  }
  .tia-toolbar-labeled-button .tia-button-svg-holder {
    width:24px;
    height:24px;
    flex:0 0 24px;
  }
  .tia-toolbar-labeled-button .tia-button-visible-label {
    display:block;
    font-size:10px;
    line-height:1;
    font-weight:700;
    letter-spacing:0.01em;
    text-align:center;
    color:inherit;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #top1 #logo-placeholder {
    height:72px;
  }
  #top1 #tia-quick-action-status {
    align-self:flex-end;
    margin-bottom:8px;
  }
  #top2 .tia-user-session-bar {
    margin-left:10px;
    margin-right:10px;
  }
  #top2 .project-new-button-helpbar {
    margin:0 0 0 8px;
    height:24px;
  }
  .top2-separator {
    margin-left:8px;
    margin-right:8px;
  }

  /* ================================================================
     TIA v0.5.92.4 PROJECT STATUS ROW RESTORE SECTION
     Keeps the project tabs/status row visible below the taller toolbars
     and prevents rulers/canvas from sitting on top of it.
     ================================================================ */
  #top1, #top2, #top3 {
    z-index:24;
  }
  #top1, #top2 {
    z-index:26;
  }
  .tia-canvas-ruler,
  .tia-canvas-ruler-corner {
    z-index:14;
  }

  /* ================================================================
     TIA v0.5.92.1 TOOLBAR LABEL VISIBILITY FIX SECTION
     The old icon-only system hid all button text. This override keeps
     the larger icon-box layout but restores visible labels underneath.
     ================================================================ */
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only,
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only {
    font-size:10px !important;
    line-height:1 !important;
    gap:5px !important;
    color:#ffffff !important;
    text-indent:0 !important;
  }
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only {
    width:78px !important;
    min-width:78px !important;
    height:74px !important;
    min-height:74px !important;
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only {
    width:68px !important;
    min-width:68px !important;
    height:72px !important;
    min-height:72px !important;
  }
  .tia-toolbar-labeled-button.tia-button-icon-only .tia-button-svg-holder,
  .tia-toolbar-labeled-button.tia-button-icon-only .tia-builtin-button-svg-holder {
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    min-height:31px !important;
    margin:0 !important;
    flex:0 0 31px !important;
  }
  .tia-toolbar-labeled-button.tia-button-icon-only .tia-button-visible-label {
    display:block !important;
    color:#ffffff !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:750 !important;
    text-align:center !important;
    white-space:nowrap !important;
    max-width:76px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .tia-toolbar-labeled-button.tia-button-icon-only .tia-builtin-button-svg-holder img {
    filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  }
  .tia-toolbar-labeled-button.tia-button-icon-only.active-tool .tia-button-visible-label,
  .tia-toolbar-labeled-button.tia-button-icon-only.active-icon .tia-button-visible-label {
    color:var(--tia-accent, #63ff9d) !important;
  }
  .tia-toolbar-labeled-button.tia-button-icon-only.active-tool .tia-builtin-button-svg-holder img,
  .tia-toolbar-labeled-button.tia-button-icon-only.active-icon .tia-builtin-button-svg-holder img {
    filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(99,255,157,0.45));
  }
  .tool-button[data-tool="select"].tia-button-icon-only .tia-builtin-button-svg-holder img {
    filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.45)) !important;
  }

  /* ================================================================
     TIA v0.5.92.2 INTERACTIVE SECTION ICON LABELS SECTION
     Gives Text / Shapes / Vector / curve controls the same stacked
     bigger icon + label look as the main toolbar icons.
     ================================================================ */
  #interactive-icons:not(.tia-quick-actions-mode) {
    display:flex;
    align-items:flex-end;
    gap:8px;
    min-height:72px;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon {
    width:68px !important;
    min-width:68px !important;
    height:72px !important;
    min-height:72px !important;
    padding:6px 4px !important;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(92,96,98,0.96), rgba(58,62,64,0.96)) !important;
    display:flex !important;
    flex-direction:column;
    align-items:center !important;
    justify-content:center !important;
    gap:5px;
    box-sizing:border-box;
    text-align:center;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.wide {
    width:78px !important;
    min-width:78px !important;
  }
  .tia-interactive-icon-glyph {
    display:block;
    font-size:24px;
    line-height:1;
    color:#ffffff;
  }
  .tia-interactive-icon-label {
    display:block;
    font-size:10px;
    line-height:1;
    font-weight:750;
    color:#ffffff;
    white-space:nowrap;
    max-width:64px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.wide .tia-interactive-icon-label {
    max-width:74px;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon .tia-interactive-icon-glyph,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon .tia-interactive-icon-label {
    color:var(--tia-accent, #63ff9d);
  }

  /* ================================================================
     TIA v0.5.92.3 LEFT TOOLBAR + SECTION LABEL FIX SECTION
     Wider left toolbar, more comfortable left tool button fit, and
     visible labels for icon-managed Text / Shape / Vector section icons.
     ================================================================ */
  #leftBar {
    align-items:center !important;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
  }
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only .tia-button-svg-holder,
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only .tia-builtin-button-svg-holder {
    width:33px !important;
    height:33px !important;
    min-width:33px !important;
    min-height:33px !important;
    flex-basis:33px !important;
  }
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only .tia-button-visible-label {
    max-width:76px !important;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only {
    width:72px !important;
    min-width:72px !important;
    height:74px !important;
    min-height:74px !important;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only .tia-button-svg-holder,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only .tia-builtin-button-svg-holder {
    width:33px !important;
    height:33px !important;
    min-width:33px !important;
    min-height:33px !important;
    flex-basis:33px !important;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only .tia-button-visible-label {
    display:block !important;
    color:#ffffff !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:750 !important;
    text-align:center !important;
    white-space:nowrap !important;
    max-width:68px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only.active-icon .tia-button-visible-label {
    color:var(--tia-accent, #63ff9d) !important;
  }

  /* ================================================================
     TIA v0.1.1 LIGHT MODE PREMIUM POLISH SECTION
     Softer premium greys for logo text, badge, rulers, and panel polish.
     Future module target: src/ui/light-theme-polish.css
     ================================================================ */
  body.tia-appearance-dark { --tia-logo-text-live:#ffffff; }
  body.tia-appearance-light { --tia-logo-text-live:#626b76; }
  body.tia-appearance-light .tia-toolbar-logo-text {
    color:#626b76;
    text-shadow:0 1px 0 rgba(255,255,255,0.45);
  }
  body.tia-appearance-light .tia-toolbar-version-badge {
    border:1px solid rgba(98,107,118,0.20);
    background:rgba(98,107,118,0.09);
    color:#6a7380;
    box-shadow:0 2px 10px rgba(98,107,118,0.08);
  }
  body.tia-appearance-light #top1,
  body.tia-appearance-light #top2,
  body.tia-appearance-light #top3,
  body.tia-appearance-light #leftBar,
  body.tia-appearance-light #rightBar,
  body.tia-appearance-light #bottomBar,
  body.tia-appearance-light #tia-user-session-bar {
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(92,102,112,0.06);
  }
  body.tia-appearance-light .tool-button,
  body.tia-appearance-light .top-icon,
  body.tia-appearance-light .control-icon-button,
  body.tia-appearance-light .page-action-button,
  body.tia-appearance-light .layer-state-button,
  body.tia-appearance-light .layer-order-button,
  body.tia-appearance-light .layer-rename-button,
  body.tia-appearance-light .swatch,
  body.tia-appearance-light .tia-theme-toggle-button,
  body.tia-appearance-light .tia-logout-button {
    box-shadow:0 1px 2px rgba(85,95,105,0.08);
  }
  .tia-admin-title-logo-holder {
    width:26px;
    height:26px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    filter:drop-shadow(0 0 8px rgba(99,255,157,0.16));
  }
  .project-tab-logo-holder {
    width:14px;
    height:14px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tia-app-settings-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
  }
  .tia-app-settings-button {
    height:32px;
    padding:0 13px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.14);
    background:#36393b;
    color:#f7f7f7;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }
  .tia-app-settings-button.primary {
    background:linear-gradient(135deg, var(--tia-accent, #63ff9d), color-mix(in srgb, var(--tia-accent, #63ff9d) 50%, #ffffff 50%));
    color:#111;
    border-color:transparent;
  }
  .tia-app-settings-button.danger {
    border-color:rgba(255,120,120,0.34);
    color:#ffb4b4;
  }
  .tia-app-settings-status {
    min-height:18px;
    color:var(--tia-accent, #63ff9d);
    font-size:12px;
    font-weight:700;
  }
  .tia-app-settings-layout {
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap:14px;
    align-items:start;
  }
  .tia-app-settings-section {
    padding:15px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.045);
    margin-bottom:14px;
  }
  .tia-app-settings-section h4 {
    margin:0 0 11px;
    font-size:14px;
    color:#fff;
  }
  .tia-app-settings-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .tia-app-settings-field {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }
  .tia-app-settings-field.wide {
    grid-column:1 / -1;
  }
  .tia-app-settings-field label,
  .tia-app-settings-toggle span {
    color:#c7d0cc;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.02em;
  }
  .tia-app-settings-field input,
  .tia-app-settings-field select,
  .tia-app-settings-field textarea {
    width:100%;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:9px;
    background:#151617;
    color:#fff;
    padding:0 9px;
    box-sizing:border-box;
    font-size:12px;
  }
  .tia-app-settings-field input,
  .tia-app-settings-field select {
    height:32px;
  }
  .tia-app-settings-field input[type="file"] {
    padding:6px 8px;
    height:auto;
  }
  .tia-app-settings-field textarea {
    min-height:58px;
    padding-top:8px;
    resize:vertical;
  }
  .tia-app-settings-field small,
  .tia-app-settings-note {
    color:#9ea8a4;
    font-size:11px;
    line-height:1.42;
  }
  .tia-app-settings-toggle-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .tia-app-settings-toggle {
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:10px;
    background:rgba(0,0,0,0.12);
    box-sizing:border-box;
  }
  .tia-app-settings-toggle input {
    accent-color:var(--tia-accent, #63ff9d);
  }
  .tia-app-settings-summary-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(135px, 1fr));
    gap:10px;
    margin-bottom:14px;
  }
  .tia-app-settings-summary-card {
    padding:12px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:12px;
    background:rgba(255,255,255,0.045);
  }
  .tia-app-settings-summary-label {
    display:block;
    color:#aeb7b2;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.10em;
  }
  .tia-app-settings-summary-value {
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:18px;
    font-weight:900;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .tia-app-settings-preview {
    border:1px solid rgba(255,255,255,0.10);
    border-radius:15px;
    overflow:hidden;
    background:#111214;
  }
  .tia-app-settings-preview-login {
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:22px;
    background:radial-gradient(circle at center top, #343434 0%, #171717 48%, #0a0a0c 100%);
  }
  .tia-app-settings-preview-logo {
    width:92px;
    height:92px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    box-shadow:0 0 28px rgba(93,255,171,0.16);
  }
  .tia-app-settings-preview-name {
    color:#fff;
    font-size:28px;
    line-height:1;
    letter-spacing:0.10em;
    font-weight:900;
    text-transform:uppercase;
  }
  .tia-app-settings-preview-slogan {
    color:#cfd3d7;
    font-size:11px;
    letter-spacing:0.10em;
    text-transform:uppercase;
    text-align:center;
  }
  .tia-app-settings-preview-toolbar {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    background:var(--tia-top-toolbar, #222);
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .tia-app-settings-preview-toolbar-placeholder {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:46px;
    padding:5px 9px;
    border:1px solid #333333;
    border-radius:8px;
    box-sizing:border-box;
    overflow:hidden;
    max-width:100%;
  }
  .tia-app-settings-preview-toolbar-logo {
    width:40px;
    height:40px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tia-app-settings-preview-toolbar-text {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-weight:900;
    letter-spacing:0.10em;
    text-transform:uppercase;
  }
  .tia-app-settings-preview-meta {
    margin-top:12px;
    display:grid;
    gap:8px;
  }
  .tia-app-settings-preview-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    background:rgba(0,0,0,0.16);
    color:#d8dfdc;
    font-size:11px;
  }
  .tia-app-settings-preview-row strong {
    color:#fff;
    font-weight:900;
    text-align:right;
  }
  @media (max-width:900px) {
    .tia-app-settings-layout,
    .tia-app-settings-grid,
    .tia-app-settings-toggle-grid,
    .tia-app-settings-summary-grid {
      grid-template-columns:1fr;
    }
  }



  /* ================================================================
     TIA ADMIN WIDE LAYOUT / NO HORIZONTAL SCROLL SECTION
     Wider admin shell and flexible admin tables/forms.
     Future module target: src/admin/admin-wide-layout.css
     ================================================================ */
  .tia-admin-window {
    width:min(1440px, calc(100vw - 24px));
    height:min(780px, calc(100vh - 24px));
  }
  .tia-admin-sidebar {
    width:204px;
  }
  .tia-admin-content {
    padding:18px;
  }
  .tia-admin-page-copy {
    max-width:980px;
  }
  .tia-users-table-wrap,
  .tia-fonts-table-wrap,
  .tia-templates-table-wrap {
    overflow-x:hidden;
    overflow-y:visible;
  }
  .tia-users-table,
  .tia-fonts-table,
  .tia-templates-table {
    width:100%;
    min-width:0 !important;
    table-layout:auto;
  }
  .tia-users-table th,
  .tia-users-table td,
  .tia-fonts-table th,
  .tia-fonts-table td,
  .tia-templates-table th,
  .tia-templates-table td {
    padding:9px 7px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .tia-users-table th,
  .tia-fonts-table th,
  .tia-templates-table th {
    letter-spacing:0.04em;
  }
  .tia-users-actions,
  .tia-fonts-actions,
  .tia-templates-actions,
  .tia-users-password-controls {
    flex-wrap:wrap;
    white-space:normal;
    min-width:0;
  }
  .tia-users-password-input {
    width:100%;
    min-width:78px;
    max-width:112px;
  }
  .tia-users-table input,
  .tia-users-table select,
  .tia-fonts-table input,
  .tia-fonts-table select,
  .tia-templates-table input,
  .tia-templates-table select {
    max-width:100%;
    min-width:0;
  }
  .tia-users-pill,
  .tia-fonts-pill,
  .tia-templates-pill {
    min-width:0;
  }
  .tia-users-note-card,
  .tia-admin-card,
  .tia-fonts-summary-card,
  .tia-templates-summary-card,
  .tia-users-summary-card {
    min-width:0;
  }
  @media (min-width:1180px) {
    .tia-admin-card-grid {
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width:980px) {
    .tia-admin-window {
      width:calc(100vw - 16px);
      height:calc(100vh - 16px);
    }
    .tia-admin-content {
      padding:14px;
    }
    .tia-users-table th,
    .tia-users-table td,
    .tia-fonts-table th,
    .tia-fonts-table td,
    .tia-templates-table th,
    .tia-templates-table td {
      padding:8px 6px;
      font-size:11px;
    }
  }


  /* ================================================================
     TIA ADMIN LAYOUT POLISH / STATUS FOOTER SECTION
     Makes the admin area feel more finished and consistent.
     Future module target: src/admin/admin-layout-polish.css
     ================================================================ */
  .tia-admin-window {
    max-width:calc(100vw - 18px);
    max-height:calc(100vh - 18px);
  }
  .tia-admin-header {
    min-height:60px;
  }
  .tia-admin-body {
    min-height:0;
  }
  .tia-admin-content {
    display:block;
    scroll-padding:22px;
  }
  .tia-admin-content:focus {
    outline:none;
  }
  .tia-admin-page-heading {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 8px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    letter-spacing:-0.02em;
  }
  .tia-admin-page-heading::before {
    content:"";
    width:8px;
    height:28px;
    border-radius:999px;
    background:var(--tia-accent, #63ff9d);
    box-shadow:0 0 18px color-mix(in srgb, var(--tia-accent, #63ff9d) 46%, transparent);
    flex:0 0 auto;
  }
  .tia-admin-page-copy {
    margin-bottom:18px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:rgba(255,255,255,0.035);
  }
  .tia-admin-content h4,
  .tia-users-form-title,
  .tia-fonts-note {
    letter-spacing:-0.01em;
  }
  .tia-admin-card,
  .tia-users-note-card,
  .tia-users-summary-card,
  .tia-fonts-summary-card,
  .tia-templates-summary-card,
  .tia-project-settings-card,
  .tia-app-settings-card,
  .tia-appearance-preview-card,
  .tia-appearance-controls-card {
    box-shadow:0 10px 28px rgba(0,0,0,0.16);
  }
  .tia-users-toolbar,
  .tia-fonts-toolbar,
  .tia-templates-toolbar,
  .tia-project-settings-actions,
  .tia-app-settings-actions,
  .tia-appearance-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:10px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:rgba(0,0,0,0.16);
    margin-bottom:14px;
  }
  .tia-users-status,
  .tia-fonts-status,
  .tia-templates-status,
  .tia-project-settings-status,
  .tia-app-settings-status,
  .tia-appearance-status {
    min-height:28px;
    display:flex;
    align-items:center;
    flex:1 1 240px;
    padding:0 10px;
    border-radius:10px;
    color:#cfe9d8;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.07);
    box-sizing:border-box;
  }
  .tia-users-button,
  .tia-fonts-button,
  .tia-templates-button,
  .tia-project-settings-button,
  .tia-app-settings-button,
  .tia-appearance-button {
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:normal;
    line-height:1.1;
  }
  .tia-users-button.primary,
  .tia-fonts-button.primary,
  .tia-templates-button.primary,
  .tia-project-settings-button.primary,
  .tia-app-settings-button.primary,
  .tia-appearance-button.primary {
    box-shadow:0 0 0 1px color-mix(in srgb, var(--tia-accent, #63ff9d) 28%, transparent) inset;
  }
  .tia-users-add-form,
  .tia-fonts-add-form,
  .tia-templates-add-form,
  .tia-project-settings-grid,
  .tia-app-settings-grid,
  .tia-appearance-grid {
    margin-bottom:16px;
  }
  .tia-users-add-form,
  .tia-fonts-add-form,
  .tia-templates-add-form {
    border-radius:16px;
  }
  .tia-users-field label,
  .tia-fonts-field label,
  .tia-templates-field label,
  .tia-project-settings-field label,
  .tia-app-settings-field label,
  .tia-appearance-field label {
    display:block;
    margin-bottom:6px;
    font-size:11px;
    font-weight:800;
    color:#dcefe4;
    letter-spacing:0.03em;
    text-transform:uppercase;
  }
  .tia-users-field input,
  .tia-users-field select,
  .tia-fonts-field input,
  .tia-fonts-field select,
  .tia-templates-field input,
  .tia-templates-field select,
  .tia-project-settings-field input,
  .tia-project-settings-field select,
  .tia-app-settings-field input,
  .tia-app-settings-field select,
  .tia-appearance-field input,
  .tia-appearance-field select,
  .tia-users-filter-row input,
  .tia-users-filter-row select {
    min-height:34px;
  }
  .tia-users-summary-grid,
  .tia-fonts-summary-grid,
  .tia-templates-summary-grid,
  .tia-app-settings-summary-grid {
    gap:10px;
    margin-bottom:14px;
  }
  .tia-users-table-wrap,
  .tia-fonts-table-wrap,
  .tia-templates-table-wrap {
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:rgba(0,0,0,0.11);
  }
  .tia-users-table thead th,
  .tia-fonts-table thead th,
  .tia-templates-table thead th {
    position:sticky;
    top:0;
    z-index:1;
    background:#202326;
    color:#e7fff0;
    border-bottom:1px solid rgba(99,255,157,0.18);
  }
  .tia-users-table tbody tr:hover,
  .tia-fonts-table tbody tr:hover,
  .tia-templates-table tbody tr:hover {
    background:rgba(99,255,157,0.045);
  }
  .tia-admin-footer {
    min-height:44px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:8px 16px;
    border-top:1px solid rgba(255,255,255,0.09);
    background:linear-gradient(180deg, rgba(22,24,26,0.95), rgba(16,18,19,0.98));
    box-sizing:border-box;
  }
  .tia-admin-footer-left {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .tia-admin-footer-page {
    color:#f4fff7;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
  }
  .tia-admin-footer-state {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:84px;
    min-height:24px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.09);
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
  }
  .tia-admin-footer-state.clean {
    color:#bfeed0;
    background:rgba(99,255,157,0.08);
    border-color:rgba(99,255,157,0.18);
  }
  .tia-admin-footer-state.dirty {
    color:#ffe4a8;
    background:rgba(255,184,77,0.11);
    border-color:rgba(255,184,77,0.24);
  }
  .tia-admin-footer-state.saved {
    color:#d7ffe4;
    background:rgba(99,255,157,0.15);
    border-color:rgba(99,255,157,0.36);
  }
  .tia-admin-footer-state.info {
    color:#d7e7ff;
    background:rgba(88,166,255,0.12);
    border-color:rgba(88,166,255,0.25);
  }
  .tia-admin-footer-message {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#bfc8c3;
    font-size:12px;
    text-align:right;
  }
  .tia-admin-content.tia-admin-has-unsaved {
    box-shadow:inset 0 0 0 1px rgba(255,184,77,0.14);
  }
  @media (max-width:980px) {
    .tia-admin-footer {
      align-items:flex-start;
      flex-direction:column;
      gap:6px;
    }
    .tia-admin-footer-message {
      text-align:left;
      white-space:normal;
    }
    .tia-admin-page-heading {
      font-size:21px;
    }
  }
  @media (max-width:680px) {
    .tia-users-toolbar,
    .tia-fonts-toolbar,
    .tia-templates-toolbar,
    .tia-project-settings-actions,
    .tia-app-settings-actions,
    .tia-appearance-actions {
      align-items:stretch;
    }
    .tia-users-button,
    .tia-fonts-button,
    .tia-templates-button,
    .tia-project-settings-button,
    .tia-app-settings-button,
    .tia-appearance-button,
    .tia-users-status,
    .tia-fonts-status,
    .tia-templates-status,
    .tia-project-settings-status,
    .tia-app-settings-status,
    .tia-appearance-status {
      width:100%;
      flex:1 1 100%;
    }
    .tia-admin-sidebar {
      padding-bottom:8px;
    }
  }



  /* ================================================================
     TIA PAGE NAMES + PAGE DRAG REORDER SECTION
     Page buttons are moved into a smaller top row, with the editable page name below.
     Pages can be dragged to reorder while preserving the active page and layers.
     Future module target: src/ui/page-tiles.css + src/ui/page-reorder.js
     ================================================================ */
  .page-row {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:54px !important;
    padding:5px 6px !important;
    cursor:grab;
  }
  .page-row:active {
    cursor:grabbing;
  }
  .page-row-top {
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    gap:4px;
    min-height:24px;
  }
  .page-row-name {
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    min-height:16px;
    padding-left:3px;
    box-sizing:border-box;
  }
  .page-drag-handle {
    width:12px;
    min-width:12px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:6px;
    color:rgba(255,255,255,0.46);
    background:rgba(255,255,255,0.035);
    font-size:12px;
    line-height:1;
    cursor:grab;
    user-select:none;
  }
  .page-drag-handle:hover {
    color:var(--tia-accent, #63ff9d);
    border-color:rgba(99,255,157,0.38);
    background:rgba(99,255,157,0.08);
  }
  .page-toggle {
    width:18px !important;
    min-width:18px !important;
    height:22px !important;
    font-size:11px !important;
  }
  .page-thumbnail-wrap {
    width:46px !important;
    min-width:46px !important;
    height:24px !important;
    border-radius:7px !important;
  }
  .page-layer-count {
    margin-left:auto;
    min-width:18px !important;
    height:16px !important;
    padding:0 5px !important;
    font-size:9px !important;
  }
  .page-action-button {
    width:20px !important;
    min-width:20px !important;
    height:20px !important;
    border-radius:6px !important;
    font-size:10px !important;
    padding:0 !important;
  }
  .page-title-text {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:1px 4px 2px !important;
    border-radius:5px;
    font-size:11.5px !important;
    line-height:1.15 !important;
    cursor:text;
  }
  .page-title-text:hover {
    background:rgba(99,255,157,0.08);
  }
  .inline-rename-input {
    width:100%;
    min-width:0;
    height:18px;
    box-sizing:border-box;
    border:1px solid rgba(99,255,157,0.72);
    border-radius:5px;
    background:rgba(0,0,0,0.62);
    color:#fff;
    font-size:11.5px;
    font-weight:bold;
    padding:1px 5px;
    outline:none;
  }
  .page-row.dragging {
    opacity:0.5;
    border-color:rgba(99,255,157,0.55) !important;
  }
  .page-row.page-drag-over {
    border-color:var(--tia-accent, #63ff9d) !important;
    box-shadow:0 0 0 1px rgba(99,255,157,0.24) inset, 0 0 18px rgba(99,255,157,0.10) !important;
    transform:translateY(-1px);
  }


  /* ================================================================
     TIA CANVAS RULERS SECTION
     Horizontal and vertical rulers around the canvas workspace.
     Future module target: src/ui/canvas-rulers.css
     ================================================================ */
  :root {
    --tia-canvas-ruler-size:24px;
    --tia-canvas-ruler-bg:color-mix(in srgb, var(--tia-tabs-bar, #444444) 76%, black 24%);
    --tia-canvas-ruler-border:rgba(255,255,255,0.13);
  }
  .tia-canvas-ruler,
  .tia-canvas-ruler-corner {
    position:absolute;
    z-index:14;
    box-sizing:border-box;
    display:block;
    pointer-events:none;
    user-select:none;
  }
  .tia-canvas-ruler {
    background:var(--tia-canvas-ruler-bg, #303030);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;
    pointer-events:auto;
  }
  #tia-top-ruler { cursor:ns-resize; }
  #tia-left-ruler { cursor:ew-resize; }
  #tia-top-ruler {
    height:var(--tia-canvas-ruler-size, 24px);
    border-bottom:1px solid var(--tia-canvas-ruler-border, rgba(255,255,255,0.13));
  }
  #tia-left-ruler {
    width:var(--tia-canvas-ruler-size, 24px);
    border-right:1px solid var(--tia-canvas-ruler-border, rgba(255,255,255,0.13));
  }
  .tia-canvas-ruler-corner {
    width:var(--tia-canvas-ruler-size, 24px);
    height:var(--tia-canvas-ruler-size, 24px);
    background:var(--tia-canvas-ruler-bg, #303030);
    border-right:1px solid var(--tia-canvas-ruler-border, rgba(255,255,255,0.13));
    border-bottom:1px solid var(--tia-canvas-ruler-border, rgba(255,255,255,0.13));
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;
  }
  body:not(.tia-authenticated) .tia-canvas-ruler,
  body:not(.tia-authenticated) .tia-canvas-ruler-corner,
  body:not(.tia-canvas-rulers-on) .tia-canvas-ruler,
  body:not(.tia-canvas-rulers-on) .tia-canvas-ruler-corner {
    display:none !important;
  }
  body.tia-canvas-rulers-on #canvas {
    box-shadow:-1px -1px 0 rgba(255,255,255,0.08);
  }

  /* ================================================================
     TIA v0.4.6 RULER UNITS CONTEXT MENU SECTION
     Right-click ruler/corner to switch workspace display units without
     changing object sizes. Future module target: src/ui/ruler-units-menu.css
     ================================================================ */
  .tia-ruler-units-menu {
    position:fixed;
    z-index:10060;
    min-width:160px;
    padding:6px;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:12px;
    background:rgba(24,26,29,0.96);
    color:#f4f7f8;
    box-shadow:0 16px 42px rgba(0,0,0,0.42);
    backdrop-filter:blur(10px);
  }
  .tia-ruler-units-menu-title {
    padding:5px 8px 7px;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
  }
  .tia-ruler-units-menu button {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#f4f7f8;
    padding:8px 9px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    text-align:left;
  }
  .tia-ruler-units-menu button:hover,
  .tia-ruler-units-menu button:focus {
    background:rgba(99,255,157,0.12);
    outline:none;
  }
  .tia-ruler-units-menu button.active {
    color:#63ff9d;
    background:rgba(99,255,157,0.10);
  }
  .tia-ruler-units-menu-short {
    opacity:.62;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
  }



  /* ================================================================
     TIA PRINT TEMPLATE GUIDE SYSTEM + NEW PROJECT MODAL SECTION
     Future module target: src/templates/template-guides.css + src/projects/new-project-modal.css
     ================================================================ */
  .tia-new-project-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9997;background:rgba(0,0,0,.62);backdrop-filter:blur(8px)}
  .tia-new-project-modal.open{display:flex}
  .tia-new-project-window{width:min(980px,calc(100vw - 42px));max-height:min(760px,calc(100vh - 42px));overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(180deg,rgba(34,37,38,.98),rgba(19,21,22,.98));color:#f4f4f4;box-shadow:0 28px 90px rgba(0,0,0,.58)}
  .tia-new-project-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
  .tia-new-project-header h2{margin:0 0 5px;font-size:22px;line-height:1.1}.tia-new-project-header p{margin:0;max-width:680px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.72)}
  .tia-new-project-close{width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer}
  .tia-new-project-body{padding:18px 22px;overflow:auto}.tia-new-project-controls{display:grid;grid-template-columns:minmax(220px,1fr) 180px;gap:14px;margin-bottom:16px}
  .tia-new-project-field label{display:block;margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62)}
  .tia-new-project-field input,.tia-new-project-field select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:#141516;color:#fff;padding:10px 11px;outline:none}
  .tia-template-picker-grid{display:flex;flex-direction:column;gap:18px}.tia-template-picker-section{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}.tia-template-picker-section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}.tia-template-picker-section-title{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92)}.tia-template-picker-section-count{font-size:11px;font-weight:700;color:rgba(255,255,255,.6)}.tia-template-picker-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.tia-template-picker-card{min-height:124px;display:grid;grid-template-columns:94px 1fr;align-items:center;gap:12px;text-align:left;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.045);color:#fff;padding:12px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.tia-template-picker-card:hover,.tia-template-picker-card:focus{transform:translateY(-1px);border-color:rgba(99,255,157,.55);background:rgba(99,255,157,.08);outline:none}.tia-template-picker-card.selected{border-color:rgba(99,255,157,.88);box-shadow:0 0 0 1px rgba(99,255,157,.34) inset,0 12px 36px rgba(0,0,0,.26);background:rgba(99,255,157,.105)}
  .tia-template-picker-preview{width:92px;height:92px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;padding:8px;box-sizing:border-box}.tia-template-picker-preview svg{width:100%;height:100%;display:block}.tia-template-picker-preview-bg{fill:rgba(255,255,255,.04)}.tia-template-picker-page{fill:#f8f8f2}.tia-template-picker-trim{fill:none;stroke:#111;stroke-width:1.3px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.tia-template-picker-bleed{fill:none;stroke:#ff4f8b;stroke-width:1.4px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}.tia-template-picker-safe{fill:rgba(99,255,157,.08);stroke:#63ff9d;stroke-width:1.3px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}.tia-template-picker-fold{stroke:#43d9ff;stroke-width:1.5px;stroke-dasharray:7 4;vector-effect:non-scaling-stroke}.tia-template-picker-gridline{fill:none;stroke:rgba(67,217,255,.28);stroke-width:1px;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}.tia-template-picker-content{min-width:0;display:block}
  .tia-template-picker-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}.tia-template-picker-name{font-size:14px;font-weight:900;line-height:1.2}.tia-template-picker-cat{flex:0 0 auto;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800;color:#0d1710;background:rgba(99,255,157,.88)}
  .tia-template-picker-meta,.tia-template-picker-guides{display:block;margin-top:6px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.72)}.tia-template-picker-guides{color:rgba(255,255,255,.58)}
  .tia-new-project-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px 18px;border-top:1px solid rgba(255,255,255,.10)}.tia-new-project-status{min-height:18px;font-size:12px;color:rgba(255,255,255,.68)}.tia-new-project-actions{display:flex;gap:10px}.tia-new-project-button{border:1px solid rgba(255,255,255,.16);border-radius:10px;background:#36393b;color:#fff;padding:10px 14px;font-size:12px;font-weight:850;cursor:pointer}.tia-new-project-button.primary{background:linear-gradient(135deg,var(--tia-accent,#63ff9d),color-mix(in srgb,var(--tia-accent,#63ff9d) 52%,#ffffff 48%));color:#101413}
  .tia-template-guide-chip{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;border:1px solid rgba(99,255,157,.35);color:rgba(99,255,157,.95);background:rgba(99,255,157,.09);font-size:10px;font-weight:850;margin-left:6px;vertical-align:middle}.tia-templates-guide-summary{display:block;margin-top:3px;font-size:11px;color:rgba(255,255,255,.58);line-height:1.35}
  @media(max-width:760px){.tia-new-project-controls{grid-template-columns:1fr}.tia-new-project-footer{align-items:flex-start;flex-direction:column}.tia-new-project-actions{width:100%}.tia-new-project-button{flex:1}}



  /* ================================================================
     TIA IMPORT / EXPORT FILE SYSTEM SECTION
     Placeholder-only styles for import/export planning UI.
     Future module target: src/io/import-export.css
     ================================================================ */
  .tia-io-menu-separator{height:1px;margin:5px 8px;background:rgba(255,255,255,.12);pointer-events:none}
  .tia-io-page{display:flex;flex-direction:column;gap:16px;max-width:1180px}
  .tia-io-warning{border:1px solid rgba(255,220,120,.28);background:rgba(255,205,89,.08);border-radius:14px;padding:12px 14px;color:rgba(255,255,255,.82);font-size:13px;line-height:1.45}
  .tia-io-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .tia-io-card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);border-radius:16px;padding:14px;min-height:142px;display:flex;flex-direction:column;gap:10px}
  .tia-io-card h4{margin:0;color:#fff;font-size:14px;letter-spacing:.01em}
  .tia-io-card p{margin:0;color:rgba(255,255,255,.68);font-size:12px;line-height:1.42}
  .tia-io-badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
  .tia-io-badge{border:1px solid rgba(99,255,157,.22);background:rgba(99,255,157,.08);color:rgba(225,255,235,.9);border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800}
  .tia-io-badge.pending{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.72)}
  .tia-io-actions{display:flex;flex-wrap:wrap;gap:10px}
  .tia-io-button{border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;padding:9px 12px;font-size:12px;font-weight:850;cursor:pointer}
  .tia-io-button:hover,.tia-io-button:focus{border-color:rgba(99,255,157,.45);background:rgba(99,255,157,.12);outline:none}
  .tia-io-status{min-height:18px;color:rgba(255,255,255,.72);font-size:12px}
  .tia-io-plan{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(0,0,0,.16);padding:14px}
  .tia-io-plan h4{margin:0 0 10px;color:#fff;font-size:14px}
  .tia-io-plan ol{margin:0;padding-left:20px;color:rgba(255,255,255,.72);font-size:12px;line-height:1.55}
  @media(max-width:980px){.tia-io-grid{grid-template-columns:1fr}}

  /* ================================================================
     TIA IMPORT / EXPORT FILE SYSTEM SECTION
     PNG/WebP isolated test overlay. This preview layer intentionally
     uses pointer-events:none and does not participate in canvas
     selection, drawing, undo, or project object logic yet.
     Future module target: src/io/image-import-test.css
     ================================================================ */
  .tia-io-hidden-input{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .tia-image-import-test-layer{position:absolute;z-index:13;pointer-events:none;overflow:hidden;display:none}
  body.tia-authenticated .tia-image-import-test-layer.has-test-images{display:block}
  .tia-image-import-test-item{position:absolute;box-sizing:border-box;border:1px solid rgba(99,255,157,.46);border-radius:8px;overflow:hidden;background:rgba(0,0,0,.16);box-shadow:0 8px 26px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08) inset;pointer-events:none}
  .tia-image-import-test-item img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
  .tia-image-import-test-item.tia-svg-import-preview-item{border-color:rgba(67,217,255,.62);box-shadow:0 8px 26px rgba(0,0,0,.28),0 0 0 1px rgba(67,217,255,.16) inset}
  .tia-image-import-test-item.tia-svg-import-preview-item:before{content:'SVG PREVIEW';position:absolute;left:6px;top:6px;padding:3px 6px;border-radius:999px;background:rgba(67,217,255,.16);color:#dff8ff;font-size:9px;font-weight:900;letter-spacing:.04em;box-shadow:0 0 0 1px rgba(67,217,255,.25) inset}
  .tia-image-import-test-label{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.72);color:#eafff2;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
  .tia-io-test-note{border:1px solid rgba(99,255,157,.22);background:rgba(99,255,157,.07);border-radius:14px;padding:12px 14px;color:rgba(235,255,242,.82);font-size:13px;line-height:1.45}
  .tia-io-button.muted{opacity:.74;border-style:dashed;background:color-mix(in srgb, var(--tia-button-bg, #222) 78%, transparent);}
  .tia-io-import-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .tia-io-import-list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:12px;padding:9px 11px;color:rgba(255,255,255,.78);font-size:12px}
  .tia-io-import-list-row strong{color:#fff;font-size:12px}.tia-io-import-list-row span{color:rgba(255,255,255,.56);font-size:11px}



  /* ================================================================
     TIA STEP 42 PAGES / LAYERS NAME-FIRST COMPACT ICONS SECTION
     Moves page and layer names above their action icons, shrinks the
     page/layer icon controls by about 20%, and keeps the lower icon
     rows open for more future buttons.
     Future module target: src/ui/pages-layers-name-first.css
     ================================================================ */
  .page-row {
    gap:4px !important;
    min-height:58px !important;
  }
  .page-row-name,
  .layer-row-name {
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .page-row-name {
    order:1;
    padding-left:0 !important;
    min-height:18px !important;
  }
  .page-row-top {
    order:2;
  }
  .page-title-text,
  .layer-name {
    flex:1 1 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .layer-row {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:44px !important;
    padding:5px 6px !important;
  }
  .layer-row-name {
    min-height:16px !important;
  }
  .layer-row-tools {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    width:100% !important;
    min-width:0 !important;
  }
  .layer-icon {
    width:16px !important;
    min-width:16px !important;
    height:16px !important;
    border-radius:5px !important;
    font-size:9px !important;
  }
  .page-action-button,
  .layer-state-button,
  .layer-order-button,
  .layer-rename-button {
    width:19px !important;
    min-width:19px !important;
    height:19px !important;
    min-height:19px !important;
    flex:0 0 19px !important;
    border-radius:6px !important;
    font-size:9.5px !important;
  }
  .page-toggle,
  .page-drag-handle {
    width:16px !important;
    min-width:16px !important;
    height:19px !important;
    font-size:10px !important;
  }
  .page-thumbnail-wrap {
    width:43px !important;
    min-width:43px !important;
    height:22px !important;
  }
  .page-layer-count {
    margin-left:auto !important;
  }
  .layer-group-badge {
    margin-left:4px !important;
    max-width:52px !important;
  }
  .layer-row.hidden-layer .layer-row-name,
  .layer-row.hidden-layer .layer-icon {
    opacity:.48;
  }


  /* ================================================================
     TIA v0.5.92.8 AREAS 1-7 DARK GRADIENT + AREA 4 FIT SECTION
     Area map: 1 top bar, 2 main icon/action toolbar, 3 project tabs/status,
     4 left toolbar, 5 bottom swatches, 6 control panel, 7 pages/layers.
     Keeps icon art/text size the same while making Area 4 boxes smaller.
     ================================================================ */
  :root {
    --tia-ui-dark-gradient:linear-gradient(180deg, rgba(35,38,38,0.98), rgba(18,20,20,0.98));
    --tia-ui-dark-gradient-soft:linear-gradient(180deg, rgba(42,45,45,0.96), rgba(22,24,24,0.98));
    --tia-ui-dark-gradient-flat:linear-gradient(180deg, rgba(31,34,34,0.98), rgba(18,20,20,0.98));
    --tia-left-toolbar-width:86px;
  }

  /* Area 1 */
  #top1 {
    background:var(--tia-ui-dark-gradient) !important;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }

  /* Area 2 */
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only {
    background:var(--tia-ui-dark-gradient-soft) !important;
    border-color:rgba(255,255,255,0.14) !important;
  }

  /* Area 3 */
  #top3 {
    background:var(--tia-ui-dark-gradient-flat) !important;
    border-top:1px solid rgba(255,255,255,0.06) !important;
    border-bottom:1px solid rgba(0,0,0,0.45) !important;
  }

  /* Area 4 */
  #leftBar {
    width:var(--tia-left-toolbar-width, 86px) !important;
    background:var(--tia-ui-dark-gradient) !important;
    border-right:1px solid rgba(255,255,255,0.07);
    padding-top:8px !important;
  }
  .tool-button.tia-toolbar-labeled-button,
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only {
    width:70px !important;
    min-width:70px !important;
    height:66px !important;
    min-height:66px !important;
    padding:4px 4px !important;
    gap:4px !important;
    margin:5px 0 !important;
    background:var(--tia-ui-dark-gradient-soft) !important;
    border-color:rgba(255,255,255,0.14) !important;
  }
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only .tia-button-svg-holder,
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only .tia-builtin-button-svg-holder {
    width:33px !important;
    height:33px !important;
    min-width:33px !important;
    min-height:33px !important;
    flex-basis:33px !important;
  }
  .tool-button.tia-toolbar-labeled-button.tia-button-icon-only .tia-button-visible-label {
    font-size:10px !important;
    max-width:66px !important;
  }

  /* Area 5 */
  #bottomBar {
    background:var(--tia-ui-dark-gradient) !important;
    border-top:1px solid rgba(255,255,255,0.07) !important;
  }

  /* Area 6 */
  #control-center-placeholder {
    background:var(--tia-ui-dark-gradient) !important;
    border-color:rgba(255,255,255,0.13) !important;
  }
  #control-center-placeholder .control-tabs,
  #control-center-placeholder .control-tab.active,
  #control-center-placeholder .control-body {
    background:transparent !important;
  }
  #control-center-placeholder .control-tab {
    background:rgba(255,255,255,0.035) !important;
  }
  #control-center-placeholder .control-tab.active {
    background:rgba(99,255,157,0.08) !important;
  }

  /* Area 7 */
  #pages-layers-placeholder {
    background:var(--tia-ui-dark-gradient) !important;
    border-color:rgba(255,255,255,0.13) !important;
  }
  #pages-layers-placeholder .pages-layers-header,
  #pages-layers-placeholder .page-section-header {
    background:linear-gradient(180deg, rgba(255,255,255,0.075), rgba(0,0,0,0.08)) !important;
  }
  #pages-layers-placeholder .page-row,
  #pages-layers-placeholder .layer-row {
    background:rgba(0,0,0,0.18) !important;
  }

  /* Right shell behind Areas 6 and 7 */
  #rightBar {
    background:var(--tia-ui-dark-gradient) !important;
  }

  /* ================================================================
     TIA v0.5.92.11 RIGHT PANEL SHADOW STRIP REMOVAL SECTION
     Removes the remaining vertical dark strip between the canvas/ruler
     area and Areas 6/7 by disabling the right panel shell shadow.
     ================================================================ */
  #rightBar {
    box-shadow:none !important;
  }


  /* ================================================================
     TIA v0.5.92.12 RIGHT LAYOUT GAP REMOVAL SECTION
     This targets the remaining old reserved gap between the canvas/ruler
     area and Areas 6/7. It treats the right panel as the full visual width
     so canvas/rulers/status bars stop short exactly at Area 6/7.
     ================================================================ */
  :root {
    --tia-right-panel-width:304px;
    --tia-right-panel-live-width:var(--tia-right-panel-width);
  }
  #rightBar {
    width:var(--tia-right-panel-width, 304px) !important;
    padding:8px 10px 10px 0 !important;
    border-left:0 !important;
    box-shadow:none !important;
    background:var(--tia-ui-dark-gradient) !important;
  }
  #control-center-placeholder,
  #pages-layers-placeholder {
    margin-left:0 !important;
    width:100% !important;
    border-top-left-radius:0 !important;
    border-bottom-left-radius:0 !important;
  }



  /* ================================================================
     TIA v0.5.92.14 FLOATING RIGHT PANEL HANDLE SECTION
     Adds back a small floating collapse handle without reserving layout
     space. It floats over the canvas/right-panel seam so it does not
     recreate the old vertical gutter. No import/export changes.
     ================================================================ */
  #tia-right-panel-toggle.tia-right-panel-toggle {
    display:flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
    position:fixed !important;
    top:50% !important;
    right:calc(var(--tia-right-panel-live-width, 304px) - 12px) !important;
    transform:translateY(-50%) !important;
    z-index:1300 !important;
    width:24px !important;
    height:52px !important;
    min-width:24px !important;
    padding:0 !important;
    border:1px solid rgba(99,255,157,0.50) !important;
    border-radius:999px !important;
    background:rgba(8, 12, 10, 0.58) !important;
    color:var(--tia-accent, #63ff9d) !important;
    box-shadow:0 0 0 1px rgba(0,0,0,0.25), 0 10px 22px rgba(0,0,0,0.32), 0 0 12px rgba(99,255,157,0.16) !important;
    backdrop-filter:blur(8px);
    opacity:0.72;
    cursor:pointer;
    transition:right 0.18s ease, opacity 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  }
  #tia-right-panel-toggle.tia-right-panel-toggle:hover,
  #tia-right-panel-toggle.tia-right-panel-toggle:focus {
    opacity:1;
    outline:none !important;
    background:rgba(18, 28, 22, 0.82) !important;
    border-color:rgba(99,255,157,0.88) !important;
    box-shadow:0 0 0 1px rgba(0,0,0,0.32), 0 12px 24px rgba(0,0,0,0.38), 0 0 18px rgba(99,255,157,0.32) !important;
  }
  #tia-right-panel-toggle .tia-right-panel-toggle-icon {
    display:block !important;
    font-size:24px !important;
    line-height:1 !important;
    font-weight:900 !important;
    transform:rotate(0deg) translateX(1px) !important;
    text-shadow:0 0 8px rgba(99,255,157,0.65) !important;
  }
  body.tia-right-panel-collapsed #tia-right-panel-toggle.tia-right-panel-toggle {
    right:8px !important;
  }
  body.tia-right-panel-collapsed #tia-right-panel-toggle .tia-right-panel-toggle-icon {
    transform:rotate(180deg) translateX(1px) !important;
  }
  body:not(.tia-authenticated) #tia-right-panel-toggle.tia-right-panel-toggle {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }



  /* ================================================================
     TIA v0.5.92.15 CUSTOM SWATCH BUTTON POLISH SECTION
     Keeps the Area 5 + custom color button clickable after changing it
     from a div to a real button.
     ================================================================ */
  .add-color {
    cursor:pointer;
    padding:0;
    font-family:inherit;
  }
  .add-color:hover,
  .add-color:focus {
    border-color:var(--tia-accent, #63ff9d);
    color:#000;
    outline:none;
  }
  .tia-custom-color-swatch {
    box-shadow:0 0 0 1px rgba(99,255,157,0.20) inset;
  }


  /* ================================================================
     TIA v0.5.92.16 AREA 5 ACTIVE FILL/STROKE POLISH SECTION
     Makes the active Fill/Stroke holder easier to see without changing
     the Area 5 layout or import/export code.
     ================================================================ */
  #bottomBar .holder-swatch {
    transition:transform 0.12s ease, outline-color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  }
  #bottomBar .holder-swatch:hover {
    border-color:rgba(99,255,157,0.72);
  }
  #bottomBar .holder-swatch.active-swatch-target {
    outline:2px solid var(--tia-accent, #63ff9d) !important;
    outline-offset:2px !important;
    border-color:rgba(99,255,157,0.92) !important;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.72),
      0 0 12px rgba(99,255,157,0.65),
      inset 0 0 0 1px rgba(255,255,255,0.42) !important;
    transform:translateY(-1px);
    z-index:8;
  }
  #bottomBar .holder-swatch.active-swatch-target::before {
    position:absolute;
    right:-4px;
    top:-5px;
    width:12px;
    height:12px;
    border-radius:999px;
    background:var(--tia-accent, #63ff9d);
    color:#06100a;
    font-size:7px;
    font-weight:900;
    line-height:12px;
    text-align:center;
    box-shadow:0 0 0 1px rgba(0,0,0,0.75), 0 0 8px rgba(99,255,157,0.75);
    pointer-events:none;
  }
  #bottomBar .fill-swatch.active-swatch-target::before { content:'F'; }
  #bottomBar .stroke-swatch.active-swatch-target::before { content:'S'; }


  /* ================================================================
     TIA v0.5.92.17 AREA 6/7 RIGHT PANEL POLISH SECTION
     Tightens the Control panel and Pages/Layers panel spacing, improves
     section headers, and gives page/layer rows a cleaner premium look.
     No import/export changes.
     ================================================================ */
  #rightBar {
    gap:6px !important;
    padding:6px 8px 8px 0 !important;
  }
  #control-center-placeholder,
  #pages-layers-placeholder {
    border-radius:10px !important;
    border-color:rgba(255,255,255,0.14) !important;
    box-shadow:0 10px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.055) !important;
    overflow:hidden !important;
  }
  #control-center-placeholder {
    min-height:246px !important;
  }
  #control-center-placeholder .control-tabs {
    min-height:30px !important;
    border-bottom:1px solid rgba(255,255,255,0.085) !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.08)) !important;
  }
  #control-center-placeholder .control-tab {
    height:30px !important;
    font-size:10.5px !important;
    letter-spacing:0.01em !important;
    border-right:1px solid rgba(255,255,255,0.075) !important;
    color:rgba(255,255,255,0.76) !important;
  }
  #control-center-placeholder .control-tab.active {
    color:var(--tia-accent, #63ff9d) !important;
    background:linear-gradient(180deg, rgba(99,255,157,0.14), rgba(99,255,157,0.045)) !important;
    box-shadow:inset 0 -2px 0 rgba(99,255,157,0.68) !important;
  }
  #control-center-placeholder .control-body {
    padding:8px !important;
  }
  #control-center-placeholder .control-row {
    margin-bottom:6px !important;
    gap:5px !important;
  }
  #pages-layers-placeholder .pages-layers-header {
    min-height:34px !important;
    padding:6px 8px !important;
    border-bottom:1px solid rgba(255,255,255,0.085) !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.10)) !important;
  }
  #pages-layers-placeholder .pages-layers-title {
    font-size:11.5px !important;
    font-weight:800 !important;
    letter-spacing:0.02em !important;
  }
  #pages-layers-placeholder .pages-layers-subtitle {
    font-size:9.5px !important;
    color:rgba(255,255,255,0.52) !important;
  }
  #pages-layers-placeholder .add-page-button {
    height:24px !important;
    min-width:70px !important;
    font-size:10.5px !important;
    padding:0 10px !important;
  }
  #pages-layers-placeholder .page-layer-list {
    padding:6px !important;
  }
  #pages-layers-placeholder .page-row {
    min-height:52px !important;
    padding:5px !important;
    margin-bottom:5px !important;
    border-radius:9px !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(0,0,0,0.13)) !important;
    border-color:rgba(255,255,255,0.095) !important;
  }
  #pages-layers-placeholder .page-row:hover {
    background:linear-gradient(180deg, rgba(99,255,157,0.075), rgba(0,0,0,0.13)) !important;
    border-color:rgba(99,255,157,0.34) !important;
  }
  #pages-layers-placeholder .page-row.active {
    background:linear-gradient(90deg, rgba(99,255,157,0.18), rgba(255,255,255,0.045)) !important;
    border-color:rgba(99,255,157,0.76) !important;
    box-shadow:inset 3px 0 0 var(--tia-accent, #63ff9d), 0 8px 18px rgba(0,0,0,0.15) !important;
  }
  #pages-layers-placeholder .page-title-text,
  #pages-layers-placeholder .layer-name {
    font-size:11px !important;
    letter-spacing:0.005em !important;
  }
  #pages-layers-placeholder .page-thumbnail-wrap {
    border-radius:7px !important;
    box-shadow:inset 0 2px 8px rgba(0,0,0,0.32) !important;
  }
  #pages-layers-placeholder .layer-row {
    min-height:38px !important;
    margin:0 0 4px 16px !important;
    padding:4px 5px !important;
    border-radius:8px !important;
    background:linear-gradient(180deg, rgba(0,0,0,0.20), rgba(255,255,255,0.025)) !important;
    border-color:rgba(255,255,255,0.075) !important;
  }
  #pages-layers-placeholder .layer-row:hover {
    background:linear-gradient(180deg, rgba(99,255,157,0.075), rgba(0,0,0,0.16)) !important;
    border-color:rgba(99,255,157,0.28) !important;
  }
  #pages-layers-placeholder .layer-row.active {
    background:linear-gradient(90deg, rgba(99,255,157,0.16), rgba(0,0,0,0.16)) !important;
    border-color:rgba(99,255,157,0.70) !important;
    box-shadow:inset 3px 0 0 var(--tia-accent, #63ff9d), 0 5px 14px rgba(0,0,0,0.13) !important;
  }
  #pages-layers-placeholder .layer-row-tools {
    gap:3px !important;
  }
  #pages-layers-placeholder .page-action-button,
  #pages-layers-placeholder .layer-state-button,
  #pages-layers-placeholder .layer-order-button,
  #pages-layers-placeholder .layer-rename-button {
    background:rgba(255,255,255,0.045) !important;
    border-color:rgba(255,255,255,0.10) !important;
  }
  #pages-layers-placeholder .page-action-button:hover,
  #pages-layers-placeholder .layer-state-button:hover,
  #pages-layers-placeholder .layer-order-button:hover,
  #pages-layers-placeholder .layer-rename-button:hover {
    background:rgba(99,255,157,0.11) !important;
    border-color:rgba(99,255,157,0.42) !important;
  }

  /* ================================================================
     TIA v0.5.92.18 AREA 4 LEFT TOOLBAR POLISH SECTION
     Polishes the left main toolbar only: tighter spacing, cleaner button
     surfaces, and a stronger selected-tool highlight. Icon sizes stay the
     same. No import/export changes.
     ================================================================ */
  #leftBar {
    padding-top:7px !important;
  }
  #leftBar .tool-button.tia-toolbar-labeled-button,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only {
    margin:4px 0 !important;
    border-radius:11px !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.075), rgba(0,0,0,0.18)) !important;
    border-color:rgba(255,255,255,0.13) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 4px 10px rgba(0,0,0,0.18) !important;
    transition:background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  }
  #leftBar .tool-button.tia-toolbar-labeled-button:hover,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only:hover {
    border-color:rgba(99,255,157,0.38) !important;
    background:linear-gradient(180deg, rgba(99,255,157,0.10), rgba(0,0,0,0.16)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 6px 14px rgba(0,0,0,0.22) !important;
    transform:translateY(-1px);
  }
  #leftBar .tool-button.active-tool,
  #leftBar .tool-button.tia-toolbar-labeled-button.active-tool,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only.active-tool {
    position:relative;
    border-color:rgba(99,255,157,0.88) !important;
    outline:1px solid rgba(99,255,157,0.55) !important;
    outline-offset:1px !important;
    background:linear-gradient(180deg, rgba(99,255,157,0.17), rgba(99,255,157,0.045)) !important;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.70),
      0 0 14px rgba(99,255,157,0.40),
      inset 0 1px 0 rgba(255,255,255,0.16) !important;
    color:#ffffff !important;
  }
  #leftBar .tool-button.active-tool::before {
    content:'';
    position:absolute;
    left:5px;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:999px;
    background:var(--tia-accent, #63ff9d);
    box-shadow:0 0 9px rgba(99,255,157,0.78);
    pointer-events:none;
  }
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only .tia-button-visible-label {
    font-weight:800 !important;
    opacity:0.92 !important;
    letter-spacing:0.01em !important;
  }
  #leftBar .tool-button.active-tool .tia-button-visible-label {
    color:var(--tia-accent, #63ff9d) !important;
    opacity:1 !important;
  }
  #leftBar .tool-button.active-tool .tia-button-svg-holder,
  #leftBar .tool-button.active-tool .tia-builtin-button-svg-holder {
    filter:drop-shadow(0 0 5px rgba(99,255,157,0.34));
  }
  body.tia-appearance-light #leftBar .tool-button.active-tool,
  body.tia-appearance-light #leftBar .tool-button.tia-toolbar-labeled-button.active-tool,
  body.tia-appearance-light #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only.active-tool {
    background:linear-gradient(180deg, rgba(99,255,157,0.22), rgba(99,255,157,0.08)) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.72),
      0 0 12px rgba(99,255,157,0.34),
      inset 0 1px 0 rgba(255,255,255,0.55) !important;
  }


  /* ================================================================
     TIA v0.5.92.19 AREA 1/2 TOP TOOLBAR POLISH SECTION
     Polishes the top app bar and main icon/action toolbar only: tighter
     spacing, cleaner button surfaces, and stronger hover/active states.
     No import/export changes.
     ================================================================ */
  #top1,
  #top2 {
    background:var(--tia-ui-dark-gradient) !important;
    border-bottom:1px solid rgba(255,255,255,0.07) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.045), 0 2px 12px rgba(0,0,0,0.16) !important;
  }
  #top1 {
    padding-left:10px !important;
    padding-right:10px !important;
  }
  #top2 {
    padding-left:10px !important;
    padding-right:10px !important;
    gap:2px !important;
  }
  #top1-separator,
  .top2-separator {
    background:linear-gradient(180deg, rgba(99,255,157,0.18), rgba(255,255,255,0.13), rgba(0,0,0,0.08)) !important;
    opacity:0.85;
    border-radius:999px;
  }
  #interactive-icons.tia-quick-actions-mode {
    gap:5px !important;
    align-items:center !important;
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button,
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only {
    border-radius:11px !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.078), rgba(0,0,0,0.18)) !important;
    border-color:rgba(255,255,255,0.135) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.075),
      0 4px 10px rgba(0,0,0,0.17) !important;
    transition:background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease, color 0.12s ease !important;
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button:hover,
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only:hover,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon:hover,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only:hover {
    border-color:rgba(99,255,157,0.42) !important;
    background:linear-gradient(180deg, rgba(99,255,157,0.105), rgba(0,0,0,0.16)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.105),
      0 6px 14px rgba(0,0,0,0.22),
      0 0 10px rgba(99,255,157,0.10) !important;
    transform:translateY(-1px);
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.active-icon,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon {
    border-color:rgba(99,255,157,0.86) !important;
    outline:1px solid rgba(99,255,157,0.42) !important;
    outline-offset:1px !important;
    background:linear-gradient(180deg, rgba(99,255,157,0.17), rgba(99,255,157,0.045)) !important;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.68),
      0 0 14px rgba(99,255,157,0.34),
      inset 0 1px 0 rgba(255,255,255,0.14) !important;
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-quick-action-separator {
    background:linear-gradient(180deg, rgba(99,255,157,0.18), rgba(255,255,255,0.11), rgba(0,0,0,0.10)) !important;
    opacity:0.8;
  }
  #tia-quick-action-status {
    border-color:rgba(255,255,255,0.10) !important;
    background:rgba(0,0,0,0.14) !important;
  }
  #top2 .dropdown-text {
    margin-right:4px !important;
    padding:5px 7px !important;
    border-radius:7px !important;
    color:rgba(255,255,255,0.86) !important;
    transition:background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  }
  #top2 .dropdown-text:hover {
    background:rgba(99,255,157,0.10) !important;
    color:#ffffff !important;
    box-shadow:inset 0 0 0 1px rgba(99,255,157,0.22) !important;
  }
  #top2 .dropdown-box {
    background:linear-gradient(180deg, rgba(42,45,45,0.98), rgba(21,23,23,0.98)) !important;
    border-color:rgba(255,255,255,0.12) !important;
    border-radius:9px !important;
    padding:5px !important;
    box-shadow:0 12px 26px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }
  #top2 .menu-item {
    border-radius:6px !important;
    padding:5px 9px !important;
  }
  #top2 .menu-item:hover,
  #top2 .menu-item:focus {
    background:rgba(99,255,157,0.12) !important;
    color:#ffffff !important;
    outline:none !important;
  }
  #top2 .project-new-button-helpbar,
  #top2 .tia-theme-toggle-button,
  #top2 .tia-logout-button {
    border-radius:8px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.15) !important;
    transition:background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  }
  #top2 .project-new-button-helpbar:hover,
  #top2 .tia-theme-toggle-button:hover,
  #top2 .tia-logout-button:hover {
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.11), 0 5px 12px rgba(0,0,0,0.20), 0 0 10px rgba(99,255,157,0.10) !important;
  }
  #top2 .tia-user-session-bar {
    background:rgba(0,0,0,0.15) !important;
    border:1px solid rgba(255,255,255,0.09) !important;
    border-radius:999px !important;
    padding:2px 4px 2px 7px !important;
  }
  body.tia-appearance-light #top1,
  body.tia-appearance-light #top2 {
    background:linear-gradient(180deg, rgba(247,249,250,0.98), rgba(225,229,232,0.98)) !important;
    border-bottom-color:rgba(90,105,115,0.16) !important;
  }
  body.tia-appearance-light #top2 .dropdown-text {
    color:rgba(48,58,66,0.88) !important;
  }
  body.tia-appearance-light #top2 .dropdown-text:hover {
    background:rgba(99,255,157,0.18) !important;
    color:#26323a !important;
  }



  /* ================================================================
     TIA v0.5.92.20 OUTLINE TOOL COLOR TOOLBAR SECTION
     Area 4 gets per-tool color identity. Area 2 inherits the active
     tool color. Buttons become lighter/icon-first with hover glow.
     No import/export changes.
     ================================================================ */
  :root {
    --tia-tool-select-color:#63ff9d;
    --tia-tool-vector-color:#ffb45a;
    --tia-tool-text-color:#c084fc;
    --tia-tool-shapes-color:#62c7ff;
    --tia-tool-transform-color:#facc15;
    --tia-tool-erase-color:#ff6b8a;
    --tia-tool-zoom-color:#a7f3d0;
    --tia-tool-draw-color:#fb923c;
    --tia-current-tool-color:var(--tia-tool-select-color);
  }
  body[data-tia-active-tool="select"] { --tia-current-tool-color:var(--tia-tool-select-color); }
  body[data-tia-active-tool="vector"] { --tia-current-tool-color:var(--tia-tool-vector-color); }
  body[data-tia-active-tool="text"] { --tia-current-tool-color:var(--tia-tool-text-color); }
  body[data-tia-active-tool="shapes"] { --tia-current-tool-color:var(--tia-tool-shapes-color); }
  body[data-tia-active-tool="transform"] { --tia-current-tool-color:var(--tia-tool-transform-color); }
  body[data-tia-active-tool="erase"] { --tia-current-tool-color:var(--tia-tool-erase-color); }
  body[data-tia-active-tool="zoom"] { --tia-current-tool-color:var(--tia-tool-zoom-color); }
  body[data-tia-active-tool="draw"] { --tia-current-tool-color:var(--tia-tool-draw-color); }

  #leftBar .tool-button[data-tool="select"] { --tia-this-tool-color:var(--tia-tool-select-color); }
  #leftBar .tool-button[data-tool="vector"] { --tia-this-tool-color:var(--tia-tool-vector-color); }
  #leftBar .tool-button[data-tool="text"] { --tia-this-tool-color:var(--tia-tool-text-color); }
  #leftBar .tool-button[data-tool="shapes"] { --tia-this-tool-color:var(--tia-tool-shapes-color); }
  #leftBar .tool-button[data-tool="transform"] { --tia-this-tool-color:var(--tia-tool-transform-color); }
  #leftBar .tool-button[data-tool="erase"] { --tia-this-tool-color:var(--tia-tool-erase-color); }
  #leftBar .tool-button[data-tool="zoom"] { --tia-this-tool-color:var(--tia-tool-zoom-color); }
  #leftBar .tool-button[data-tool="draw"] { --tia-this-tool-color:var(--tia-tool-draw-color); }

  #leftBar .tool-button.tia-toolbar-labeled-button,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only {
    background:rgba(255,255,255,0.018) !important;
    border-color:rgba(255,255,255,0.055) !important;
    box-shadow:none !important;
  }
  #leftBar .tool-button.tia-toolbar-labeled-button:hover,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only:hover {
    border-color:color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 52%, transparent) !important;
    background:color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 10%, transparent) !important;
    box-shadow:0 0 14px color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 26%, transparent) !important;
  }
  #leftBar .tool-button .tia-button-svg-holder.tia-button-icon-mask {
    background:color-mix(in srgb, var(--tia-this-tool-color, #ffffff) 82%, white 18%) !important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  }
  #leftBar .tool-button .tia-button-visible-label {
    color:rgba(255,255,255,0.78) !important;
  }
  #leftBar .tool-button:hover .tia-button-svg-holder.tia-button-icon-mask,
  #leftBar .tool-button.active-tool .tia-button-svg-holder.tia-button-icon-mask {
    background:var(--tia-this-tool-color, #63ff9d) !important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 8px color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 64%, transparent));
  }
  #leftBar .tool-button:hover .tia-button-visible-label,
  #leftBar .tool-button.active-tool .tia-button-visible-label {
    color:var(--tia-this-tool-color, #63ff9d) !important;
  }
  #leftBar .tool-button.active-tool,
  #leftBar .tool-button.tia-toolbar-labeled-button.active-tool,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only.active-tool {
    border-color:color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 82%, white 8%) !important;
    outline:1px solid color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 52%, transparent) !important;
    background:color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 13%, transparent) !important;
    box-shadow:0 0 0 1px rgba(0,0,0,0.70), 0 0 16px color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 38%, transparent) !important;
  }
  #leftBar .tool-button.active-tool::before {
    background:var(--tia-this-tool-color, #63ff9d) !important;
    box-shadow:0 0 10px color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 84%, transparent) !important;
  }

  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button,
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only {
    background:rgba(255,255,255,0.016) !important;
    border-color:rgba(255,255,255,0.045) !important;
    box-shadow:none !important;
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button:hover,
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only:hover,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon:hover,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only:hover {
    border-color:color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 50%, transparent) !important;
    background:color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 9%, transparent) !important;
    box-shadow:0 0 13px color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 24%, transparent) !important;
  }
  #interactive-icons .top-icon .tia-button-svg-holder.tia-button-icon-mask {
    background:color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 78%, white 22%) !important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.44));
  }
  #interactive-icons .top-icon:hover .tia-button-svg-holder.tia-button-icon-mask,
  #interactive-icons .top-icon.active-icon .tia-button-svg-holder.tia-button-icon-mask {
    background:var(--tia-current-tool-color, #63ff9d) !important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.44)) drop-shadow(0 0 8px color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 62%, transparent));
  }
  #interactive-icons .top-icon .tia-button-visible-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon .tia-interactive-icon-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon .tia-interactive-icon-glyph {
    color:rgba(255,255,255,0.82) !important;
  }
  #interactive-icons .top-icon:hover .tia-button-visible-label,
  #interactive-icons .top-icon.active-icon .tia-button-visible-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon:hover .tia-interactive-icon-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon:hover .tia-interactive-icon-glyph,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon .tia-interactive-icon-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon .tia-interactive-icon-glyph {
    color:var(--tia-current-tool-color, #63ff9d) !important;
    text-shadow:0 0 8px color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 48%, transparent);
  }
  #interactive-icons.tia-quick-actions-mode .top-icon.active-icon,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon {
    border-color:color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 82%, white 8%) !important;
    outline:1px solid color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 44%, transparent) !important;
    background:color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 13%, transparent) !important;
    box-shadow:0 0 14px color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 34%, transparent) !important;
  }




  /* ================================================================
     TIA v0.5.92.21 FLAT ICON HOVER TOOLBAR SECTION
     Flattens Area 2 and Area 4 by removing visible button boxes while
     keeping icon/label hover color, active-tool color identity, and the
     clear Area 4 selected-tool marker. No import/export changes.
     ================================================================ */
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button,
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only,
  #leftBar .tool-button.tia-toolbar-labeled-button,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only {
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    outline:0 !important;
  }

  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button:hover,
  #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only:hover,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon:hover,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only:hover,
  #leftBar .tool-button.tia-toolbar-labeled-button:hover,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only:hover {
    background:rgba(255,255,255,0.025) !important;
    border-color:transparent !important;
    box-shadow:none !important;
    outline:0 !important;
    transform:translateY(-1px);
  }

  #interactive-icons .top-icon:hover .tia-button-svg-holder.tia-button-icon-mask,
  #interactive-icons .top-icon.active-icon .tia-button-svg-holder.tia-button-icon-mask {
    background:var(--tia-current-tool-color, #63ff9d) !important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.44)) drop-shadow(0 0 10px color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 72%, transparent)) !important;
  }

  #leftBar .tool-button:hover .tia-button-svg-holder.tia-button-icon-mask,
  #leftBar .tool-button.active-tool .tia-button-svg-holder.tia-button-icon-mask {
    background:var(--tia-this-tool-color, #63ff9d) !important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 10px color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 72%, transparent)) !important;
  }

  #interactive-icons .top-icon:hover .tia-button-visible-label,
  #interactive-icons .top-icon.active-icon .tia-button-visible-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon:hover .tia-interactive-icon-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon:hover .tia-interactive-icon-glyph,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon .tia-interactive-icon-label,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon .tia-interactive-icon-glyph {
    color:var(--tia-current-tool-color, #63ff9d) !important;
    text-shadow:0 0 9px color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 58%, transparent) !important;
  }

  #leftBar .tool-button:hover .tia-button-visible-label,
  #leftBar .tool-button.active-tool .tia-button-visible-label {
    color:var(--tia-this-tool-color, #63ff9d) !important;
    text-shadow:0 0 8px color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 48%, transparent) !important;
  }

  #interactive-icons.tia-quick-actions-mode .top-icon.active-icon,
  #interactive-icons:not(.tia-quick-actions-mode) .top-icon.active-icon {
    background:rgba(255,255,255,0.02) !important;
    border-color:transparent !important;
    outline:0 !important;
    box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--tia-current-tool-color, #63ff9d) 78%, transparent) !important;
  }

  #leftBar .tool-button.active-tool,
  #leftBar .tool-button.tia-toolbar-labeled-button.active-tool,
  #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only.active-tool {
    position:relative;
    background:rgba(255,255,255,0.024) !important;
    border-color:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  #leftBar .tool-button.active-tool::before {
    content:'';
    position:absolute;
    left:3px;
    top:9px;
    bottom:9px;
    width:3px;
    border-radius:999px;
    background:var(--tia-this-tool-color, #63ff9d) !important;
    box-shadow:0 0 11px color-mix(in srgb, var(--tia-this-tool-color, #63ff9d) 84%, transparent) !important;
    pointer-events:none;
  }

  body.tia-appearance-light #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button,
  body.tia-appearance-light #interactive-icons.tia-quick-actions-mode .top-icon.tia-toolbar-labeled-button.tia-button-icon-only,
  body.tia-appearance-light #interactive-icons:not(.tia-quick-actions-mode) .top-icon,
  body.tia-appearance-light #interactive-icons:not(.tia-quick-actions-mode) .top-icon.tia-toolbar-labeled-button.tia-button-icon-only,
  body.tia-appearance-light #leftBar .tool-button.tia-toolbar-labeled-button,
  body.tia-appearance-light #leftBar .tool-button.tia-toolbar-labeled-button.tia-button-icon-only {
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }



  /* ================================================================
     TIA v0.5.92.23 TEXT SKEW CONTROL PANEL POLISH SECTION
     Compact +/- skew controls for selected text objects. Future module
     target: src/text/text-skew-controls.css
     ================================================================ */
  .tia-text-skew-heading {
    margin:10px 0 6px;
    font-weight:900;
    color:rgba(255,255,255,0.88);
    font-size:11px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .tia-text-skew-control {
    display:grid;
    grid-template-columns:24px minmax(48px, 1fr) 24px;
    gap:4px;
    align-items:center;
    width:100%;
  }
  .tia-text-skew-control input {
    width:100% !important;
    min-width:0 !important;
    text-align:center;
  }
  .tia-text-skew-step {
    width:24px;
    height:24px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.035);
    color:#ffffff;
    font-weight:900;
    line-height:1;
    cursor:pointer;
  }
  .tia-text-skew-step:hover {
    border-color:rgba(192,132,252,0.62);
    color:#ffffff;
    box-shadow:0 0 10px rgba(192,132,252,0.20);
  }



  /* ================================================================
     TIA v0.5.92.24 COMPACT TEXT COMMAND CENTER SECTION
     Compacts the Text tab in Area 6 and makes its accents match the
     Text tool color. No import/export changes.
     ================================================================ */
  #control-center-placeholder .control-tab[data-tab="text"].active {
    color:var(--tia-tool-text-color, #c084fc) !important;
    background:linear-gradient(180deg, color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 18%, transparent), rgba(0,0,0,0.10)) !important;
    box-shadow:inset 0 -2px 0 var(--tia-tool-text-color, #c084fc) !important;
  }
  #control-body.tia-text-control-compact {
    --tia-text-panel-color:var(--tia-tool-text-color, #c084fc);
    padding:6px 8px 7px !important;
    color:rgba(245,247,250,0.96);
  }
  #control-body.tia-text-control-compact .tia-text-panel-title {
    margin:0 0 6px;
    color:var(--tia-text-panel-color);
    font-size:11px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:0.045em;
    text-transform:uppercase;
  }
  #control-body.tia-text-control-compact .control-note {
    font-size:10px !important;
    line-height:1.22 !important;
    margin:3px 0 5px !important;
    color:rgba(235,239,245,0.72) !important;
  }
  #control-body.tia-text-control-compact .tia-text-warning { color:#ffcf5b !important; }
  #control-body.tia-text-control-compact .control-row { margin-bottom:5px !important; gap:5px !important; }
  #control-body.tia-text-control-compact .control-row label,
  #control-body.tia-text-control-compact .tia-text-section-label,
  #control-body.tia-text-control-compact .tia-text-axis-label {
    color:color-mix(in srgb, var(--tia-text-panel-color) 58%, #ffffff) !important;
    font-size:10px !important;
    font-weight:800;
    letter-spacing:0.015em;
  }
  #control-body.tia-text-control-compact .control-row label { width:44px !important; min-width:44px !important; }
  #control-body.tia-text-control-compact input,
  #control-body.tia-text-control-compact select {
    height:22px !important;
    min-height:22px !important;
    padding:1px 5px !important;
    font-size:11px !important;
    border-radius:4px !important;
    background:rgba(255,255,255,0.065) !important;
    border-color:rgba(192,132,252,0.28) !important;
    color:#ffffff !important;
  }
  #control-body.tia-text-control-compact input:focus,
  #control-body.tia-text-control-compact select:focus {
    outline:0 !important;
    border-color:var(--tia-text-panel-color) !important;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--tia-text-panel-color) 40%, transparent) !important;
  }
  #control-body.tia-text-control-compact .tia-text-two-col-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    align-items:center;
    margin-bottom:5px;
  }
  #control-body.tia-text-control-compact .tia-text-mini-row { margin-bottom:0 !important; }
  #control-body.tia-text-control-compact .tia-text-mini-row label { width:42px !important; min-width:42px !important; }
  #control-body.tia-text-control-compact .control-icon-row { gap:4px !important; margin:0 0 5px !important; }
  #control-body.tia-text-control-compact .control-icon-button {
    height:22px !important;
    min-height:22px !important;
    padding:0 !important;
    border-radius:5px !important;
    border-color:rgba(192,132,252,0.24) !important;
    background:rgba(255,255,255,0.035) !important;
    color:rgba(255,255,255,0.88) !important;
    font-size:11px !important;
    line-height:1 !important;
    box-shadow:none !important;
  }
  #control-body.tia-text-control-compact .control-icon-button:hover {
    color:#ffffff !important;
    border-color:color-mix(in srgb, var(--tia-text-panel-color) 72%, transparent) !important;
    box-shadow:0 0 10px color-mix(in srgb, var(--tia-text-panel-color) 26%, transparent) !important;
  }
  #control-body.tia-text-control-compact .control-icon-button.active {
    color:var(--tia-text-panel-color) !important;
    border-color:var(--tia-text-panel-color) !important;
    background:color-mix(in srgb, var(--tia-text-panel-color) 12%, transparent) !important;
    box-shadow:0 0 10px color-mix(in srgb, var(--tia-text-panel-color) 24%, transparent) !important;
  }
  #control-body.tia-text-control-compact .tia-text-style-row { max-width:139px; }
  #control-body.tia-text-control-compact .tia-text-skew-compact-row {
    display:grid;
    grid-template-columns:34px 12px minmax(72px, 1fr) 12px minmax(72px, 1fr);
    gap:4px;
    align-items:center;
    margin:4px 0 4px;
  }
  #control-body.tia-text-control-compact .tia-text-skew-control {
    display:grid;
    grid-template-columns:20px minmax(35px, 1fr) 20px;
    gap:3px;
    width:100%;
  }
  #control-body.tia-text-control-compact .tia-text-skew-control input { text-align:center; width:100% !important; }
  #control-body.tia-text-control-compact .tia-text-skew-step {
    width:20px !important;
    height:22px !important;
    border-radius:5px !important;
    border-color:rgba(192,132,252,0.28) !important;
    background:rgba(255,255,255,0.04) !important;
    color:var(--tia-text-panel-color) !important;
    font-size:12px !important;
    box-shadow:none !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-step:hover {
    border-color:var(--tia-text-panel-color) !important;
    color:#ffffff !important;
    box-shadow:0 0 10px color-mix(in srgb, var(--tia-text-panel-color) 28%, transparent) !important;
  }
  #control-body.tia-text-control-compact .control-button-row { margin-top:5px !important; gap:5px !important; }
  #control-body.tia-text-control-compact .control-button {
    height:23px !important;
    min-height:23px !important;
    border-radius:5px !important;
    border-color:rgba(192,132,252,0.26) !important;
    background:rgba(255,255,255,0.045) !important;
    color:rgba(255,255,255,0.90) !important;
    font-size:11px !important;
    font-weight:800;
  }
  #control-body.tia-text-control-compact .control-button:hover {
    border-color:var(--tia-text-panel-color) !important;
    color:#ffffff !important;
    box-shadow:0 0 10px color-mix(in srgb, var(--tia-text-panel-color) 22%, transparent) !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-reset-row { margin:3px 0 5px !important; }
  #control-body.tia-text-control-compact #cc-text-path-controls .control-note {
    margin-top:6px !important;
    margin-bottom:4px !important;
    color:color-mix(in srgb, var(--tia-text-panel-color) 56%, #ffffff) !important;
    font-weight:800;
  }
  #control-body.tia-text-control-compact #cc-text-path-controls .control-button { height:24px !important; }

  /* ================================================================
     TIA v0.5.92.25 TEXT SKEW LAYOUT POLISH SECTION
     Tightens the Text tab skew controls in Area 6 with much smaller
     number boxes, inline reset, and cleaner spacing. No import/export changes.
     ================================================================ */
  #control-body.tia-text-control-compact .tia-text-skew-compact-row {
    grid-template-columns:34px 10px 68px 10px 68px 48px !important;
    gap:3px !important;
    align-items:center !important;
    margin:3px 0 2px !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-control {
    display:grid !important;
    grid-template-columns:17px 30px 17px !important;
    gap:2px !important;
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-control input,
  #control-body.tia-text-control-compact #cc-text-skew-x,
  #control-body.tia-text-control-compact #cc-text-skew-y {
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:20px !important;
    min-height:20px !important;
    padding:0 2px !important;
    text-align:center !important;
    font-size:10px !important;
    box-sizing:border-box !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-step {
    width:17px !important;
    min-width:17px !important;
    max-width:17px !important;
    height:20px !important;
    min-height:20px !important;
    padding:0 !important;
    border-radius:5px !important;
    font-size:11px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-inline-reset {
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:20px !important;
    min-height:20px !important;
    padding:0 !important;
    margin:0 !important;
    font-size:10px !important;
    border-radius:5px !important;
    color:color-mix(in srgb, var(--tia-text-panel-color) 68%, #ffffff) !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-reset-row {
    display:none !important;
  }
  #control-body.tia-text-control-compact .tia-text-skew-compact-row + .control-note {
    margin:1px 0 4px !important;
    font-size:9.5px !important;
    line-height:1.15 !important;
  }
  #control-body.tia-text-control-compact .tia-text-box-size-row {
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    margin-top:3px !important;
  }
  #control-body.tia-text-control-compact .tia-text-box-size-row .tia-text-mini-row {
    display:grid !important;
    grid-template-columns:36px minmax(44px, 1fr) !important;
    gap:4px !important;
    align-items:center !important;
  }
  #control-body.tia-text-control-compact .tia-text-box-size-row .tia-text-mini-row label {
    width:auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }
  #control-body.tia-text-control-compact .tia-text-box-size-row input {
    width:100% !important;
    min-width:0 !important;
  }



  /* ================================================================
     TIA v0.5.92.26 TEXT DISTORT PICKER FIRST PASS SECTION
     Adds a Text Distort picker/modal plus compact Area 6 controls.
     Future module target: src/text/text-distort.js/css/html.
     ================================================================ */
  .tia-text-distort-top-icon.active-icon,
  .tia-text-distort-top-icon:hover {
    color:var(--tia-tool-text-color, #c084fc) !important;
  }
  .tia-text-distort-row {
    display:grid !important;
    grid-template-columns:48px 1fr 58px !important;
    gap:4px !important;
    align-items:center !important;
    margin:4px 0 4px !important;
  }
  .tia-text-distort-row label {
    color:var(--tia-text-panel-color, var(--tia-tool-text-color, #c084fc)) !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
  }
  .tia-text-distort-current {
    height:22px !important;
    min-height:22px !important;
    border:1px solid color-mix(in srgb, var(--tia-text-panel-color, #c084fc) 40%, transparent) !important;
    border-radius:6px !important;
    background:rgba(192,132,252,0.06) !important;
    color:#f3eaff !important;
    font-size:11px !important;
    font-weight:800 !important;
    display:flex !important;
    align-items:center !important;
    padding:0 7px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }
  .tia-text-distort-pick-button,
  .tia-text-distort-reset-button {
    height:22px !important;
    min-height:22px !important;
    padding:0 7px !important;
    border-radius:6px !important;
    border:1px solid color-mix(in srgb, var(--tia-text-panel-color, #c084fc) 42%, transparent) !important;
    background:rgba(192,132,252,0.08) !important;
    color:#f4eaff !important;
    font-size:10px !important;
    font-weight:900 !important;
  }
  .tia-text-distort-controls-row {
    display:grid !important;
    grid-template-columns:44px 1fr 44px !important;
    gap:4px !important;
    align-items:center !important;
    margin:3px 0 5px !important;
  }
  .tia-text-distort-controls-row input[type="range"] {
    width:100% !important;
    accent-color:var(--tia-text-panel-color, var(--tia-tool-text-color, #c084fc));
  }
  .tia-text-distort-controls-row input[type="number"] {
    width:44px !important;
    height:21px !important;
    min-height:21px !important;
    padding:0 2px !important;
    text-align:center !important;
    font-size:10px !important;
  }
  .tia-text-distort-note {
    margin:0 0 5px !important;
    font-size:10px !important;
    line-height:1.25 !important;
    color:color-mix(in srgb, var(--tia-text-panel-color, #c084fc) 50%, #ffffff) !important;
  }
  .tia-text-distort-backdrop {
    position:fixed;
    inset:0;
    z-index:4700;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.50);
    backdrop-filter:blur(3px);
  }
  .tia-text-distort-backdrop.tia-open {
    display:flex;
  }
  .tia-text-distort-modal {
    width:min(520px, calc(100vw - 36px));
    max-height:calc(100vh - 52px);
    border-radius:18px;
    border:1px solid rgba(192,132,252,0.30);
    background:linear-gradient(180deg, rgba(32,34,38,0.98), rgba(14,15,18,0.98));
    box-shadow:0 26px 80px rgba(0,0,0,0.62), 0 0 36px rgba(192,132,252,0.12);
    color:#fff;
    overflow:hidden;
  }
  .tia-text-distort-modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.10);
  }
  .tia-text-distort-modal-title {
    color:var(--tia-tool-text-color, #c084fc);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:12px;
  }
  .tia-text-distort-modal-close {
    width:28px;
    height:28px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.05);
    color:#fff;
    font-weight:900;
    cursor:pointer;
  }
  .tia-text-distort-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    padding:14px;
  }
  .tia-text-distort-preset {
    min-height:78px;
    border-radius:13px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.045);
    color:#e9edf2;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .tia-text-distort-preset:hover,
  .tia-text-distort-preset.tia-active {
    transform:translateY(-1px);
    border-color:rgba(192,132,252,0.65);
    background:rgba(192,132,252,0.10);
    box-shadow:0 0 18px rgba(192,132,252,0.16);
  }
  .tia-text-distort-preset-icon {
    width:62px;
    height:34px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--tia-tool-text-color, #c084fc);
    font-size:24px;
    font-weight:900;
    background:rgba(0,0,0,0.16);
  }
  .tia-text-distort-preset-name {
    font-size:10px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#d9d4e5;
    text-align:center;
  }
  .tia-text-distort-modal-note {
    padding:0 14px 14px;
    color:#aeb6bf;
    font-size:11px;
    line-height:1.35;
  }


  /* ================================================================
     TIA v0.5.92.27 TEXT DISTORT POLISH SECTION
     Premium polish for the Distort picker and tighter Area 6 Distort
     controls. Kept isolated from import/export.
     ================================================================ */
  .tia-text-distort-panel {
    margin-top:6px !important;
    padding:7px 7px 8px !important;
    border:1px solid color-mix(in srgb, var(--tia-text-panel-color, #c084fc) 26%, transparent) !important;
    border-radius:10px !important;
    background:linear-gradient(180deg, rgba(192,132,252,0.075), rgba(0,0,0,0.075)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.04) !important;
  }
  .tia-text-distort-row {
    grid-template-columns:46px minmax(0,1fr) 44px !important;
    margin:0 0 5px !important;
  }
  .tia-text-distort-current {
    height:20px !important;
    min-height:20px !important;
    border-radius:6px !important;
    font-size:10px !important;
    padding:0 6px !important;
  }
  .tia-text-distort-pick-button,
  .tia-text-distort-reset-button,
  .tia-text-distort-flip-button {
    height:20px !important;
    min-height:20px !important;
    padding:0 6px !important;
    border-radius:6px !important;
    font-size:9.5px !important;
    line-height:1 !important;
  }
  .tia-text-distort-controls-row {
    grid-template-columns:46px minmax(0,1fr) 38px !important;
    gap:5px !important;
    margin:3px 0 5px !important;
  }
  .tia-text-distort-controls-row label {
    color:var(--tia-text-panel-color, var(--tia-tool-text-color, #c084fc)) !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
  }
  .tia-text-distort-controls-row input[type="number"] {
    width:38px !important;
    height:20px !important;
    min-height:20px !important;
    border-radius:5px !important;
    font-size:9.5px !important;
  }
  .tia-text-distort-action-row {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
    margin:2px 0 0 !important;
  }
  .tia-text-distort-note {
    display:none !important;
  }
  .tia-text-distort-backdrop {
    background:radial-gradient(circle at center, rgba(192,132,252,0.12), rgba(0,0,0,0.64) 54%, rgba(0,0,0,0.72)) !important;
    backdrop-filter:blur(5px) saturate(1.08) !important;
  }
  .tia-text-distort-modal {
    width:min(620px, calc(100vw - 34px)) !important;
    border-radius:20px !important;
    border:1px solid color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 36%, transparent) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(192,132,252,0.18), transparent 34%),
      linear-gradient(180deg, rgba(31,33,39,0.985), rgba(11,12,15,0.99)) !important;
    box-shadow:0 30px 90px rgba(0,0,0,0.66), 0 0 48px rgba(192,132,252,0.16) !important;
  }
  .tia-text-distort-modal-header {
    padding:13px 15px 11px !important;
    border-bottom:1px solid rgba(255,255,255,0.08) !important;
  }
  .tia-text-distort-modal-title {
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
    color:#f5edff !important;
    letter-spacing:.09em !important;
  }
  .tia-text-distort-modal-title::after {
    content:'Flexi-style logo distort map — active presets plus planned tools';
    color:color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 62%, #ffffff) !important;
    font-size:9.5px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
    text-transform:none !important;
    opacity:.86;
  }
  .tia-text-distort-modal-close {
    width:26px !important;
    height:26px !important;
    background:rgba(255,255,255,0.04) !important;
  }
  .tia-text-distort-grid {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:9px !important;
    padding:14px 15px 12px !important;
  }
  .tia-text-distort-preset {
    position:relative !important;
    min-height:82px !important;
    border-radius:14px !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)) !important;
    border-color:rgba(255,255,255,0.11) !important;
    overflow:hidden !important;
  }
  .tia-text-distort-preset::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 18%, transparent), transparent 58%);
    opacity:0;
    transition:opacity .12s ease;
    pointer-events:none;
  }
  .tia-text-distort-preset:hover::before,
  .tia-text-distort-preset.tia-active::before { opacity:1; }
  .tia-text-distort-preset:hover {
    border-color:color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 58%, transparent) !important;
    background:linear-gradient(180deg, rgba(192,132,252,0.11), rgba(255,255,255,0.028)) !important;
    box-shadow:0 10px 24px rgba(0,0,0,0.28), 0 0 18px rgba(192,132,252,0.16) !important;
  }
  .tia-text-distort-preset.tia-active {
    border-color:color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 82%, white 8%) !important;
    background:linear-gradient(180deg, rgba(192,132,252,0.18), rgba(192,132,252,0.06)) !important;
    box-shadow:0 0 0 1px rgba(0,0,0,0.58), 0 0 22px rgba(192,132,252,0.25) !important;
  }
  .tia-text-distort-preset.tia-active::after {
    content:'✓';
    position:absolute;
    top:6px;
    right:7px;
    width:16px;
    height:16px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:900;
    color:#100818;
    background:var(--tia-tool-text-color, #c084fc);
    box-shadow:0 0 12px rgba(192,132,252,0.40);
  }
  .tia-text-distort-preset-icon {
    width:70px !important;
    height:34px !important;
    border-radius:10px !important;
    border-color:rgba(255,255,255,0.12) !important;
    background:linear-gradient(180deg, rgba(0,0,0,0.26), rgba(0,0,0,0.11)) !important;
    font-size:23px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05) !important;
  }
  .tia-text-distort-preset-name {
    font-size:9.5px !important;
    color:#e7e0ee !important;
  }

  /* ================================================================
     TIA v0.5.92.33 FLEXI DISTORT PICKER NAMING CLEANUP SECTION
     Re-maps the Text Distort picker to Flexi-style names and adds planned
     placeholders for the remaining logo distort tools. No new math here.
     ================================================================ */

  /* ================================================================
     TIA v0.5.92.34 CORNER DISTORT CONTROLS SECTION
     Compact Area 6 controls for the first active Corner distort pass.
     ================================================================ */
  .tia-text-corner-controls {
    display:grid;
    gap:5px;
    margin:3px 0 5px;
  }
  .tia-text-corner-row,
  .tia-text-corner-direction-row {
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 38px;
    gap:5px;
    align-items:center;
  }
  .tia-text-corner-direction-row {
    grid-template-columns:46px 1fr 1fr;
  }
  .tia-text-corner-row label,
  .tia-text-corner-direction-row label {
    color:var(--tia-text-panel-color, var(--tia-tool-text-color, #c084fc));
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .tia-text-corner-row input[type="number"] {
    width:38px !important;
    height:20px !important;
    min-height:20px !important;
    border-radius:5px !important;
    font-size:9.5px !important;
  }
  .tia-text-corner-dir-button {
    height:20px !important;
    min-height:20px !important;
    padding:0 6px !important;
    border-radius:6px !important;
    font-size:9.5px !important;
    line-height:1 !important;
  }
  .tia-text-corner-dir-button.tia-active {
    border-color:color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 72%, transparent) !important;
    background:color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 18%, transparent) !important;
    color:#ffffff !important;
    box-shadow:0 0 12px color-mix(in srgb, var(--tia-tool-text-color, #c084fc) 22%, transparent) !important;
  }

  .tia-text-distort-preset.tia-planned {
    opacity:0.62 !important;
    cursor:default !important;
    border-style:dashed !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.014)) !important;
  }
  .tia-text-distort-preset.tia-planned:hover {
    transform:none !important;
    border-color:rgba(255,255,255,0.16) !important;
    box-shadow:none !important;
  }
  .tia-text-distort-preset.tia-planned .tia-text-distort-preset-icon {
    color:rgba(231,224,238,0.72) !important;
    background:rgba(0,0,0,0.12) !important;
  }
  .tia-text-distort-preset-status {
    position:absolute;
    top:6px;
    right:7px;
    padding:2px 5px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    color:rgba(231,224,238,0.72);
    background:rgba(0,0,0,0.24);
    font-size:7.5px;
    line-height:1;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .tia-text-distort-modal-note {
    padding:0 15px 14px !important;
    color:#9fa7b1 !important;
    font-size:10.5px !important;
  }
  .tia-text-distort-top-icon.active-icon .tia-button-visible-label,
  .tia-text-distort-top-icon:hover .tia-button-visible-label {
    color:var(--tia-tool-text-color, #c084fc) !important;
  }


  /* ================================================================
     TIA v0.5.92.32 REALTIME DISTORT SLIDER + WHEEL SECTION
     Keeps Distort Amount responsive while dragging and allows mouse-wheel
     value changes over the range or number box. No import/export changes.
     ================================================================ */
  .tia-text-distort-controls-row input[type="range"] {
    cursor:ew-resize;
  }
  .tia-text-distort-controls-row input[type="number"] {
    cursor:ns-resize;
  }



  /* ================================================================
     TIA v0.5.93.44 FLOATING COMMAND CENTER UI SECTION
     Moves the Command Center out of the right sidebar layout so Pages
     and Layers can use the full vertical right bar. The Command Center
     becomes a draggable floating panel. No import/export or distort changes.
     ================================================================ */
  #control-center-placeholder {
    position:fixed !important;
    top:164px;
    left:360px;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:304px !important;
    min-height:0 !important;
    max-height:calc(100vh - 182px) !important;
    margin:0 !important;
    z-index:1320 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 18px 44px rgba(0,0,0,0.38), 0 0 0 1px rgba(99,255,157,0.14) !important;
    backdrop-filter:blur(12px);
    display:block !important;
  }
  #control-center-placeholder.tia-floating-command-center-dragging {
    opacity:0.96;
    box-shadow:0 22px 54px rgba(0,0,0,0.48), 0 0 0 1px rgba(99,255,157,0.32), 0 0 22px rgba(99,255,157,0.12) !important;
  }
  .tia-floating-command-center-grip {
    height:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 9px;
    box-sizing:border-box;
    cursor:move;
    user-select:none;
    color:rgba(255,255,255,0.86);
    background:linear-gradient(180deg, rgba(99,255,157,0.16), rgba(0,0,0,0.14));
    border-bottom:1px solid rgba(255,255,255,0.10);
    font-size:10.5px;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .tia-floating-command-center-title { color:var(--tia-accent, #63ff9d); }
  .tia-floating-command-center-badge {
    font-size:9px;
    line-height:1;
    padding:4px 6px;
    border-radius:999px;
    color:rgba(255,255,255,0.76);
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.10);
  }
  .tia-floating-command-center-actions {
    display:flex;
    align-items:center;
    gap:6px;
  }
  .tia-floating-command-center-close {
    width:18px;
    height:18px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:7px;
    color:rgba(255,255,255,0.86);
    background:rgba(0,0,0,0.24);
    cursor:pointer;
    font-size:13px;
    font-weight:900;
    line-height:14px;
    padding:0;
  }
  .tia-floating-command-center-close:hover {
    color:#ffffff;
    border-color:rgba(255,255,255,0.28);
    background:rgba(255,255,255,0.10);
  }
  #control-center-placeholder.tia-floating-command-center-closed {
    display:none !important;
  }
  #control-center-placeholder .control-body {
    max-height:calc(100vh - 250px) !important;
    overflow:auto !important;
  }
  #rightBar {
    align-items:stretch !important;
  }
  #pages-layers-placeholder {
    flex:1 1 auto !important;
    height:100% !important;
    min-height:0 !important;
    margin-top:0 !important;
  }
  body.tia-right-panel-collapsed #control-center-placeholder.tia-floating-command-center {
    right:auto !important;
  }
  body:not(.tia-authenticated) #control-center-placeholder {
    visibility:hidden !important;
    pointer-events:none !important;
  }


  /* ================================================================
     TIA v0.5.93.45 FLOATING COMMAND CENTER VISIBILITY REPAIR SECTION
     Keeps the Command Center outside the right sidebar transform/collapse
     behavior so clicking inside it cannot make it disappear.
     No import/export or distort changes.
     ================================================================ */
  body.tia-authenticated #control-center-placeholder.tia-floating-command-center {
    visibility:visible !important;
    pointer-events:auto !important;
  }
  body.tia-right-panel-collapsed #control-center-placeholder.tia-floating-command-center {
    right:auto !important;
  }
  #rightBar > #control-center-placeholder.tia-floating-command-center {
    position:fixed !important;
  }


  /* ================================================================
     TIA v0.5.93.46 TRUE FLOAT COMMAND CENTER POSITION REPAIR SECTION
     Makes the Command Center use viewport left/top positioning instead of
     riding the ruler/right-panel seam. No import/export or distort changes.
     ================================================================ */
  body.tia-authenticated #control-center-placeholder.tia-floating-command-center {
    position:fixed !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 !important;
  }
  body.tia-right-panel-collapsed #control-center-placeholder.tia-floating-command-center,
  body:not(.tia-right-panel-collapsed) #control-center-placeholder.tia-floating-command-center {
    right:auto !important;
  }
  #control-center-placeholder.tia-floating-command-center .tia-floating-command-center-grip {
    cursor:grab;
  }
  #control-center-placeholder.tia-floating-command-center-dragging .tia-floating-command-center-grip {
    cursor:grabbing;
  }



  /* ================================================================
     TIA v0.5.93.48 PAGES / LAYERS THUMBNAIL + ICON POLISH SECTION
     Makes page tiles easier to read: larger thumbnail left, page name/actions
     stacked on the right, and hidden layers use an eye with red slash.
     UI-only. No import/export or distort changes.
     ================================================================ */
  #pages-layers-placeholder .page-row {
    display:block !important;
    min-height:82px !important;
    padding:7px !important;
    cursor:grab;
  }
  #pages-layers-placeholder .page-main-layout {
    display:grid !important;
    grid-template-columns:76px minmax(0, 1fr) !important;
    align-items:center !important;
    gap:9px !important;
    width:100% !important;
    min-width:0 !important;
  }
  #pages-layers-placeholder .page-thumbnail-wrap.page-thumbnail-large {
    width:76px !important;
    min-width:76px !important;
    height:54px !important;
    border-radius:10px !important;
    border-color:rgba(255,255,255,0.16) !important;
    box-shadow:0 5px 14px rgba(0,0,0,0.22) inset, 0 3px 10px rgba(0,0,0,0.15) !important;
  }
  #pages-layers-placeholder .page-row.active .page-thumbnail-wrap.page-thumbnail-large {
    border-color:rgba(99,255,157,0.88) !important;
    box-shadow:0 0 0 1px rgba(99,255,157,0.22), 0 5px 14px rgba(0,0,0,0.22) inset !important;
  }
  #pages-layers-placeholder .page-info-stack {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:6px !important;
    min-width:0 !important;
  }
  #pages-layers-placeholder .page-row-name {
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    padding-left:0 !important;
  }
  #pages-layers-placeholder .page-title-text {
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    font-size:13px !important;
    line-height:1.2 !important;
    padding:2px 4px !important;
  }
  #pages-layers-placeholder .page-row-actions {
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    min-width:0 !important;
  }
  #pages-layers-placeholder .page-layer-count {
    margin-left:0 !important;
    flex:0 0 auto !important;
    min-width:24px !important;
    height:18px !important;
    font-size:9px !important;
  }

  /* +4px page/layer icon polish */
  #pages-layers-placeholder .page-action-button,
  #pages-layers-placeholder .page-toggle,
  #pages-layers-placeholder .page-drag-handle {
    width:24px !important;
    min-width:24px !important;
    height:24px !important;
    min-height:24px !important;
    flex:0 0 24px !important;
    font-size:12px !important;
    border-radius:7px !important;
  }
  #pages-layers-placeholder .layer-state-button,
  #pages-layers-placeholder .layer-order-button,
  #pages-layers-placeholder .layer-rename-button {
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    flex:0 0 28px !important;
    font-size:12px !important;
    border-radius:8px !important;
  }
  #pages-layers-placeholder .layer-icon {
    width:24px !important;
    min-width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
    font-size:12px !important;
    border-radius:7px !important;
  }
  #pages-layers-placeholder .layer-row-tools {
    gap:5px !important;
  }

  /* Hidden layer eye with red slash instead of X */
  #pages-layers-placeholder .layer-visible-button {
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  #pages-layers-placeholder .tia-layer-eye-icon {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    line-height:1;
    font-size:13px;
  }
  #pages-layers-placeholder .tia-layer-eye-hidden .tia-layer-eye-shape {
    opacity:.62;
    filter:grayscale(1);
  }
  #pages-layers-placeholder .tia-layer-eye-slash {
    position:absolute;
    width:22px;
    height:2px;
    border-radius:999px;
    background:#ff3f3f;
    transform:rotate(-38deg);
    box-shadow:0 0 0 1px rgba(0,0,0,0.34);
  }
  #pages-layers-placeholder .layer-visible-button.is-hidden {
    color:rgba(255,255,255,0.62) !important;
    border-color:rgba(255,80,80,0.35) !important;
    background:rgba(255,80,80,0.07) !important;
  }
  #pages-layers-placeholder .layer-visible-button.is-hidden:hover {
    border-color:rgba(255,80,80,0.70) !important;
    background:rgba(255,80,80,0.12) !important;
  }



  /* ================================================================
     TIA v0.5.93.49 LAYERS ROW CLEANUP POLISH SECTION
     Cleans up layer rows after the larger Pages layout: icon/name on the
     left, badges beside the name, and actions grouped on the right.
     UI-only. No import/export or distort changes.
     ================================================================ */
  #pages-layers-placeholder .layer-row {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    min-height:38px !important;
    padding:6px 7px !important;
  }
  #pages-layers-placeholder .layer-row-main {
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
  }
  #pages-layers-placeholder .layer-row-name {
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  #pages-layers-placeholder .layer-name {
    flex:1 1 auto !important;
    min-width:0 !important;
    font-size:12px !important;
    line-height:1.2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #pages-layers-placeholder .layer-badge-wrap {
    display:inline-flex !important;
    align-items:center !important;
    gap:4px !important;
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  #pages-layers-placeholder .layer-group-badge {
    margin-left:0 !important;
    max-width:58px !important;
  }
  #pages-layers-placeholder .layer-row-tools {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    width:auto !important;
    flex:0 0 auto !important;
  }
  #pages-layers-placeholder .layer-row.active {
    box-shadow:3px 0 0 var(--tia-accent, #63ff9d) inset, 0 5px 14px rgba(0,0,0,0.12) !important;
  }
  #pages-layers-placeholder .layer-row.hidden-layer .layer-row-main {
    opacity:.56 !important;
  }
  #pages-layers-placeholder .layer-row.locked-layer .layer-name::after {
    content:' locked';
    opacity:.55;
    font-size:10px;
    font-weight:normal;
  }



  /* ================================================================
     TIA v0.5.93.50 PAGES / LAYERS COMPACT + READABILITY POLISH
     Tightens page tile height and reduces heavy green styling so names and
     icons are easier to read. UI-only. No import/export or distort changes.
     ================================================================ */
  #pages-layers-placeholder .page-row {
    min-height:68px !important;
    padding:6px !important;
    gap:0 !important;
  }
  #pages-layers-placeholder .page-main-layout {
    grid-template-columns:68px minmax(0, 1fr) !important;
    gap:8px !important;
  }
  #pages-layers-placeholder .page-thumbnail-wrap.page-thumbnail-large {
    width:68px !important;
    min-width:68px !important;
    height:46px !important;
    border-radius:9px !important;
  }
  #pages-layers-placeholder .page-info-stack {
    gap:4px !important;
  }
  #pages-layers-placeholder .page-row-name {
    min-height:18px !important;
  }
  #pages-layers-placeholder .page-title-text {
    font-size:12.5px !important;
    color:rgba(255,255,255,0.92) !important;
    padding:1px 3px !important;
  }
  #pages-layers-placeholder .page-row-actions {
    gap:4px !important;
  }

  /* Cleaner selected state: dark row + subtle green accent, not green text */
  #pages-layers-placeholder .page-row.active,
  #pages-layers-placeholder .layer-row.active {
    color:rgba(255,255,255,0.94) !important;
    background:linear-gradient(90deg, rgba(99,255,157,0.10), rgba(255,255,255,0.035)) !important;
    border-color:rgba(99,255,157,0.38) !important;
    box-shadow:3px 0 0 rgba(99,255,157,0.78) inset, 0 4px 12px rgba(0,0,0,0.14) !important;
  }
  #pages-layers-placeholder .page-row.active .page-title-text,
  #pages-layers-placeholder .layer-row.active .layer-name {
    color:rgba(255,255,255,0.96) !important;
  }
  #pages-layers-placeholder .page-row.active .page-thumbnail-wrap.page-thumbnail-large {
    border-color:rgba(99,255,157,0.52) !important;
    box-shadow:0 0 0 1px rgba(99,255,157,0.12), 0 4px 10px rgba(0,0,0,0.22) inset !important;
  }

  /* Neutral buttons: readable first, green only on hover */
  #pages-layers-placeholder .page-action-button,
  #pages-layers-placeholder .page-toggle,
  #pages-layers-placeholder .page-drag-handle,
  #pages-layers-placeholder .layer-state-button,
  #pages-layers-placeholder .layer-order-button,
  #pages-layers-placeholder .layer-rename-button,
  #pages-layers-placeholder .layer-icon {
    color:rgba(255,255,255,0.82) !important;
    background:rgba(255,255,255,0.055) !important;
    border-color:rgba(255,255,255,0.12) !important;
  }
  #pages-layers-placeholder .page-action-button:hover,
  #pages-layers-placeholder .page-toggle:hover,
  #pages-layers-placeholder .page-drag-handle:hover,
  #pages-layers-placeholder .layer-state-button:hover,
  #pages-layers-placeholder .layer-order-button:hover,
  #pages-layers-placeholder .layer-rename-button:hover {
    color:rgba(255,255,255,0.96) !important;
    background:rgba(99,255,157,0.09) !important;
    border-color:rgba(99,255,157,0.42) !important;
  }
  #pages-layers-placeholder .layer-row.active .layer-icon {
    color:rgba(255,255,255,0.92) !important;
    background:rgba(255,255,255,0.07) !important;
  }



  /* ================================================================
     TIA v0.5.93.51 PAGES / LAYERS PREMIUM DARK READABILITY POLISH
     Replaces loud green selected styling with splash-screen-inspired dark
     gradients, steel borders, neutral icons, and a tiny accent line only.
     Also reduces page tile height by 2px. UI-only. No import/export or
     distort changes.
     ================================================================ */
  #pages-layers-placeholder {
    --tia-pages-premium-bg:#151819;
    --tia-pages-premium-card:#1d2324;
    --tia-pages-premium-card-2:#252b2c;
    --tia-pages-premium-border:#566369;
    --tia-pages-premium-border-soft:rgba(126,142,148,0.28);
    --tia-pages-premium-text:#f1f3f2;
    --tia-pages-premium-muted:#a5adaa;
    --tia-pages-premium-icon:#c9d0cd;
    --tia-pages-premium-accent:#63ff9d;
  }
  #pages-layers-placeholder .page-row {
    min-height:66px !important;
    padding:5px 6px !important;
    background:linear-gradient(180deg, #202627, #171b1c) !important;
    border-color:rgba(126,142,148,0.18) !important;
  }
  #pages-layers-placeholder .page-main-layout {
    grid-template-columns:68px minmax(0, 1fr) !important;
    gap:8px !important;
  }
  #pages-layers-placeholder .page-thumbnail-wrap.page-thumbnail-large {
    height:44px !important;
    border-color:rgba(126,142,148,0.24) !important;
    background:#101314 !important;
  }
  #pages-layers-placeholder .page-info-stack {
    gap:3px !important;
  }
  #pages-layers-placeholder .page-title-text,
  #pages-layers-placeholder .layer-name {
    color:var(--tia-pages-premium-text) !important;
  }
  #pages-layers-placeholder .pages-layers-subtitle,
  #pages-layers-placeholder .page-layer-count {
    color:var(--tia-pages-premium-muted) !important;
  }

  /* Premium selected state: dark gradient + steel border + small accent line */
  #pages-layers-placeholder .page-row.active,
  #pages-layers-placeholder .layer-row.active {
    color:var(--tia-pages-premium-text) !important;
    background:linear-gradient(135deg, #151819 0%, #202728 54%, #2a3031 100%) !important;
    border-color:var(--tia-pages-premium-border) !important;
    box-shadow:3px 0 0 rgba(99,255,157,0.42) inset, 0 8px 18px rgba(0,0,0,0.18) !important;
  }
  #pages-layers-placeholder .page-row.active .page-thumbnail-wrap.page-thumbnail-large {
    border-color:rgba(126,142,148,0.62) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 5px 12px rgba(0,0,0,0.25) inset !important;
  }
  #pages-layers-placeholder .layer-row.active .layer-icon {
    color:var(--tia-pages-premium-icon) !important;
    background:rgba(255,255,255,0.06) !important;
  }

  /* Buttons/icons: neutral premium gray, not green-heavy */
  #pages-layers-placeholder .page-action-button,
  #pages-layers-placeholder .page-toggle,
  #pages-layers-placeholder .page-drag-handle,
  #pages-layers-placeholder .layer-state-button,
  #pages-layers-placeholder .layer-order-button,
  #pages-layers-placeholder .layer-rename-button,
  #pages-layers-placeholder .layer-icon {
    color:var(--tia-pages-premium-icon) !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.14)) !important;
    border-color:rgba(126,142,148,0.22) !important;
  }
  #pages-layers-placeholder .page-action-button:hover,
  #pages-layers-placeholder .page-toggle:hover,
  #pages-layers-placeholder .page-drag-handle:hover,
  #pages-layers-placeholder .layer-state-button:hover,
  #pages-layers-placeholder .layer-order-button:hover,
  #pages-layers-placeholder .layer-rename-button:hover {
    color:#ffffff !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(126,142,148,0.10)) !important;
    border-color:rgba(150,165,170,0.45) !important;
  }

  /* Add Page: premium steel button instead of green-heavy button */
  #pages-layers-placeholder .add-page-button {
    color:#f1f3f2 !important;
    background:linear-gradient(180deg, #2a3031, #181d1e) !important;
    border-color:rgba(126,142,148,0.55) !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.18) !important;
  }
  #pages-layers-placeholder .add-page-button:hover {
    background:linear-gradient(180deg, #32393a, #1d2324) !important;
    border-color:rgba(160,174,178,0.68) !important;
  }

  /* Keep hidden eye readable with red slash */
  #pages-layers-placeholder .layer-visible-button.is-hidden {
    color:rgba(230,235,232,0.72) !important;
    border-color:rgba(170,82,82,0.40) !important;
    background:rgba(170,82,82,0.08) !important;
  }
  #pages-layers-placeholder .tia-layer-eye-slash {
    background:#d74747 !important;
  }



  /* ================================================================
     TIA v0.5.93.52 PAGES / LAYERS ICON SIZE + TOOLTIP POLISH
     Keeps page name above actions, enlarges page/layer icons, and makes the
     expand arrow easier to see. UI-only. No import/export or distort changes.
     ================================================================ */
  #pages-layers-placeholder .page-info-stack {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:4px !important;
  }
  #pages-layers-placeholder .page-row-name {
    order:1 !important;
  }
  #pages-layers-placeholder .page-row-actions {
    order:2 !important;
    gap:5px !important;
  }

  /* Larger, clearer page buttons */
  #pages-layers-placeholder .page-action-button,
  #pages-layers-placeholder .page-drag-handle {
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    flex:0 0 28px !important;
    font-size:14px !important;
    border-radius:8px !important;
  }
  #pages-layers-placeholder .page-toggle {
    width:32px !important;
    min-width:32px !important;
    height:28px !important;
    min-height:28px !important;
    flex:0 0 32px !important;
    font-size:17px !important;
    font-weight:800 !important;
    border-radius:8px !important;
    line-height:1 !important;
  }

  /* Larger, clearer layer buttons */
  #pages-layers-placeholder .layer-state-button,
  #pages-layers-placeholder .layer-order-button,
  #pages-layers-placeholder .layer-rename-button {
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    flex:0 0 30px !important;
    font-size:14px !important;
    border-radius:8px !important;
  }
  #pages-layers-placeholder .layer-icon {
    width:26px !important;
    min-width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
    font-size:13px !important;
    border-radius:8px !important;
  }
  #pages-layers-placeholder .tia-layer-eye-icon {
    width:20px !important;
    height:20px !important;
    font-size:15px !important;
  }
  #pages-layers-placeholder .tia-layer-eye-slash {
    width:24px !important;
    height:2.5px !important;
  }

  /* Keep icons readable: soft gray by default, gentle steel hover */
  #pages-layers-placeholder .page-action-button,
  #pages-layers-placeholder .page-toggle,
  #pages-layers-placeholder .page-drag-handle,
  #pages-layers-placeholder .layer-state-button,
  #pages-layers-placeholder .layer-order-button,
  #pages-layers-placeholder .layer-rename-button {
    color:rgba(242,245,244,0.88) !important;
  }
  #pages-layers-placeholder .page-action-button:hover,
  #pages-layers-placeholder .page-toggle:hover,
  #pages-layers-placeholder .page-drag-handle:hover,
  #pages-layers-placeholder .layer-state-button:hover,
  #pages-layers-placeholder .layer-order-button:hover,
  #pages-layers-placeholder .layer-rename-button:hover {
    color:#ffffff !important;
    border-color:rgba(165,178,182,0.62) !important;
    background:linear-gradient(180deg, rgba(255,255,255,0.13), rgba(126,142,148,0.12)) !important;
  }



  /* ================================================================
     TIA v0.5.93.53 PAGES / LAYERS ACTIVE + HOVER PREMIUM POLISH
     Refines selected and hover states with a premium dark gradient, softer
     accent line, and clearer readable text/icons. UI-only. No import/export
     or distort changes.
     ================================================================ */
  #pages-layers-placeholder .page-row,
  #pages-layers-placeholder .layer-row {
    transition:background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
  }
  #pages-layers-placeholder .page-row:hover,
  #pages-layers-placeholder .layer-row:hover {
    background:linear-gradient(90deg, rgba(255,255,255,0.060), rgba(255,255,255,0.032)) !important;
    border-color:rgba(145,158,164,0.38) !important;
    box-shadow:0 5px 14px rgba(0,0,0,0.16) !important;
  }
  #pages-layers-placeholder .page-row.active,
  #pages-layers-placeholder .layer-row.active {
    background:linear-gradient(90deg, rgba(39,47,49,0.98), rgba(23,27,28,0.98)) !important;
    border-color:rgba(130,145,152,0.46) !important;
    box-shadow:2px 0 0 rgba(99,255,157,0.50) inset, 0 6px 16px rgba(0,0,0,0.18) !important;
  }
  #pages-layers-placeholder .page-row.active:hover,
  #pages-layers-placeholder .layer-row.active:hover {
    border-color:rgba(162,176,183,0.55) !important;
    box-shadow:2px 0 0 rgba(99,255,157,0.62) inset, 0 7px 18px rgba(0,0,0,0.20) !important;
  }
  #pages-layers-placeholder .page-row.active .page-title-text,
  #pages-layers-placeholder .layer-row.active .layer-name {
    color:rgba(246,248,247,0.98) !important;
    text-shadow:0 1px 0 rgba(0,0,0,0.20);
  }
  #pages-layers-placeholder .page-row:not(.active) .page-title-text,
  #pages-layers-placeholder .layer-row:not(.active) .layer-name {
    color:rgba(222,228,226,0.88) !important;
  }
  #pages-layers-placeholder .page-row.active .page-action-button,
  #pages-layers-placeholder .page-row.active .page-toggle,
  #pages-layers-placeholder .page-row.active .page-drag-handle,
  #pages-layers-placeholder .layer-row.active .layer-state-button,
  #pages-layers-placeholder .layer-row.active .layer-order-button,
  #pages-layers-placeholder .layer-row.active .layer-icon {
    color:rgba(246,248,247,0.92) !important;
    background:rgba(255,255,255,0.070) !important;
    border-color:rgba(255,255,255,0.145) !important;
  }
  #pages-layers-placeholder .page-thumbnail-wrap.page-thumbnail-large,
  #pages-layers-placeholder .layer-icon {
    box-shadow:0 3px 10px rgba(0,0,0,0.16) inset !important;
  }



  /* ================================================================
     TIA v0.5.93.56 LIGHT MODE MEDIUM GREY + UNDO ICON POLISH SECTION
     Light mode now uses medium grey bars/workspace and icon grey matched
     to the light-mode TIA logo text. UI-only except the new arrange undo icon.
     ================================================================ */
  body.tia-appearance-light {
    --tia-logo-text-live:#626b76;
    --tia-light-logo-grey:#626b76;
    --tia-light-medium-bar:#a5aaae;
    --tia-light-medium-bar-deep:#8e9499;
    --tia-light-workspace-grey:#969b9f;
    --tia-top-toolbar:#a5aaae;
    --tia-menu-toolbar:#9fa5aa;
    --tia-tabs-bar:#969ca1;
    --tia-side-toolbar:#9ca2a7;
    --tia-right-panel:#9ca2a7;
    --tia-bottom-bar:#969ca1;
    --tia-canvas-bg:#969b9f;
    --tia-button-bg:#b7bcc0;
    --tia-text-color:#333940;
  }
  body.tia-appearance-light,
  body.tia-appearance-light #canvas {
    background:#969b9f !important;
  }
  body.tia-appearance-light #top1,
  body.tia-appearance-light #top2,
  body.tia-appearance-light #top3,
  body.tia-appearance-light #leftBar,
  body.tia-appearance-light #rightBar,
  body.tia-appearance-light #bottomBar,
  body.tia-appearance-light #tia-user-session-bar,
  body.tia-appearance-light .tia-canvas-ruler,
  body.tia-appearance-light .tia-canvas-ruler-corner {
    background:linear-gradient(180deg, #aeb3b7, #8f959a) !important;
    color:#626b76 !important;
    border-color:rgba(98,107,118,0.28) !important;
  }
  body.tia-appearance-light #control-center-placeholder,
  body.tia-appearance-light #pages-layers-placeholder,
  body.tia-appearance-light .page-row,
  body.tia-appearance-light .layer-row {
    background:linear-gradient(180deg, rgba(176,181,185,0.94), rgba(146,152,157,0.94)) !important;
    color:#333940 !important;
    border-color:rgba(98,107,118,0.25) !important;
  }
  body.tia-appearance-light .tool-button,
  body.tia-appearance-light .top-icon,
  body.tia-appearance-light .control-icon-button,
  body.tia-appearance-light .page-action-button,
  body.tia-appearance-light .layer-state-button,
  body.tia-appearance-light .layer-order-button,
  body.tia-appearance-light .layer-rename-button,
  body.tia-appearance-light .tia-theme-toggle-button,
  body.tia-appearance-light .tia-logout-button,
  body.tia-appearance-light .project-tab,
  body.tia-appearance-light .dropdown-text,
  body.tia-appearance-light .menu-item {
    color:#626b76 !important;
    background:linear-gradient(180deg, rgba(218,221,224,0.92), rgba(178,184,189,0.92)) !important;
    border-color:rgba(98,107,118,0.28) !important;
    text-shadow:none !important;
  }
  body.tia-appearance-light .tia-button-svg-holder.tia-button-icon-mask,
  body.tia-appearance-light .tia-builtin-button-svg-holder.tia-button-icon-mask,
  body.tia-appearance-light #interactive-icons .top-icon .tia-button-svg-holder.tia-button-icon-mask,
  body.tia-appearance-light #leftBar .tool-button .tia-button-svg-holder.tia-button-icon-mask {
    background:#626b76 !important;
    filter:none !important;
  }
  body.tia-appearance-light .tool-button:hover,
  body.tia-appearance-light .top-icon:hover,
  body.tia-appearance-light .control-icon-button:hover,
  body.tia-appearance-light .page-action-button:hover,
  body.tia-appearance-light .layer-state-button:hover,
  body.tia-appearance-light .layer-order-button:hover,
  body.tia-appearance-light .layer-rename-button:hover {
    color:#4d5660 !important;
    background:linear-gradient(180deg, rgba(232,234,236,0.96), rgba(190,196,201,0.96)) !important;
    border-color:rgba(98,107,118,0.46) !important;
  }
  body.tia-appearance-light .tool-button.active-tool,
  body.tia-appearance-light .top-icon.active-icon {
    color:#4b535c !important;
    background:linear-gradient(180deg, rgba(238,240,242,0.98), rgba(184,190,195,0.98)) !important;
    border-color:rgba(98,107,118,0.56) !important;
    box-shadow:0 0 0 2px rgba(98,107,118,0.12) inset !important;
  }
  .top-icon.tia-quick-action-icon[data-quick-action="undo-arrange"] {
    font-size:18px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
  }
  .top-icon.tia-quick-action-icon[data-quick-action="undo-arrange"].tia-quick-action-disabled {
    opacity:0.34 !important;
  }


  /* ================================================================
     TIA v0.5.93.72 REDO ICON SIZE MATCH REPAIR
     Keeps the top-bar Redo glyph visually matched to the Undo glyph.
     UI-only polish. No import/export or distort behavior was changed.
     ================================================================ */
  .top-icon.tia-quick-action-icon[data-quick-action="redo-arrange"] {
    font-size:18px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
  }
  .top-icon.tia-quick-action-icon[data-quick-action="redo-arrange"].tia-quick-action-disabled {
    opacity:0.34 !important;
  }



  /* ================================================================
     TIA v0.5.93.61 LIGHT MODE PREMIUM WORKSPACE GRADIENT
     Gives light mode a more premium medium-to-dark workspace gradient.
     UI-only. No import/export or distort changes.
     ================================================================ */
  body.tia-appearance-light {
    --tia-light-workspace-grey:#7c8389;
    --tia-canvas-bg:#7c8389;
  }
  body.tia-appearance-light,
  body.tia-appearance-light #canvas {
    background:linear-gradient(180deg, #9aa0a5 0%, #7f868c 44%, #686f76 100%) !important;
  }
  body.tia-appearance-light #canvas {
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -18px 28px rgba(0,0,0,0.10) !important;
  }



/* ================================================================
   TIA v0.5.94.28 OUTLINE COLOR BOX WIDTH + SWATCH REPAIR
   Keeps Command Center outline color squares 3px wider and easier to click.
   ================================================================ */
.control-outline-row input[data-outline-color]{
  width:17px !important;
  min-width:17px !important;
  max-width:17px !important;
  flex:0 0 17px !important;
  height:20px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
}
.control-outline-row input[data-outline-color]::-webkit-color-swatch-wrapper{
  padding:0 !important;
}
.control-outline-row input[data-outline-color]::-webkit-color-swatch{
  border:0 !important;
  border-radius:3px !important;
}
.control-outline-row input[data-outline-color]::-moz-color-swatch{
  border:0 !important;
  border-radius:3px !important;
}


/* ================================================================
   TIA v0.5.94.29 OUTLINE CONTROL POLISH
   Keeps the Command Center outline color square at the requested wider
   size while outline defaults/handle visuals are tuned in JS modules.
   ================================================================ */
.control-outline-row input[data-outline-color]{
  width:17px !important;
  min-width:17px !important;
  max-width:17px !important;
  flex-basis:17px !important;
}