/* ═══════════════════════════════════════════════════════ Ankura-Array — Dashboard Styles Warm dark palette · Zen aesthetic · CSS Grid cards ═══════════════════════════════════════════════════════ */ :root { --bg-primary: #1a1a1a; --bg-secondary: #222222; --bg-card: #2d2d2d; --bg-card-hover: #3a3a3a; --accent: #d4a03c; --accent-hover: #e8b84a; --accent-glow: rgba(212, 160, 60, 0.15); --text-primary: #e8e6e3; --text-secondary: #a09b93; --text-muted: #6b6560; --border: #3d3d3d; --border-hover: #4d4d4d; --radius: 12px; --radius-sm: 8px; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4); --transition: 0.2s ease; --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Cascadia Code", Consolas, monospace; /* Compatibility / helper tokens used by app styles */ --radius-xs: 6px; --text-on-accent: #11110e; --danger: #e05959; --success: #2ea44f; --bg-input: #151515; --bg-input-focus: #1c1c1c; --bg-surface: #171717; --accent-subtle: rgba(212,160,60,0.06); --border-focus: rgba(212,160,60,0.14); /* Fluid type scale (responsive without breakpoints) */ --fs-h1: clamp(1.35rem, 2.5vw + 0.5rem, 2rem); --fs-h2: clamp(1rem, 1.5vw + 0.5rem, 1.2rem); --fs-body: clamp(0.82rem, 0.5vw + 0.7rem, 0.875rem); --fs-small: clamp(0.7rem, 0.3vw + 0.6rem, 0.75rem); --touch-min: 44px; /* New simplified theme variables (used by theme switcher) */ --bg-color: var(--bg-primary); --text-color: var(--text-primary); --card-bg: var(--bg-card); --card-bg-hover: var(--bg-card-hover); --surface-bg: var(--bg-surface); } /* Light theme override (class applied on ) */ .light-theme { --bg-color: #ffffff; --text-color: #111111; --card-bg: #f6f6f6; --card-bg-hover: #efefef; --surface-bg: #ffffff; /* Map legacy variables so existing rules inherit correctly */ --bg-primary: var(--bg-color); --bg-secondary: var(--surface-bg); --bg-card: var(--card-bg); --bg-card-hover: var(--card-bg-hover); --bg-input: #ffffff; --bg-input-focus: #ffffff; --bg-surface: var(--surface-bg); --text-primary: var(--text-color); --text-secondary: #333333; --text-muted: #6b6560; --border: #e6e6e6; --border-hover: #dcdcdc; --accent-subtle: rgba(212,160,60,0.04); --border-focus: rgba(212,160,60,0.08); } /* Dark theme override (class applied on ) */ .dark-theme { --bg-color: #0f0f10; --text-color: #e8e6e3; --card-bg: #1f1f1f; --card-bg-hover: #282828; --surface-bg: #171717; /* Map legacy variables for dark theme as well */ --bg-primary: var(--bg-color); --bg-secondary: var(--surface-bg); --bg-card: var(--card-bg); --bg-card-hover: var(--card-bg-hover); --bg-input: #151515; --bg-input-focus: #1c1c1c; --bg-surface: var(--surface-bg); --text-primary: var(--text-color); --text-secondary: #a09b93; --text-muted: #6b6560; --border: #3d3d3d; --border-hover: #4d4d4d; --accent-subtle: rgba(212,160,60,0.06); --border-focus: rgba(212,160,60,0.14); } /* ── Reset ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-stack); background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; min-height: 100vh; } /* ── Header ────────────────────────────────────────── */ .site-header { padding: 2.5rem 2rem 1rem; text-align: center; border-bottom: 1px solid var(--border); background: var(--bg-secondary); position: relative; } .site-header h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .site-header h1 .accent { color: var(--accent); } .site-header p { margin-top: 0.5rem; color: var(--text-secondary); font-size: var(--fs-body); font-weight: 400; } .site-header__theme-select { position: absolute; right: 2rem; top: 2.5rem; padding: 0.55rem 0.75rem; font-size: 0.85rem; font-family: var(--font-stack); color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-xs); outline: none; cursor: pointer; transition: border-color var(--transition); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a09b93' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } .site-header__theme-select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--accent-glow); } .site-header__theme-select option { background: var(--bg-surface); color: var(--text-primary); } /* ── Main Content ──────────────────────────────────── */ .main-content { max-width: 1200px; margin: 0 auto; padding: 2rem; } .section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 1.25rem; } /* ── Search Input ──────────────────────────────────── */ .search-input { padding: 0.65rem 1rem; font-size: 0.875rem; font-family: var(--font-stack); color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; width: 100%; max-width: 400px; transition: border-color var(--transition), box-shadow var(--transition); } .search-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--accent-glow); } .search-input::placeholder { color: var(--text-muted); font-style: italic; } /* ── Card Grid ─────────────────────────────────────── */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .app-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); box-shadow: var(--shadow-card); cursor: default; } .app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); } .app-card__icon { font-size: 2.25rem; line-height: 1; } .app-card__name { font-size: 1.2rem; font-weight: 600; color: var(--text-primary); } .app-card__desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; flex-grow: 1; } .app-card__version { font-size: 0.7rem; font-family: var(--font-mono); color: var(--text-muted); } .app-card__launch { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.65rem 1.25rem; font-size: 0.875rem; font-weight: 600; font-family: var(--font-stack); color: var(--bg-primary); background: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), color var(--transition), transform var(--transition); text-decoration: none; } .app-card__launch:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); } .app-card__launch:active { transform: translateY(0); } /* ── Footer ────────────────────────────────────────── */ .site-footer { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.75rem; border-top: 1px solid var(--border); margin-top: 4rem; } .footer-link { color: var(--accent); text-decoration: none; font-weight: 600 } .footer-link:hover { text-decoration: underline } /* ── Empty State ───────────────────────────────────── */ .empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-muted); font-size: 1rem; } /* ── Utility Classes ───────────────────────────────── */ /* Flex row with space-between (replaces common inline styles) */ .section-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem } .section-row--compact { margin-bottom:1rem } /* Grid for per-app cleanup buttons */ .cleanup-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0.75rem; margin-bottom:1.5rem } /* Divider line */ .divider { border-top:1px solid var(--border); padding-top:1rem; margin-top:1.5rem } .divider--flush { margin-bottom:0 } /* Help / disclaimer text */ .help-text { font-size:var(--fs-small); color:var(--text-muted); margin-top:0.5rem; text-align:center } /* Spacer (replaces inline height divs) */ .spacer { height:1.25rem } .spacer--sm { height:1rem } /* Short-form badge in app cards */ .app-card__name-row { display:flex; gap:8px; align-items:baseline; margin-bottom:4px } .app-card__short-form { font-size:0.8em; font-weight:bold; background:rgba(0,0,0,0.1); padding:2px 6px; border-radius:3px; letter-spacing:0.5px } /* Short-form label in top-bar title */ .top-bar__short-form { font-size:0.75em; opacity:0.7; margin-left:4px } /* Version badge (top-bar / footer) */ .version-badge { font-size:0.75em; padding:2px 6px; border-radius:6px; margin-left:8px } /* Footer version line */ .version-footer { text-align:center; padding:1.5rem 1rem 1rem; border-top:1px solid var(--border); margin-top:2rem } .version-footer__badge { font-size:0.7rem; color:var(--text-muted); font-family:var(--font-mono); letter-spacing:0.03em } /* Compact select (width:auto) */ .select--compact { width:auto; min-width:80px } /* Two-column layout that stacks on mobile */ .layout-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:0 } /* Visibility toggles */ .hide-mobile, .show-mobile { } /* Instance row (JS-rendered) */ .instance-row { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; padding:0.35rem 0 } /* Paste panel helpers */ .paste-panel__header { display:flex; align-items:center; justify-content:space-between; gap:8px } .paste-panel__actions { display:flex; gap:8px; align-items:center } .paste-panel__footer { margin-top:6px; display:flex; gap:8px } /* Pop Panel — viewport-safe absolute dropdown/popup container Parent must have position:relative. Default: anchors to right edge. On small screens the anchor auto-flips to the left edge so the panel always opens rightward and never overflows the viewport. */ .pop-panel { position: absolute; top: 100%; right: 0; z-index: 100; margin-top: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.35); max-width: calc(100vw - 2rem); } /* ── Responsive ────────────────────────────────────── */ /* --- Tablet and below (768px) --- */ @media (max-width: 768px) { .search-input { max-width:100% } .section-row { flex-wrap:wrap } .instance-item { flex-direction:column } .instance-item__actions { width:100%; gap:0.5rem } .instance-item__actions .btn { flex:1 } .top-bar { flex-wrap:wrap; gap:0.5rem; padding:0.75rem 1rem } .top-bar__meta { margin-left:0; flex-wrap:wrap; gap:0.25rem } .top-bar__actions { flex-wrap:wrap; gap:0.4rem } .layout-sidebar { grid-template-columns:1fr } .layout-sidebar > *:first-child { border-right:none; border-bottom:1px solid var(--border) } .hide-mobile { display:none !important } .show-mobile { display:block !important } } /* --- Small screens (640px) --- */ @media (max-width: 640px) { .site-header { padding:1.5rem 1rem 0.75rem } .site-header__theme-select { right:1rem; top:1rem } .main-content { padding:1.25rem } .app-grid { grid-template-columns:1fr } /* Pop Panel: flip anchor to left so the panel opens rightward on narrow screens */ .pop-panel { right:auto; left:0 } } /* --- Phone (480px) --- */ @media (max-width: 480px) { .top-bar__title { font-size:1rem } .top-bar__actions { width:100%; justify-content:flex-start } .top-bar__actions .btn { flex:1; min-width:0; font-size:0.72rem; padding:0.4rem 0.6rem } .top-bar__actions .select { flex:0 0 auto; width:auto; min-width:70px } .preview-actions { flex-direction:column } .cleanup-grid { grid-template-columns:1fr } } /* --- Touch devices --- */ @media (pointer: coarse) { .btn { min-height:var(--touch-min); min-width:var(--touch-min); padding:0.6rem 1rem } .select { min-height:var(--touch-min) } .app-card__launch { min-height:var(--touch-min) } } /* ═══════════════════════════════════════════════════════ App-specific styles (Vaak-Smith) Merged from the app's preferred stylesheet — appended to allow app overrides ═══════════════════════════════════════════════════════ */ /* Top Bar */ .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border); flex-shrink: 0; } .top-bar__title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); } .top-bar__title .accent { color: var(--accent); } .top-bar__actions { display: flex; gap: 0.5rem; } /* Compact meta area next to app title */ .top-bar__left { display:flex; align-items:center; gap:0.75rem; } .top-bar__meta { display:flex; gap:0.5rem; align-items:center; font-size:0.8rem; color:var(--text-muted); white-space:nowrap; margin-left:0.5rem; } .top-bar__meta .meta-item { padding: 0.1rem 0.4rem; background: transparent; border-radius:6px; color:var(--text-muted); font-weight:600 } /* App card meta (dashboard) — compact and muted */ .app-card__meta { display:inline-block; font-size:0.8rem; color:var(--text-muted); margin-left:8px } .app-card__meta[title] { cursor: default } /* Buttons */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; padding:0.5rem 1rem; font-size:0.8rem; font-weight:600; font-family:var(--font-stack); border-radius:var(--radius-xs); cursor:pointer; transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); text-decoration:none; white-space:nowrap; line-height:1 } .btn:active { transform: translateY(0) } .btn--outline { color:var(--accent); background:transparent; border:1.5px solid var(--accent) } .btn--outline:hover { background:var(--accent); color:var(--text-on-accent) } .btn--danger { color:var(--danger); background:transparent; border:1.5px solid var(--danger) } .btn--danger:hover { background:var(--danger); color:var(--text-primary) } .btn--solid { color:var(--text-on-accent); background:var(--accent); border:1.5px solid var(--accent) } .btn--solid:hover { background:var(--accent-hover); border-color:var(--accent-hover) } .btn--copied { background:var(--success) !important; border-color:var(--success) !important; color:#fff !important; pointer-events:none } .btn--sm { font-size:0.75rem; padding:0.4rem 0.8rem } .btn--full { width:100% } .btn--danger-outline { color:var(--danger); background:transparent; border:1.5px solid var(--danger) } .btn--danger-outline:hover { background:var(--danger); color:var(--text-primary) } /* Layout */ .app-layout { display:grid; grid-template-columns:1fr 1fr; gap:0; flex:1; overflow:hidden } .panel { padding:1.5rem; overflow-y:auto } .panel--editor { border-right:1px solid var(--border) } .panel--preview { background:var(--bg-secondary) } /* Config */ .config-row { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap } .config-group { flex:1; min-width:180px } /* Labels */ .field-label { display:block; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:0.4rem } /* Select */ .select { width:100%; padding:0.55rem 0.75rem; font-size:0.85rem; font-family:var(--font-stack); color:var(--text-primary); background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-xs); outline:none; cursor:pointer; transition:border-color var(--transition); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a09b93' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.75rem center; padding-right:2rem } .select:focus { border-color:var(--border-focus); box-shadow:0 0 0 2px var(--accent-glow) } .select option { background:var(--bg-surface); color:var(--text-primary) } /* Textareas */ .editor-section { margin-bottom:1.25rem } .textarea { width:100%; padding:0.75rem 1rem; font-size:0.875rem; font-family:var(--font-mono); line-height:1.6; color:var(--text-primary); background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; resize:vertical; transition:border-color var(--transition), box-shadow var(--transition) } .textarea:focus { border-color:var(--border-focus); box-shadow:0 0 0 2px var(--accent-glow); background:var(--bg-input-focus) } .textarea::placeholder { color:var(--text-muted); font-style:italic } .textarea--system { min-height:140px } .textarea--user { min-height:200px } /* Sliders */ .params-row { display:flex; gap:1.5rem; margin-bottom:1.25rem; flex-wrap:wrap } .param-group { flex:1; min-width:160px } .param-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.35rem } .param-value { font-size:0.8rem; font-family:var(--font-mono); color:var(--accent); font-weight:600 } .slider { width:100%; height:6px; -webkit-appearance:none; appearance:none; background:var(--border); border-radius:3px; outline:none; cursor:pointer } .slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-primary); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.4); transition:background var(--transition), transform var(--transition) } .slider::-webkit-slider-thumb:hover { background:var(--accent-hover); transform:scale(1.15) } .slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-primary); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.4) } .slider::-moz-range-track { background:var(--border); height:6px; border-radius:3px } /* Preview Panel */ .preview-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem } .preview-title { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted) } .preview-actions { display:flex; gap:0.5rem } .preview-content { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.25rem; font-family:var(--font-mono); font-size:0.82rem; line-height:1.7; color:var(--text-color); white-space:pre-wrap; word-break:break-word; min-height:300px; overflow-y:auto } .preview-content--empty { display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-style:italic; font-family:var(--font-stack) } /* Model Badge */ .model-badge { display:inline-flex; align-items:center; gap:0.35rem; padding:0.25rem 0.6rem; font-size:0.7rem; font-family:var(--font-mono); font-weight:600; color:var(--accent); background:var(--accent-subtle); border-radius:100px; border:1px solid var(--accent-glow) } /* Toggle switch (used in App Manager) */ .toggle-switch { position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0 } .toggle-switch input { opacity:0; width:0; height:0; position:absolute } .toggle-switch__slider { position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:22px; transition:background var(--transition) } .toggle-switch__slider::before { content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:var(--text-secondary); border-radius:50%; transition:transform var(--transition), background var(--transition) } .toggle-switch input:checked + .toggle-switch__slider { background:var(--accent-glow); border:1px solid var(--accent) } .toggle-switch input:checked + .toggle-switch__slider::before { transform:translateX(15px); background:var(--accent) } .toggle-switch input:focus-visible + .toggle-switch__slider { box-shadow:0 0 0 2px var(--accent-glow) } /* App Manager — hidden admin panel (revealed via #admin hash or 7-tap on logo) */ /* Force-honor the [hidden] attribute even though the panel uses display:flex when shown. */ .app-manager[hidden] { display: none !important; } .app-manager { margin-top: 2.5rem; padding: 1.5rem 1.5rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 1rem; } .app-manager__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .app-manager__title { font-size: 1.05rem; font-weight: 600; color: var(--accent); margin: 0; letter-spacing: 0.01em; } .app-manager__hint { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; margin: 0; } .app-manager__list { display: flex; flex-direction: column; gap: 0.55rem; } .app-manager__row { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.85rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: background var(--transition), border-color var(--transition); } .app-manager__row:hover { background: var(--bg-input-focus); border-color: var(--border-hover); } .app-manager__row--disabled { opacity: 0.62; } .app-manager__icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; width: 1.6rem; text-align: center; } .app-manager__label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .app-manager__name { color: var(--text-primary); font-weight: 500; font-size: 0.95rem; } .app-manager__id { font-size: var(--fs-small); color: var(--text-muted); font-family: var(--font-mono); } .app-manager__state { font-size: var(--fs-small); font-weight: 500; min-width: 64px; text-align: right; text-transform: uppercase; letter-spacing: 0.04em; } .app-manager__state--on { color: var(--success, #2ea44f); } .app-manager__state--off { color: var(--danger, #e05959); } @media (max-width: 540px) { .app-manager { padding: 1.2rem 1rem 1rem; margin-top: 2rem; } .app-manager__row { gap: 0.7rem; padding: 0.6rem 0.7rem; } .app-manager__state { min-width: 52px; } } /* Instance Manager */ .instance-manager { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border) } .instances-list { display:flex; flex-direction:column; gap:0.75rem } .instance-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem } /* Compact two-column layout for instance rows */ .instance-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .instance-item__left { display:flex; gap:0.75rem; align-items:center; } .instance-item__id { font-family: var(--font-mono); color:var(--text-primary); font-size:0.9rem; } .instance-item__apps { display:flex; gap:0.35rem; } .instance-item__app-tag { background:var(--accent-subtle); padding:0.18rem 0.4rem; border-radius:6px; font-size:0.75rem; color:var(--text-muted); } .instance-item__right { display:flex; gap:0.75rem; align-items:center; } .instance-item__ts { font-size:0.85rem; color:var(--text-muted); white-space:nowrap; } .instance-item__actions { display:flex; gap:0.5rem; } .instance-item__info { flex:1 } .instance-item__id { font-size:0.75rem; font-family:var(--font-mono); color:var(--text-muted); word-break:break-all; line-height:1.5 } .instance-item__apps { font-size:0.7rem; color:var(--text-secondary); margin-top:0.35rem; display:flex; gap:0.5rem; flex-wrap:wrap } .instance-item__app-tag { background:var(--accent-subtle); border:1px solid var(--accent-glow); border-radius:3px; padding:0.2rem 0.4rem; font-family:var(--font-mono); font-weight:600 } .instance-item__actions { display:flex; gap:0.5rem; flex-shrink:0 } .instance-item__actions .btn { font-size:0.7rem; padding:0.45rem 0.75rem } .instance-item--empty { text-align:center; color:var(--text-muted); font-style:italic; padding:1.5rem; border:1px dashed var(--border) } /* ── Floating Label Field ────────────────────────────────────── Helper text appears as ghost text inside the empty field, then floats to the top border once the field has content or focus. Structure: .float-field > [textarea|input] + label.float-field__label NOTE: