:root{
  --hat131-bg:#eef3f8;
  --hat131-surface:#0f2436;
  --hat131-surface-2:#183248;
  --hat131-surface-3:#203c55;
  --hat131-panel:#13283b;
  --hat131-panel-soft:#19344b;
  --hat131-panel-raised:#24455f;
  --hat131-border:rgba(255,255,255,.10);
  --hat131-border-strong:rgba(255,255,255,.16);
  --hat131-text:#ecf5ff;
  --hat131-text-soft:#c5d6e7;
  --hat131-text-dim:#96aec2;
  --hat131-accent:#27c08b;
  --hat131-accent-2:#52d1a5;
  --hat131-warm:#f3c86a;
  --hat131-danger:#e35b67;
  --hat131-shadow:0 18px 42px rgba(7,17,28,.18);
  --hat131-shadow-soft:0 8px 24px rgba(7,17,28,.14);
  --hat131-radius:18px;
  --hat131-radius-sm:12px;
}
html,body{background:var(--hat131-bg);}
body{color:#1d3245;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body > header,
#hat061HeaderBar,
#hat113QuickBar,
body > footer.status,
footer.status,
.header,
header.header{
  background:linear-gradient(180deg,#112a3e 0%,#0d2233 100%) !important;
  color:var(--hat131-text) !important;
  border-color:var(--hat131-border) !important;
  box-shadow:var(--hat131-shadow-soft);
}
body > header,
.header{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
header .brand strong,
.header .brand b,
.header .brand strong{color:#ffffff !important;letter-spacing:.01em;}
header .brand small,
.header .brand span{color:var(--hat131-text-soft) !important;opacity:.96;}
button,input,select,textarea{font:inherit;}
body > header button,
body > header .hat42-about,
#hat061HeaderBar button,
#hat113QuickBar button,
footer.status button,
.status button,
.header nav button,
.header nav a,
.canvas-head .toolbar button,
.canvas-head .hat33-panel-tools button,
.hat33-quick-tools button,
.export-row button,
#hat130Toggle,
#hat121Teaching,
#hat122ScratchToggle,
#hat09Shortcut,
#hat116PropsHandle,
#hat121Menu button,
#hat122Scratch button,
#hat130Pane button,
#hat063Context button,
#hat069Gallery button,
#hat33Workspace button,
#hat33Workspace a,
#hat33Workspace .inline-check,
#hat33Workspace .review,
#hat33Workspace .note,
#hat33Workspace .hat42-about{
  border-radius:12px !important;
}
body > header button,
body > header .hat42-about,
#hat061HeaderBar button,
#hat113QuickBar button,
footer.status button,
.status button,
.header nav button,
.header nav a,
.canvas-head .toolbar button,
.canvas-head .hat33-panel-tools button,
.hat33-quick-tools button,
.export-row button,
#hat130Toggle,
#hat121Teaching,
#hat122ScratchToggle,
#hat09Shortcut,
#hat116PropsHandle,
#hat121Menu button,
#hat122Scratch button,
#hat130Pane button,
#hat063Context button,
#hat069Gallery button,
#hat33Workspace button,
#hat33Workspace .hat42-about{
  background:rgba(255,255,255,.05) !important;
  color:var(--hat131-text) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
body > header button:hover,
body > header .hat42-about:hover,
#hat061HeaderBar button:hover,
#hat113QuickBar button:hover,
footer.status button:hover,
.status button:hover,
.header nav button:hover,
.header nav a:hover,
.canvas-head .toolbar button:hover,
.canvas-head .hat33-panel-tools button:hover,
.hat33-quick-tools button:hover,
.export-row button:hover,
#hat130Toggle:hover,
#hat121Teaching:hover,
#hat122ScratchToggle:hover,
#hat09Shortcut:hover,
#hat116PropsHandle:hover,
#hat121Menu button:hover,
#hat122Scratch button:hover,
#hat130Pane button:hover,
#hat063Context button:hover,
#hat069Gallery button:hover,
#hat33Workspace button:hover,
#hat33Workspace .hat42-about:hover{
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.20) !important;
  transform:translateY(-1px);
}
body > header button.active,
body > header button.primary,
#hat061HeaderBar button.active,
#hat113QuickBar button.active,
#hat121Teaching.active,
#hat130Toggle.active,
#hat122ScratchToggle.active,
.header nav .primary,
.canvas-head .toolbar button.primary,
#hat33Workspace button.primary,
#hat069Gallery .primary,
#hat121Menu .primary,
#hat122Scratch .primary,
#hat130Pane .primary{
  background:linear-gradient(180deg,var(--hat131-accent) 0%,#14986d 100%) !important;
  border-color:rgba(82,209,165,.45) !important;
  color:#f7fffb !important;
  font-weight:700;
}
body > header button[aria-pressed="true"],
#hat061HeaderBar button[aria-pressed="true"],
#hat113QuickBar button[aria-pressed="true"],
#hat121Menu button[aria-pressed="true"],
#hat122Scratch button[aria-pressed="true"],
#hat130Pane button[aria-pressed="true"],
#hat33Workspace button[aria-pressed="true"]{
  background:rgba(39,192,139,.18) !important;
  border-color:rgba(82,209,165,.30) !important;
  color:#f6fffb !important;
}
.status,#hat061FooterBar,footer,.hat33-quick-tools,.canvas-head,
#hat130Pane .hat130-head,
#hat121Menu .hat121-title,
#hat122Scratch .hat122-header,
#hat069Gallery .hat069-head{
  color:var(--hat131-text) !important;
}
#hatDock,
#hat063Context,
#hat121Menu,
#hat122Scratch,
#hat130Pane,
#hat069Gallery .hat069-window,
.hat-import-card,
#hat33Library,
#hat33Inspector,
.canvas-panel,
.hat062-popover,
.hat081-tools,
.hat081-tikz,
#panel{
  background:linear-gradient(180deg,var(--hat131-panel) 0%,#122738 100%) !important;
  color:var(--hat131-text) !important;
  border:1px solid var(--hat131-border) !important;
  box-shadow:var(--hat131-shadow) !important;
}
#hatDock,
#hat063Context,
#hat121Menu,
#hat122Scratch,
#hat130Pane,
#hat069Gallery .hat069-window,
.hat-import-card,
#hat33Library,
#hat33Inspector,
.canvas-panel,
.hat062-popover,
.hat081-tools,
.hat081-tikz,
#panel,
#hat122Scratch .hat122-surface,
#hat130Pane .hat130-stage,
#hat069Gallery .hat069-item,
#hat33Workspace details,
#hat33Workspace .force-new,
#hat33Workspace .saved-list,
#hat33Workspace .tools,
#hat33Workspace .force-presets,
#hat33Workspace .hat081-grid,
#hat33Workspace .hat081-tikz-preview,
#hat069Gallery .hat069-preview,
#hat063Context details,
#hat063Context .hat063-group,
#hat121Menu .hat121-block,
#hat130Pane .hat130-tab,
#hat130Pane .hat130-actions,
#hat130Pane .hat130-embed,
#hat121Menu .hat121-card,
#hat122Scratch .hat122-tools,
#hat122Scratch .hat122-bottom{
  border-radius:16px !important;
}
#hatDock,
#hat33Library,
#hat33Inspector,
#hat063Context,
#hat121Menu,
#hat122Scratch,
#hat130Pane{backdrop-filter:blur(10px);}
#hatDock .hat062-section,
#hat063Context h3,
#hat063Context summary,
#hat121Menu h3,
#hat122Scratch strong,
#hat130Pane strong,
#hat069Gallery strong,
#hat33Workspace h2,
#hat33Workspace h3,
#hat33Workspace summary,
#panel h3{
  color:#f8fbff !important;
}
#hatDock small,
#hatDock .hat062-glyph,
#hat063Context,
#hat063Context label,
#hat063Context .hint,
#hat121Menu,
#hat121Menu label,
#hat122Scratch,
#hat122Scratch label,
#hat130Pane,
#hat130Pane label,
#hat069Gallery,
#hat33Workspace,
#hat33Workspace label,
#panel,
#panel label{
  color:var(--hat131-text-soft) !important;
}
#hatDock .hat062-section,
#hat063Context .hint,
#hat121Menu .hint,
#hat122Scratch .hat122-help,
#hat130Pane .hat130-empty,
#hat069Gallery small,
#hat33Workspace .hint,
#hat33Workspace .note,
#panel .hint{
  color:var(--hat131-text-dim) !important;
}
#hatDock button,
#hat062ShapeMenu button,
#hat063Context button,
#hat121Menu button,
#hat122Scratch button,
#hat130Pane button,
#hat069Gallery button,
#hat33Workspace .tools button,
#hat33Workspace .force-presets button,
#hat33Workspace .hat33-quick-tools button,
#hat33Workspace .hat081-actions button,
#hat33Workspace .export-row button{
  background:rgba(255,255,255,.05) !important;
  color:var(--hat131-text) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
#hatDock .hat062-tool,
#hat062ShapeMenu button,
#hat33Workspace .tools button,
#hat33Workspace .force-presets button{
  min-height:48px;
}
#hatDock .hat062-tool.hat062-active,
#hat062ShapeMenu button:hover,
#hat33Workspace .tools button.active,
#hat33Workspace .tools button:hover,
#hat33Workspace .force-presets button:hover,
#hat069Gallery .hat069-item:hover,
#hat069Gallery .hat069-item:focus-within,
#hat069Gallery .hat069-categories button.active,
#hat063Context [data-hat063-insert]:hover,
#hat063Context [data-hat063-insert].active{
  background:rgba(39,192,139,.16) !important;
  border-color:rgba(82,209,165,.28) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
#hat069Gallery .hat069-item,
#hat069Gallery .hat069-preview,
#hat069Gallery .hat069-filter,
#hat069Gallery .hat069-categories,
#hat069Gallery .hat069-foot,
#hat130Pane .hat130-tab,
#hat130Pane .hat130-actions,
#hat130Pane .hat130-embed,
#hat122Scratch .hat122-tools,
#hat122Scratch .hat122-bottom,
#hat121Menu .hat121-block,
#hat33Workspace details,
#hat33Workspace .canvas-wrap,
#hat33Workspace .saved-list,
#hat33Workspace .tools,
#hat33Workspace .force-presets,
#hat33Workspace .force-new,
#hat33Workspace .hat081-grid,
#hat33Workspace .hat081-tikz-preview,
#hat063Context details,
#panel hr,
#hat121Menu hr,
#hat122Scratch hr,
#hat130Pane hr{
  background:rgba(255,255,255,.03) !important;
  border-color:rgba(255,255,255,.08) !important;
}
#hat069Gallery .hat069-preview,
#hat33Workspace .canvas-wrap,
#hat122Scratch .hat122-surface,
#hat130Pane .hat130-embed,
.hat081-tikz-preview{
  background:linear-gradient(180deg,#f7fafc 0%,#edf3f8 100%) !important;
}
#hat069Gallery .hat069-item-meta span,
#hat069Gallery .hat069-grade,
#hat33Workspace #saveMark,
#saveStatus,
#hat122Scratch .hat122-bottom button,
#hat130Pane .hat130-tab.active,
#hat121Menu .hat121-chip,
#hat063Context .hat063-badge,
#hat33Workspace .review,
#hat33Workspace .inline-check{
  background:rgba(255,255,255,.06) !important;
  color:var(--hat131-text-soft) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
#saveStatus{padding:.35rem .7rem;border-radius:999px;}
#hat069Gallery input,
#hat069Gallery select,
#hat063Context input,
#hat063Context select,
#hat063Context textarea,
#hat121Menu input,
#hat121Menu select,
#hat121Menu textarea,
#hat122Scratch input,
#hat122Scratch select,
#hat122Scratch textarea,
#hat130Pane input,
#hat130Pane select,
#hat130Pane textarea,
#hat33Workspace input,
#hat33Workspace select,
#hat33Workspace textarea,
#panel input,
#panel select,
#panel textarea{
  background:rgba(255,255,255,.96) !important;
  color:#17324a !important;
  border:1px solid #bfd0df !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 1px rgba(18,39,56,.04);
}
#hat069Gallery input::placeholder,
#hat121Menu input::placeholder,
#hat130Pane input::placeholder,
#hat33Workspace input::placeholder,
#panel input::placeholder,
#hat063Context input::placeholder{color:#6c8498 !important;}
#hat121Menu .hat121-title,
#hat122Scratch .hat122-header,
#hat130Pane .hat130-head,
#hat069Gallery .hat069-head,
.canvas-head,
.hat33-quick-tools{
  background:linear-gradient(180deg,#173146 0%,#12283a 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
#hat122Scratch .hat122-header,
#hat130Pane .hat130-head,
#hat121Menu .hat121-title,
#hat069Gallery .hat069-head{border-radius:16px 16px 0 0 !important;}
#hat130Pane .hat130-tabs{gap:8px;}
#hat130Pane .hat130-tab{min-height:38px;padding:.45rem .8rem;border-radius:12px !important;}
#hat130Pane .hat130-tab.active{background:rgba(39,192,139,.18) !important;color:#f7fffb !important;border-color:rgba(82,209,165,.30) !important;}
#hat069Gallery .hat069-item{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;background:linear-gradient(180deg,#143047 0%,#11283b 100%) !important;}
#hat069Gallery .hat069-item:hover{transform:translateY(-3px);}
#hat069Gallery .hat069-grade{color:#e7f8ff !important;}
#hat33Workspace .workspace,
#hat33Workspace .canvas-panel,
#hat33Workspace .sidebar{min-width:0;}
#hat33Workspace .sidebar,
#hat33Workspace .canvas-panel{border-radius:18px !important;overflow:hidden;}
#hat33Workspace .canvas-wrap{padding:18px;}
#designerBoard{background:#fffefb;border-radius:18px;box-shadow:0 10px 30px rgba(6,18,29,.12);}
#hat33Workspace footer,footer{color:var(--hat131-text-soft) !important;}
#hat33Workspace details[open],
#hat063Context details[open]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
#hat33Workspace details summary,
#hat063Context details summary{cursor:pointer;}
#hat33Workspace .template-list button,
#hat33Workspace .saved-list button,
#hat33Workspace .template-card,
#hat33Workspace .saved-item{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:var(--hat131-text) !important;
}
#hat33Workspace .template-list button:hover,
#hat33Workspace .saved-list button:hover{background:rgba(39,192,139,.14) !important;border-color:rgba(82,209,165,.28) !important;}
#hat061FooterBar,
footer.status,.status{border-top:1px solid rgba(255,255,255,.08) !important;}
#hat061FooterBar .group,
footer.status .group,.status .group{gap:8px;}
#hatDock,#hat063Context,#hat121Menu,#hat122Scratch,#hat130Pane,.hat-import-card,#hat33Library,#hat33Inspector{scrollbar-color:#58748c #11283a;}
#hat122Canvas{background:transparent;}
#hat122Scratch .hat122-surface{border:1px solid rgba(255,255,255,.08)!important;}
#hat121Menu [data-action="close"],
#hat122Scratch [data-action="close"],
#hat130Pane [data-act="close"]{min-width:40px;}
#hat33Workspace footer,
body > footer{background:transparent !important;box-shadow:none !important;border:none !important;color:#536c82 !important;}
#hat069Gallery .hat069-overlay{background:rgba(9,20,31,.62) !important;backdrop-filter:blur(4px);}
@media (max-width: 900px){
  #hat069Gallery .hat069-window,
  #hat130Pane,
  #hat121Menu,
  #hat122Scratch,
  #hat063Context{border-radius:14px !important;}
}