@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Comic+Neue:wght@400;700&display=swap');

:root { --navy:#10213f; --navy-2:#183152; --ink:#14213d; --muted:#65728b; --line:#dfe7f1; --paper:#f6f9fc; --white:#fff; --blue:#0a83bf; --blue-soft:#e1f4fb; --yellow:#ffc857; --coral:#ec7668; --violet:#9d83db; --mint:#59c7a0; --shadow:0 14px 36px rgba(21,45,78,.08); --radius:18px; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:'Comic Neue',system-ui,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(10,131,191,.38); outline-offset:2px; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:244px; flex:0 0 244px; padding:28px 18px 22px; background:var(--navy); color:#eaf3ff; display:flex; flex-direction:column; }
.brand-lockup { display:flex; align-items:center; gap:11px; padding:0 10px 34px; }
.brand-lockup strong,.brand-lockup small { display:block; }
.brand-lockup strong { font-family:'Baloo 2',sans-serif; letter-spacing:.02em; font-size:18px; line-height:1.15; }
.brand-lockup small { color:#93b3d4; font-size:11px; margin-top:3px; }
.brand-mark { width:36px; height:36px; border-radius:12px; background:var(--yellow); display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:8px; }
.brand-mark span { width:4px; border-radius:4px 4px 2px 2px; background:var(--navy); }.brand-mark span:nth-child(1){height:9px}.brand-mark span:nth-child(2){height:16px}.brand-mark span:nth-child(3){height:12px}
.sidebar-section-label { font-size:11px; color:#6e8cac; text-transform:uppercase; letter-spacing:.16em; padding:0 12px 9px; }
.nav-stack { display:grid; gap:5px; }.nav-item { min-height:46px; border:0; border-radius:12px; padding:0 12px; color:#a9c0d9; background:transparent; display:flex; align-items:center; gap:11px; text-align:left; transition:background .2s ease,color .2s ease; }.nav-item:hover,.nav-item.active { background:#1e3a60; color:#fff; }.nav-icon { width:18px; height:18px; display:grid; place-items:center; }.nav-icon svg,.icon-button svg,.primary-button svg,.secondary-button svg,.card-heading svg,.device-card-head>svg,.tip-box svg,.file-drop svg { width:18px; height:18px; }.nav-count { margin-left:auto; min-width:22px; padding:2px 6px; border-radius:20px; text-align:center; background:#315a85; color:#fff; font-size:12px; }
.sidebar-footer { margin-top:auto; display:grid; gap:16px; padding:18px 10px 0; border-top:1px solid rgba(189,218,244,.13); }.connection-dot { display:flex; align-items:center; gap:8px; font-size:12px; color:#9cb6cf; }.connection-dot span:first-child { width:7px; height:7px; border-radius:50%; background:#59c7a0; box-shadow:0 0 0 4px rgba(89,199,160,.13); }.text-button { justify-self:start; padding:0; border:0; background:none; color:#f9c96b; font-size:13px; }
.main-content { width:min(100%,1440px); padding:0 44px 70px; }.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.breadcrumb { display:flex; gap:10px; align-items:center; color:#8a97ab; font-size:14px; }.breadcrumb strong { color:var(--ink); }.slash { color:#c8d2df; }.topbar-actions { display:flex; align-items:center; gap:12px; }.icon-button,.avatar-button { width:42px; height:42px; border:1px solid var(--line); background:#fff; color:#53627b; border-radius:12px; display:grid; place-items:center; transition:background .2s ease,border-color .2s ease; }.icon-button:hover { border-color:#9dc8df; background:#f2fbfe; }.avatar-button { border:0; background:var(--yellow); color:var(--navy); font-weight:700; }
.view-panel { display:none; padding-top:40px; }.active-view { display:block; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }.eyebrow { color:var(--blue); font-weight:700; font-size:11px; letter-spacing:.16em; margin:0 0 8px; }.page-heading h1 { margin:0; font-family:'Baloo 2',sans-serif; font-size:34px; letter-spacing:-.02em; line-height:1.1; }.subheading { margin:9px 0 0; color:var(--muted); font-size:15px; }.primary-button,.secondary-button { min-height:44px; border-radius:11px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; font-weight:700; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }.primary-button { background:var(--navy); color:#fff; box-shadow:0 7px 16px rgba(16,33,63,.16); }.primary-button:hover { background:#1a3a63; transform:translateY(-1px); }.secondary-button { border-color:#bfd0df; color:var(--navy); background:#fff; }.secondary-button:hover { border-color:#6eb5d4; background:#f3fbfd; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px; }.metric-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:19px 20px; position:relative; overflow:hidden; }.metric-card:after { content:''; position:absolute; right:-25px; bottom:-36px; width:90px; height:90px; border-radius:50%; background:var(--metric-tint); }.metric-label { color:var(--muted); font-size:13px; }.metric-value { display:block; margin-top:7px; font-family:'Baloo 2',sans-serif; font-size:32px; line-height:1; }.metric-hint { color:#77859b; font-size:12px; margin-top:8px; display:block; }.toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }.filter-tabs { display:flex; flex-wrap:wrap; gap:4px; }.filter-tab { border:0; background:transparent; padding:9px 12px; color:#718096; border-radius:10px; }.filter-tab:hover,.filter-tab.active { color:var(--navy); background:#e7f4f9; }.filter-tab span { margin-left:3px; color:#9aa7b9; }.search-field { min-width:260px; height:42px; display:flex; align-items:center; gap:8px; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:11px; color:#8a98ab; }.search-field input { width:100%; min-width:0; border:0; outline:0; color:var(--ink); background:transparent; }.asset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.asset-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 3px 12px rgba(21,45,78,.03); transition:transform .2s ease,box-shadow .2s ease; }.asset-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }.asset-cover { height:132px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }.tone-cyan { background:#c8eff6; color:#0c6683; }.tone-amber { background:#ffedba; color:#8b5b00; }.tone-coral { background:#ffd6ce; color:#9b493f; }.tone-violet { background:#e6dcfa; color:#644a9e; }.tone-mint { background:#c8f2e4; color:#176e5c; }.asset-cover:before,.asset-cover:after { content:''; position:absolute; border:2px solid currentColor; opacity:.18; border-radius:50%; }.asset-cover:before { width:170px;height:170px; right:-55px;top:-65px; }.asset-cover:after { width:95px;height:95px;left:-30px;bottom:-45px; }.asset-glyph { width:74px; height:74px; position:relative; z-index:1; }.asset-glyph svg { width:100%; height:100%; }.asset-badge { position:absolute; top:12px; left:12px; z-index:2; background:rgba(255,255,255,.7); backdrop-filter:blur(5px); border-radius:20px; padding:4px 8px; font-size:11px; font-weight:700; }.asset-status { position:absolute; top:12px; right:12px; z-index:2; display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.8); border-radius:20px; padding:4px 8px; font-size:11px; color:#486177; }.asset-status .status-dot { background:#59c7a0; }.asset-body { padding:15px 16px 16px; }.asset-title-row { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }.asset-title { font-family:'Baloo 2',sans-serif; font-size:20px; margin:0; line-height:1.1; }.asset-duration { color:#8290a2; font-size:12px; white-space:nowrap; }.asset-meta { color:var(--muted); font-size:12px; margin:8px 0 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.asset-actions { display:flex; gap:8px; }.small-button { min-height:34px; border-radius:9px; padding:0 10px; border:1px solid var(--line); background:#fff; color:#53627b; font-size:12px; display:inline-flex; align-items:center; gap:6px; }.small-button:hover { border-color:#8fc2d8; background:#f5fbfd; }.small-button.primary-small { background:var(--blue-soft); border-color:transparent; color:#056184; }.small-button svg { width:15px;height:15px; }.empty-state { grid-column:1/-1; background:#fff; border:1px dashed #c1d2e0; border-radius:18px; padding:48px; text-align:center; color:var(--muted); }.empty-state h2 { font-family:'Baloo 2',sans-serif; margin:12px 0 4px; color:var(--ink); }
.status-pill { min-height:32px; display:inline-flex; gap:7px; align-items:center; padding:0 11px; border-radius:30px; font-size:12px; font-weight:700; }.status-pill.neutral { background:#edf3f7;color:#61748b; }.status-pill.success { background:#e4f7ef;color:#24765f; }.status-dot { width:7px;height:7px;border-radius:50%;background:currentColor; }.publish-banner { background:var(--navy); color:#fff; border-radius:20px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }.publish-banner h2 { margin:0; font-family:'Baloo 2',sans-serif; font-size:25px; }.publish-banner p { margin:5px 0 0; color:#a9c3df; font-size:13px; }.publish-banner .primary-button { background:var(--yellow); color:var(--navy); box-shadow:none; }.release-table { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }.release-row { display:grid; grid-template-columns:44px 1.5fr .7fr .5fr 1fr; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid #edf1f5; }.release-row:last-child { border:0; }.release-row.header { color:#8592a4; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.release-name { display:flex; align-items:center; gap:10px; }.release-thumb { width:34px;height:34px;border-radius:9px; display:grid; place-items:center; }.release-thumb svg { width:21px;height:21px; }.release-name strong { font-size:14px; }.release-name small,.release-row>small { color:#8290a2; font-size:12px; }.release-category { font-size:12px; color:#5f718a; }.device-layout,.settings-layout { display:grid; grid-template-columns:1.35fr .9fr; gap:18px; }.device-card,.settings-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; }.device-card-head,.card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }.device-card h2,.settings-card h2 { font-family:'Baloo 2',sans-serif; font-size:21px; margin:0; }.device-preview-row { display:flex; gap:28px; align-items:center; padding-top:28px; }.mini-device { width:196px; padding:9px 9px 11px; border-radius:15px; background:#192d4a; box-shadow:0 10px 16px rgba(16,33,63,.2); }.mini-screen { height:104px; border-radius:7px; background:#172c43; color:#bdf2ff; border:2px solid #365b72; padding:15px 12px; display:flex; flex-direction:column; justify-content:center; gap:4px; }.mini-screen span { font-size:9px; color:#f6c95e; letter-spacing:.12em; }.mini-screen strong { font-family:'Baloo 2',sans-serif; font-size:22px; line-height:1; }.mini-screen small { font-size:8px; color:#75a8ba; }.mini-keys { height:22px; margin-top:8px; border-radius:5px; background:repeating-linear-gradient(90deg,#7386a0 0 10px,transparent 10px 13px); opacity:.55; }.device-facts { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.device-facts span,.device-facts strong { display:block; }.device-facts span { color:#8592a4;font-size:12px; }.device-facts strong { margin-top:4px;font-size:14px; }.card-copy { color:var(--muted); font-size:14px; line-height:1.55; }.sync-steps { display:grid; grid-template-columns:30px 1fr; gap:12px 10px; align-items:center; margin-top:22px; }.sync-steps>span { width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#edf3f7;color:#8798aa;font-weight:700;font-size:12px; }.sync-steps>span.done { background:#e4f7ef;color:#24765f; }.sync-steps strong,.sync-steps small { display:block; }.sync-steps strong { font-size:13px; }.sync-steps small { color:#8895a6;font-size:11px;margin-top:2px; }.settings-layout { grid-template-columns:1.15fr .85fr; }.settings-card { display:grid; gap:20px; }.card-heading p { margin:5px 0 0; color:var(--muted);font-size:13px; }.field-label { display:grid; gap:7px; color:#596a82; font-size:13px; font-weight:700; }.text-input { width:100%; min-height:43px; padding:0 12px; border:1px solid #cfdae6; border-radius:10px; color:var(--ink); background:#fff; }.field-label small,.toggle-field small { font-size:11px;color:#8a97a9;font-weight:400; }.form-actions { display:flex; justify-content:flex-end; gap:9px; }.file-drop { min-height:125px; border:1px dashed #a7c3d6; border-radius:13px; background:#f4fbfd; display:grid; place-items:center; align-content:center; gap:5px; text-align:center; color:#17627f; cursor:pointer; }.file-drop input { display:none; }.file-drop small { color:#7e97a8; }.tip-box { display:flex; gap:10px; padding:12px; border-radius:11px; background:#fff7df; color:#7b5a13; }.tip-box p { margin:0; font-size:12px; line-height:1.5; }.tip-box svg { flex:0 0 auto; }
.modal-backdrop { position:fixed; inset:0; z-index:10; background:rgba(9,23,43,.55); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; }.modal-backdrop[hidden] { display:none; }.asset-modal { width:min(680px,100%); max-height:min(760px,calc(100vh - 40px)); overflow:auto; border-radius:20px; background:#fff; box-shadow:0 25px 70px rgba(0,0,0,.22); }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; padding:24px 26px 20px; border-bottom:1px solid var(--line); }.modal-header h2 { margin:0; font-family:'Baloo 2',sans-serif; font-size:26px; }.asset-modal form { padding:23px 26px 25px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.wide { grid-column:1/-1; }.modal-footer { margin-top:25px; display:flex; justify-content:space-between; align-items:center; }.danger-text { background:none;border:0;color:#c75249;padding:8px 0;font-weight:700; }.toggle-field { display:flex; align-items:center; gap:10px; cursor:pointer; }.toggle-field input { position:absolute; opacity:0; }.toggle-control { width:38px;height:23px;border-radius:20px;background:#d7e0e8;position:relative;transition:.2s; }.toggle-control:after { content:''; width:17px;height:17px;position:absolute;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.14); }.toggle-field input:checked + .toggle-control { background:#59c7a0; }.toggle-field input:checked + .toggle-control:after { transform:translateX(15px); }.toggle-field strong,.toggle-field small { display:block; }.toast-region { position:fixed; right:24px; bottom:24px; z-index:20; display:grid; gap:8px; }.toast { background:var(--navy); color:#fff; padding:12px 15px; border-radius:11px; box-shadow:var(--shadow); font-size:13px; animation:toast-in .25s ease both; }.toast.error { background:#a8443d; }@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sr-only { position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.preview-player { border-radius:14px; overflow:hidden; background:#10213f; min-height:140px; display:grid; place-items:center; }.preview-player video { display:block; width:100%; max-height:360px; }.preview-player audio { width:calc(100% - 30px); }
@media (max-width:1100px){.sidebar{width:208px;flex-basis:208px}.main-content{padding:0 25px 50px}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.device-layout,.settings-layout{grid-template-columns:1fr}}
@media (max-width:720px){.app-shell{display:block}.sidebar{width:100%;padding:14px 14px 10px;display:block}.brand-lockup{padding:0 4px 13px}.sidebar-section-label,.sidebar-footer{display:none}.nav-stack{display:flex;overflow:auto}.nav-item{min-height:40px;white-space:nowrap;padding:0 10px}.nav-count{display:none}.main-content{padding:0 16px 40px}.topbar{height:61px}.page-heading{display:block;margin-bottom:23px}.page-heading .primary-button{margin-top:17px}.page-heading h1{font-size:29px}.metric-grid{gap:8px}.metric-card{padding:14px 13px}.metric-value{font-size:26px}.metric-hint{font-size:10px}.toolbar{display:block}.search-field{margin-top:12px;width:100%}.asset-grid{grid-template-columns:1fr}.publish-banner{display:block}.publish-banner .primary-button{margin-top:16px}.release-row{grid-template-columns:32px 1fr auto}.release-row.header,.release-row>:nth-child(3),.release-row>:nth-child(4){display:none}.device-preview-row{display:block}.device-facts{margin-top:20px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.modal-footer{align-items:flex-end}.modal-header,.asset-modal form{padding-left:18px;padding-right:18px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}