/* AIVELI Interface System · October 2026
   Additive styling. Never alter WebGL canvas size/coordinates, plan SVG geometry
   or scene controller hit-testing. Only appearance, focus, scrolling and layout. */
html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile,.aiveli-ui-route){
 --aui-ink:#29312f;
 --aui-muted:#68726e;
 --aui-line:#deded7;
 --aui-paper:#fbfaf7;
 --aui-panel:#f6f5f1;
 --aui-accent:#465b51;
 --aui-accent-soft:#edf2ed;
 --aui-ring:#547969;
 --aui-radius:12px;
 --aui-shadow:0 14px 38px rgba(32,41,36,.08);
 color-scheme:light;
}
html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) body{
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) :is(button,a,input,select,textarea,[role="button"]):focus-visible{
 outline:2px solid var(--aui-ring)!important;outline-offset:3px!important;
}
/* Preserve proper disabled semantics, and make button state obvious. */
html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) button:disabled{
 opacity:.46!important;cursor:not-allowed!important;
}
html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) :is(input,select,textarea){
 accent-color:var(--aui-accent);
 min-width:0;
}
html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) :is(button,a,input,select,textarea){
 -webkit-tap-highlight-color:transparent;
}
html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) :is(.library-scroll,.inspector-scroll,.aps-toolbar,.aps-ref-inspector,.acs-settings,.page,.dialog,.modal){
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#c6cac4 transparent;
}

/* Interior studio — quiet warm surfaces, consistent readable hierarchy. */
html.aiveli-ui-studio :is(.panel,.metric,.status-panel,.project-card,.editorial-card,.welcome-empty){
 border-radius:var(--aui-radius)!important;
}
html.aiveli-ui-studio :is(.panel,.metric,.status-panel,.project-card){
 border-color:var(--aui-line)!important;
}
html.aiveli-ui-studio .panel :is(h2,h3),html.aiveli-ui-studio .project-card :is(h2,h3){
 color:var(--aui-ink);letter-spacing:-.025em;line-height:1.3;
}
html.aiveli-ui-studio .page{min-width:0;padding-inline:clamp(13px,2.5vw,38px)}
html.aiveli-ui-studio .project-card{
 transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
html.aiveli-ui-studio .project-card:hover{border-color:#b5c0b8!important;box-shadow:var(--aui-shadow)!important}
html.aiveli-ui-studio :is(.topbar,.panel,.modal){font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
html.aiveli-ui-studio .modal{
 border-radius:14px!important;
 width:min(560px,calc(100vw - 28px))!important;
 max-height:calc(100dvh - 32px)!important;
 overflow-y:auto!important;
 padding:clamp(16px,2.3vw,27px)!important;
}
html.aiveli-ui-studio .overlay{align-items:flex-start!important;padding:clamp(12px,4vh,44px) 12px!important;overflow-y:auto!important}
html.aiveli-ui-studio :is(.modal input,.modal select,.modal textarea){
 max-width:100%;min-height:40px;border-radius:9px;
}

/* The 3D editor's in-scene bar is the SAME element in 2D, 3D and ISO.
   Don't create a second header or obstruct the scene. */
html.aiveli-ui-editor #viewport>.topbar{
 font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
 gap:clamp(4px,1vw,12px)!important;
 padding-inline:clamp(8px,1.4vw,20px)!important;
}
html.aiveli-ui-editor #viewport>.topbar .modes{
 border:1px solid rgba(255,255,255,.22)!important;
 border-radius:11px!important;
 padding:3px!important;
 max-width:100%;
}
html.aiveli-ui-editor #viewport>.topbar .modes button{
 border-radius:8px!important;
 min-height:36px;
 padding-inline:clamp(9px,1.4vw,16px)!important;
 font-weight:600!important;
 letter-spacing:.008em;
}
html.aiveli-ui-editor #viewport>.topbar :is(.round-btn,.history-btn,.light-btn-text,.reset-btn){
 min-width:35px;min-height:35px;border-radius:9px!important;
}
html.aiveli-ui-editor :is(.library,.inspector){
 background:rgba(250,249,246,.98)!important;
 border-color:var(--aui-line)!important;
}
html.aiveli-ui-editor :is(.library-scroll,.inspector-scroll){padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
html.aiveli-ui-editor :is(.library,.inspector) :is(button,input,select,textarea){font-family:Inter,system-ui,-apple-system,sans-serif}
html.aiveli-ui-editor :is(.cat-card,.model-card,.project-card,.finish-card,.exterior-asset-card){
 border-radius:11px!important;box-shadow:0 4px 13px rgba(28,39,34,.045)!important;
}
html.aiveli-ui-editor :is(.cat-card,.model-card,.project-card,.finish-card,.exterior-asset-card):hover{
 box-shadow:var(--aui-shadow)!important;
}
html.aiveli-ui-editor .cat-copy :is(b,strong){font-size:clamp(11px,1vw,13px)!important;line-height:1.4!important}
html.aiveli-ui-editor .rail-item{
 border-radius:10px!important;
}
html.aiveli-ui-editor :is(.inspector input,.inspector select,.library input,.library select){
 max-width:100%;
}
html.aiveli-ui-editor :is(.inspector .action,.library .action){
 min-height:40px;border-radius:9px!important;font-size:12px;
}

/* Two-dimensional planner — consistent typography and restrained material
   palette, preserving existing reference/workbench grid positions. */
html.aiveli-ui-editor #aiveli-plan-sheet{
 --aps-ink:var(--aui-ink);
 --aps-line:var(--aui-line);
 color:var(--aui-ink);
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-bottom,
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-inspector{
 background:rgba(251,250,247,.96)!important;
 border-color:var(--aui-line)!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-toolbar button{
 border-radius:9px!important;
 min-height:41px;
 font-size:12px!important;
 line-height:1.35!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-toolbar button.active,
html.aiveli-ui-editor #aiveli-plan-sheet .aps-tool-filters button.active,
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-command-set button.is-active{
 background:var(--aui-accent-soft)!important;color:#314d3f!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-command-set{
 border-color:var(--aui-line)!important;border-radius:9px!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-commands{
 background:#fbfaf7ee!important;border-color:var(--aui-line)!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-commands button{
 min-height:37px;min-width:35px;border-radius:7px!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet :is(.aps-ref-inspector-title strong,.aps-ref-room h3,.aps-ref-object h3){
 color:var(--aui-ink)!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-message{
 color:#55645c!important;line-height:1.5!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet :is(.aps-properties input,.aps-properties select,.aps-ref-inspector input,.aps-ref-inspector select){
 border-radius:9px!important;border-color:#d9ddd7!important;
 background:#fff!important;color:var(--aui-ink)!important;
 min-height:40px!important;max-width:100%;
 font-size:13px!important;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-inspector{
 min-width:0;min-height:0;overflow-y:auto;
}

/* Always available in narrow 2D mode. Legacy .aps-panel-toggle is hidden
   with the duplicate information header; this button controls the same tray. */
html.aiveli-ui-editor #aiveli-plan-sheet .aps-quick-tools{
 display:none;
 position:absolute;
 top:calc(58px + 9px);
 left:10px;
 z-index:65;
 border:1px solid #d6dcd5;
 background:rgba(255,255,253,.96);
 color:#30483a;
 box-shadow:var(--aui-shadow);
 border-radius:10px;
 min-height:43px;
 padding:0 13px;
 align-items:center;
 gap:8px;
 font:600 12px/1.3 Inter,system-ui,sans-serif;
 cursor:pointer;
 backdrop-filter:blur(14px);
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-quick-tools[aria-expanded="true"]{
 background:#314c40;color:#fff;border-color:#314c40;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-inspector .aps-ref-tabs{
 display:flex;flex-wrap:wrap;gap:5px;
}
html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-tabs button{
 min-height:37px;border-radius:8px!important;
}
/* Full-screen furniture constructor and modal controls. */
html.aiveli-ui-editor .aiveli-studio .acs-workbench .acs-settings{
 min-width:0;min-height:0;
}
html.aiveli-ui-editor .aiveli-studio .acs-settings :is(input,select,textarea){
 min-height:40px!important;
 font-size:13px!important;
 border-radius:8px!important;
}
html.aiveli-ui-editor .aiveli-studio .acs-settings .acs-section{
 border-radius:11px!important;
 background:#fffefa!important;
}
html.aiveli-ui-editor .aiveli-studio .acs-workbench .acs-head{
 padding-inline:clamp(10px,2vw,22px)!important;
}
html.aiveli-ui-editor .aiveli-studio button:focus-visible{
 outline:2px solid var(--aui-ring)!important;outline-offset:2px!important;
}

/* 3D textile catalog — the same type, controls and neutral surfaces. */
html.aiveli-ui-textile{
 --bg:#f6f5f1;--paper:#fffdfa;--ink:#29312f;--muted:#69736d;
 --line:#deded7;--accent:#364f43;--soft:#edf2ed;
}
html.aiveli-ui-textile :is(.top,.card,.side,.viewer,.dialog,.material-card){
 border-color:var(--aui-line);
}
html.aiveli-ui-textile :is(.card,.side,.dialog){border-radius:var(--aui-radius);overflow:hidden}
html.aiveli-ui-textile .card{box-shadow:0 9px 26px rgba(32,40,34,.05)}
html.aiveli-ui-textile .info{gap:clamp(14px,2vw,26px);padding:clamp(16px,2.8vw,36px)}
html.aiveli-ui-textile .detail-head h1,
html.aiveli-ui-textile .intro h1{line-height:1.09;overflow-wrap:anywhere}
html.aiveli-ui-textile .btn-dark{border-radius:9px!important;min-height:44px;font-weight:600}
html.aiveli-ui-textile :is(.material-search-tools input,.material-search-tools select){
 min-height:43px;border-radius:9px;color:var(--aui-ink);max-width:100%;
}
html.aiveli-ui-textile .swatch{border-radius:8px;padding:4px}
html.aiveli-ui-textile .swatch-name{line-height:1.45}
html.aiveli-ui-textile .dialog{
 width:min(1040px,100%);
 max-height:calc(100dvh - 28px)!important;
 overflow-y:auto;
 padding:clamp(14px,2.5vw,26px);
}
html.aiveli-ui-textile .overlay{
 padding:clamp(8px,3vh,24px);
 align-items:center;
}
html.aiveli-ui-textile .compare-bar{
 padding-bottom:env(safe-area-inset-bottom,0px);
}
html.aiveli-ui-textile .viewer-tools button{
 min-height:40px;padding-inline:12px;
}
html.aiveli-ui-textile .viewer-switches button{min-width:42px;min-height:42px}

/* The iframe wrappers retain original crawlable SEO descriptions when JS is
   disabled; the actual application continues to fill the screen above them. */
html.aiveli-ui-route .aiveli-route-info{max-width:690px;line-height:1.6;color:var(--aui-ink)}
html.aiveli-ui-route .aiveli-route-frame{background:#f5f4f1}

/* Tablet, phone, and short laptop screens. Preserve editor canvas visibility. */
@media(max-width:1180px){
 html.aiveli-ui-editor .cat-copy :is(b,strong){font-size:11px!important}
 html.aiveli-ui-studio .projects-grid{gap:clamp(10px,1.3vw,16px)}
}
@media(max-width:820px){
 html.aiveli-ui-studio .page{padding-inline:clamp(12px,3vw,22px)}
 html.aiveli-ui-editor .aiveli-studio .acs-workbench .acs-head{gap:8px}
 html.aiveli-ui-textile .detail-body{grid-template-columns:minmax(0,1fr)}
 html.aiveli-ui-textile .detail-body .side{padding:clamp(14px,3vw,25px)}
 html.aiveli-ui-textile .material-search-tools{flex-wrap:wrap}
}
@media(max-width:700px){
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-quick-tools{display:inline-flex}
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-bottom{
  width:min(298px,calc(100vw - 24px))!important;
  padding-top:76px!important;
  padding-bottom:max(15px,env(safe-area-inset-bottom,0px))!important;
 }
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-inspector{
  width:min(318px,calc(100vw - 26px))!important;
  max-height:calc(100dvh - 134px)!important;
  border-radius:12px!important;
  box-shadow:var(--aui-shadow);
 }
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-commands{
  padding-inline:clamp(4px,1vw,8px)!important;
  overflow-x:auto;scrollbar-width:none;
 }
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-commands::-webkit-scrollbar{display:none}
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-command-set{flex-shrink:0}
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-tool-filters{
  overflow-x:auto;scrollbar-width:thin;
 }
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-tool-filters button{
  min-height:35px;white-space:nowrap;
 }
 html.aiveli-ui-editor #viewport>.topbar .modes button{min-width:38px;min-height:37px;padding-inline:8px!important}
 html.aiveli-ui-editor #viewport>.topbar :is(.round-btn,.history-btn,.light-btn-text,.reset-btn){min-height:34px;min-width:34px}
 html.aiveli-ui-textile .shell{width:calc(100% - 26px)}
 html.aiveli-ui-textile :is(.detail-head,.intro){gap:10px;flex-wrap:wrap}
 html.aiveli-ui-textile .swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 html.aiveli-ui-textile .compare-bar .compare-inner{max-height:min(43dvh,300px);overflow-y:auto;align-items:flex-start;flex-direction:column}
 html.aiveli-ui-textile .compare-items{width:100%;min-width:0;flex-wrap:wrap}
 html.aiveli-ui-textile .compare-items .chip{max-width:100%;font-size:11px}
 html.aiveli-ui-textile .dialog{max-height:calc(100dvh - 20px)!important}
 html.aiveli-ui-studio .modal{max-height:calc(100dvh - 22px)!important}
}
@media(max-width:420px){
 html.aiveli-ui-studio .projects-grid{grid-template-columns:minmax(0,1fr)!important}
 html.aiveli-ui-textile .mini-palette{grid-template-columns:repeat(5,minmax(0,1fr))}
 html.aiveli-ui-textile .viewer-switches button{min-width:40px}
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-quick-tools{top:65px;left:8px}
}
@media(max-height:620px){
 html.aiveli-ui-studio .overlay{padding-block:8px!important}
 html.aiveli-ui-editor .aiveli-studio .acs-workbench .acs-head{min-height:48px!important}
 html.aiveli-ui-editor .library-scroll,
 html.aiveli-ui-editor .inspector-scroll{padding-bottom:8px}
}
@media(pointer:coarse){
 html.aiveli-ui-textile :is(.swatch,.btn-dark,.back,.text-button){min-height:44px}
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-toolbar button{min-height:44px}
 html.aiveli-ui-editor #aiveli-plan-sheet .aps-ref-commands button{min-height:42px;min-width:40px}
 html.aiveli-ui-studio .rail-btn{min-width:44px;min-height:44px}
 html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) :is(input,select,textarea){
  font-size:16px!important;
 }
 html.aiveli-ui-editor #aiveli-plan-sheet :is(.aps-properties input,.aps-properties select,.aps-ref-inspector input,.aps-ref-inspector select),
 html.aiveli-ui-editor .aiveli-studio .acs-settings :is(input,select,textarea){
  font-size:16px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html:is(.aiveli-ui-editor,.aiveli-ui-studio,.aiveli-ui-textile) :is(button,.card,.project-card,.swatch){transition:none!important;animation:none!important}
}