/* ============================================================ Phoxel app shell — shared app-specific styles ============================================================ */ body.app { background: var(--bg-soft); min-height: 100vh; } /* The grid lives on #root because React mounts the sidebar + main inside it. The original design HTMLs had both as direct children of ; in our React version they share a parent div, so the grid needs to be there instead. IMPORTANT: do not move this rule back to `body.app` — body has only one child (#root), so the two-column grid would collapse and the dashboard layout breaks. */ body.app > #root { display: block; min-height: 100vh; } /* Sidebar */ .app-sidebar { background: var(--white); border-right: 1px solid var(--border); padding: 20px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; } .app-sidebar .logo { padding: 4px 8px 24px; } .app-sidebar .sidebar-section { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); padding: 16px 12px 8px; } .app-sidebar a.side-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background 0.12s, color 0.12s; } .app-sidebar a.side-link:hover { background: var(--bg-soft); color: var(--ink); } .app-sidebar a.side-link.active { background: var(--ink); color: var(--white); } .app-sidebar a.side-link svg { flex-shrink: 0; } .app-sidebar a.side-link .pill-count { margin-left: auto; font-size: 11px; background: var(--bg-soft); color: var(--ink-3); padding: 2px 8px; border-radius: 999px; font-weight: 600; } .app-sidebar a.side-link.active .pill-count { background: rgba(255,255,255,0.15); color: var(--white); } .app-sidebar .spacer { flex: 1; } .app-sidebar .credits-card { margin: 8px 0; padding: 16px; background: var(--ink); color: var(--white); border-radius: var(--r-md); } .app-sidebar .credits-card .clbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 4px; } .app-sidebar .credits-card .cnum { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; } .app-sidebar .credits-card .cnum .alt { color: var(--accent); } .app-sidebar .credits-card .btn { width: 100%; height: 32px; font-size: 13px; background: var(--accent); color: white; } /* Top bar */ .app-topbar { height: 64px; background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .app-topbar .topbar-inner { max-width: 1320px; margin: 0 auto; height: 100%; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; } .app-topbar .crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); } .app-topbar .crumbs strong { color: var(--ink); font-weight: 600; } .app-topbar .crumbs .sep { color: var(--ink-5); } .app-topbar .top-right { display: flex; align-items: center; gap: 8px; } .app-topbar .topbar-left { display: flex; align-items: center; gap: 12px; } .app-topbar .topbar-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; } .app-topbar .topbar-logo .logo-mark { width: 28px; height: 28px; background: var(--ink); color: white; border-radius: 8px; display: grid; place-items: center; position: relative; } .app-topbar .topbar-logo .logo-mark::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; border: 2px solid var(--white); } .app-topbar .credits-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--ink); color: white; border: none; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .app-topbar .credits-chip:hover { opacity: 0.85; } .app-topbar .credits-chip-num { font-weight: 800; } .app-topbar .credits-chip-label { color: rgba(255,255,255,0.6); font-weight: 500; } .app-topbar .top-search { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border-radius: var(--r-sm); padding: 0 12px; height: 34px; width: 240px; border: 1px solid transparent; } .app-topbar .top-search:focus-within { border-color: var(--border-strong); background: var(--white); } .app-topbar .top-search input { flex: 1; background: none; border: none; outline: none; font-size: 14px; } .app-topbar .iconbtn { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-3); } .app-topbar .iconbtn:hover { background: var(--bg-soft); color: var(--ink); } .app-topbar .iconbtn .dot { position: absolute; width: 7px; height: 7px; background: var(--danger); border-radius: 50%; margin: -10px 0 0 10px; } .app-topbar .acct { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); } .app-topbar .acct:hover { background: var(--bg-soft); } .app-topbar .acct .av { width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; } .app-topbar .acct .nm { font-size: 13px; font-weight: 600; } /* Account dropdown menu */ .acct-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 6px; z-index: 30; display: flex; flex-direction: column; } .acct-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); background: none; border: none; border-radius: var(--r-sm); cursor: pointer; text-align: left; font-family: inherit; } .acct-menu-item:hover { background: var(--bg-soft); color: var(--ink); } .acct-menu-item svg { color: var(--ink-4); flex-shrink: 0; } .acct-menu-item:hover svg { color: var(--ink-2); } .acct-menu-sep { height: 1px; background: var(--border); margin: 4px 0; } /* Main content area */ .app-main { padding: 32px; max-width: 1320px; margin: 0 auto; } /* Page header inside app */ .app-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 24px; } .app-page-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 4px; } .app-page-head p { color: var(--ink-3); font-size: 15px; } /* Card primitives within app */ .a-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 24px; } /* Status pills */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600; border-radius: 999px; letter-spacing: -0.005em; } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; } .status-pill.done { background: var(--success-soft); color: #047857; } .status-pill.done .dot { background: #10b981; } .status-pill.processing { background: #fff7ed; color: #c2410c; } .status-pill.processing .dot { background: var(--accent); animation: pulse 1.4s infinite; } .status-pill.failed { background: var(--danger-soft); color: #b91c1c; } .status-pill.failed .dot { background: var(--danger); } .status-pill.queued { background: var(--bg-soft); color: var(--ink-3); } .status-pill.queued .dot { background: var(--ink-4); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } /* Responsive */ @media (max-width: 1000px) { body.app > #root { grid-template-columns: 1fr; } .app-sidebar { position: fixed; z-index: 30; left: -100%; width: 280px; transition: left 0.2s; } .app-sidebar.open { left: 0; } .app-main { padding: 20px; } .app-topbar .top-search { display: none; } }