/* Origo Rose Studio: shared shell tokens for subscriber and administrator UI. */
:root {
  --studio-canvas:#f8f5f6; --studio-surface:#ffffff; --studio-soft:#fcf9fa;
  --studio-text:#302630; --studio-muted:#776b76; --studio-line:#e9e0e5;
  --studio-accent:#a33f68; --studio-accent-hover:#8a3156; --studio-tint:#f8e9ef;
  --studio-shadow:0 6px 24px #49223a07; --studio-radius:16px;
  --studio-wallpaper:url('/theme/Origo/brand/wallpaper.jpg');
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
}
html.dark, html[data-theme='dark'], html:has(#root .dark) {
  --studio-canvas:#171319; --studio-surface:#221c24; --studio-soft:#29212b;
  --studio-text:#f3eaf0; --studio-muted:#b5a5b2; --studio-line:#3b303c;
  --studio-accent:#ed9aba; --studio-accent-hover:#f5b3cd; --studio-tint:#3b2533;
  --studio-shadow:0 8px 28px #00000015;
}
body { background:var(--studio-canvas); color:var(--studio-text); -webkit-font-smoothing:antialiased; }
::selection { background:#a33f6830; }
#app { --n-color:var(--studio-surface); --n-text-color:var(--studio-text); }
html:not(.origo-auth) body::before {
  content:''; position:fixed; inset:0; pointer-events:none;
  background-image:linear-gradient(90deg,var(--studio-canvas),transparent),var(--studio-wallpaper);
  background-size:cover; background-position:center; opacity:.055;
}
#app .n-layout, #app article.flex-1 { background:transparent!important; color:var(--studio-text); }
:is(#app, html:not(.origo-admin) .n-drawer) .n-layout-sider, #app aside:not(.origo-auth-art) { background:var(--studio-surface)!important; border-color:var(--studio-line)!important; }
#app article.flex-1 > header { background:color-mix(in srgb,var(--studio-surface) 94%,transparent)!important; border-bottom:1px solid var(--studio-line); }
:is(#app, html:not(.origo-admin) .n-drawer) .side-menu {
  --n-item-text-color:var(--studio-muted)!important; --n-item-icon-color:var(--studio-muted)!important;
  --n-item-text-color-active:var(--studio-accent)!important; --n-item-text-color-active-hover:var(--studio-accent)!important;
  --n-item-icon-color-active:var(--studio-accent)!important; --n-item-icon-color-active-hover:var(--studio-accent)!important;
  --n-item-color-active:var(--studio-tint)!important; --n-item-color-active-hover:var(--studio-tint)!important;
  --n-item-color-hover:var(--studio-soft)!important; --n-border-radius:10px!important;
}
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item-group-title { color:var(--studio-muted)!important; font-size:11px; letter-spacing:.06em; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item-content { margin-inline:10px; border-radius:10px; transition:background .18s ease,color .18s ease; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item-content--selected::before { border-left-color:transparent!important; border-radius:10px!important; }
#app .n-card {
  --n-color:var(--studio-surface)!important; --n-text-color:var(--studio-text)!important;
  --n-title-text-color:var(--studio-text)!important; --n-border-color:var(--studio-line)!important;
  --n-border-radius:var(--studio-radius)!important;
  border-radius:var(--studio-radius)!important; box-shadow:var(--studio-shadow);
}
#app .n-card-header { font-weight:650; letter-spacing:-.015em; }
#app .n-button { --n-border-radius:9px!important; transition:background .18s ease,box-shadow .18s ease,transform .18s ease; }
#app .n-button--primary-type {
  --n-color:var(--studio-accent)!important; --n-color-hover:var(--studio-accent-hover)!important;
  --n-color-pressed:var(--studio-accent-hover)!important; --n-border:1px solid var(--studio-accent)!important;
  --n-border-hover:1px solid var(--studio-accent-hover)!important; --n-text-color:#fff!important;
}
html.dark #app .n-button--primary-type { --n-text-color:#301725!important; }
#app .n-input,#app .n-base-selection {
  --n-color:var(--studio-surface)!important; --n-text-color:var(--studio-text)!important;
  --n-border:1px solid var(--studio-line)!important; --n-border-hover:1px solid var(--studio-accent)!important;
  --n-border-focus:1px solid var(--studio-accent)!important; --n-border-radius:9px!important;
  --n-box-shadow-focus:0 0 0 3px color-mix(in srgb,var(--studio-accent) 14%,transparent)!important;
}
#app .n-data-table { --n-th-color:var(--studio-soft)!important; --n-td-color:var(--studio-surface)!important; --n-td-color-hover:var(--studio-soft)!important; --n-border-color:var(--studio-line)!important; --n-th-text-color:var(--studio-muted)!important; --n-td-text-color:var(--studio-text)!important; }
#app .n-list { --n-color:var(--studio-surface)!important; --n-text-color:var(--studio-text)!important; --n-border-color:var(--studio-line)!important; }
#app .n-breadcrumb { --n-item-text-color:var(--studio-muted)!important; --n-item-text-color-active:var(--studio-text)!important; }
#app .n-progress { --n-fill-color:var(--studio-accent)!important; }
#app a:focus-visible,#app button:focus-visible { outline:2px solid var(--studio-accent); outline-offset:3px; }
#origo-page {
  --origo-canvas:transparent!important; --origo-surface:var(--studio-surface)!important;
  --origo-text:var(--studio-text)!important; --origo-muted:var(--studio-muted)!important;
  --origo-line:var(--studio-line)!important; --origo-accent:var(--studio-accent)!important;
  --origo-accent-soft:var(--studio-tint)!important;
}
.origo-summary,.origo-machine,.origo-plan,.origo-node-group,.origo-device-list { box-shadow:var(--studio-shadow); }
.origo-button { background:var(--studio-surface); border-color:var(--studio-line); border-radius:9px; }
.origo-top h1 { letter-spacing:-.04em; }
.origo-content { transition:opacity .2s ease; }
@keyframes studio-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.origo-top,.origo-content,#app article.flex-1 > section { animation:studio-arrive .32s ease both; }
@media(hover:hover) {
  .origo-machine,.origo-plan { transition:border-color .2s ease,box-shadow .2s ease; }
  .origo-machine:hover,.origo-plan:hover { border-color:color-mix(in srgb,var(--studio-accent) 38%,var(--studio-line)); box-shadow:0 8px 26px #49223a0d; }
  #app button:active { transform:translateY(1px); }
}
@media(prefers-reduced-motion:reduce) {
  #app *,#root * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

#app article.flex-1 > section, #app article.flex-1 > section > section { background:transparent!important; }
#app .n-list--hoverable .n-list-item:hover { background:var(--studio-soft)!important; }
#app .text-muted { color:var(--studio-muted)!important; }
.origo-dashboard-intro { position:relative; overflow:hidden; margin:0 0 24px; padding:30px 28px; border:1px solid var(--studio-line); border-radius:18px; background:var(--studio-surface); box-shadow:var(--studio-shadow); }
.origo-dashboard-intro::after { content:''; position:absolute; inset:0 0 0 52%; background-image:linear-gradient(90deg,var(--studio-surface),transparent),var(--studio-wallpaper); background-position:center,center 38%; background-size:cover; opacity:.5; pointer-events:none; }
.origo-dashboard-intro > * { position:relative; z-index:1; }
.origo-dashboard-intro > span { color:var(--studio-accent); font-size:10px; font-weight:700; letter-spacing:.16em; }
.origo-dashboard-intro h1 { margin:10px 0 8px; color:var(--studio-text); font-size:30px; font-weight:650; letter-spacing:-.04em; }
.origo-dashboard-intro p { margin:0; color:var(--studio-muted); font-size:13px; }
#app.origo-dashboard article .n-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 20px 20px; }
#app.origo-dashboard article .n-list-item { min-width:0; border:1px solid var(--studio-line); border-radius:11px; padding:18px!important; }
#app.origo-dashboard article .n-list-item .n-list-item__suffix { margin-inline-start:12px; }
@media(max-width:640px) {
  .origo-dashboard-intro { padding:23px 20px; margin-bottom:16px; }
  .origo-dashboard-intro::after { left:45%; opacity:.32; }
  .origo-dashboard-intro h1 { font-size:26px; }
  #app.origo-dashboard article .n-list { grid-template-columns:1fr; padding:0 16px 16px; }
}
.origo-dashboard-intro { flex-shrink:0; min-height:158px; }
html:not(.origo-auth) #app { background:var(--studio-canvas)!important; }
#app article.flex-1 > section > section { background-image:linear-gradient(90deg,color-mix(in srgb,var(--studio-canvas) 98%,transparent),color-mix(in srgb,var(--studio-canvas) 96%,transparent)),var(--studio-wallpaper)!important; background-size:cover; background-position:center; }

/* Workspace composition: preserve native components and their action handlers. */
html:not(.origo-auth) #app article.flex-1 > section > section {
  padding:28px 32px!important; background-image:none!important;
}
#app article.flex-1 > header { height:68px!important; padding-inline:28px; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-layout-sider { box-shadow:8px 0 32px #190f1805; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-layout-sider .h-15 { height:88px; justify-content:flex-start; padding-inline:24px; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-layout-sider .h-15 img { width:29px; height:29px; filter:hue-rotate(70deg) saturate(.65); }
:is(#app, html:not(.origo-admin) .n-drawer) .n-layout-sider .title-text { font-size:19px; letter-spacing:-.045em; color:var(--studio-text)!important; line-height:1.2; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-layout-sider .title-text::after { content:'PERSONAL WORKSPACE'; display:block; margin-top:6px; font-size:8px; font-weight:600; letter-spacing:.12em; color:var(--studio-muted); }
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item-group-title { padding-top:14px; font-size:10px; font-weight:600; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item { height:42px; margin-top:4px; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item-content { height:40px; padding-left:16px!important; font-size:13px; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item-content--selected { box-shadow:inset 3px 0 var(--studio-accent); font-weight:650; }
/* Native routing stays on dashboard while an Origo page is shown. */
html:not(.origo-admin):has(#app.origo-view-active) .n-menu-item:not(.origo-menu-item) .n-menu-item-content--selected { box-shadow:none; font-weight:400; }
html:not(.origo-admin):has(#app.origo-view-active) .n-menu-item:not(.origo-menu-item) .n-menu-item-content--selected::before { background:transparent!important; }
:is(#app, html:not(.origo-admin) .n-drawer) .n-menu-item-content .n-menu-item-content__icon { font-size:17px!important; }
#app .n-breadcrumb { font-size:12px; }
.origo-dashboard-intro { padding:26px 28px; min-height:138px; margin-bottom:22px; border:0; border-radius:18px; background:var(--studio-soft); box-shadow:none; }
.origo-dashboard-intro h1 { font-size:32px; line-height:1.2; }
.origo-dashboard-intro::after { left:55%; opacity:.38; }
#app.origo-dashboard .studio-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:stretch; gap:20px; margin-bottom:20px!important; }
#app.origo-dashboard .studio-dashboard-grid > .n-card { margin:0!important; min-width:0; }
#app.origo-dashboard .studio-notice { grid-column:1/-1; border:1px solid var(--studio-line); box-shadow:none; }
#app.origo-dashboard .studio-notice .carousel-img { height:104px!important; min-height:104px; padding:18px 24px!important; background:var(--studio-surface)!important; justify-content:center!important; gap:10px; }
#app.origo-dashboard .studio-notice .n-carousel__slide > div { background:none!important; }
#app.origo-dashboard .studio-notice .carousel-img > div:first-child { position:absolute; top:18px; left:24px; }
#app.origo-dashboard .studio-notice .n-tag { background:var(--studio-tint)!important; color:var(--studio-accent)!important; border-radius:5px; }
#app.origo-dashboard .studio-notice .carousel-img p { margin:0; color:var(--studio-text); font-size:14px; padding-left:54px; }
#app.origo-dashboard .studio-notice .carousel-img p + p { font-size:11px; color:var(--studio-muted); }
#app.origo-dashboard .studio-notice .n-carousel { --n-dot-color:var(--studio-line)!important; --n-dot-color-active:var(--studio-accent)!important; }
#app.origo-dashboard .studio-notice .n-carousel__dots { bottom:14px; left:auto; right:20px; transform:none; }
#app.origo-dashboard .studio-subscription { background:linear-gradient(145deg,var(--studio-surface),var(--studio-soft)); }
#app.origo-dashboard .studio-subscription .n-card-header { padding-bottom:0; }
#app.origo-dashboard .studio-subscription .text-block { font-size:38px; font-weight:650; letter-spacing:-.045em; padding-top:20px; margin-bottom:12px; }
#app.origo-dashboard .studio-subscription .text-gray-500 { color:var(--studio-muted)!important; font-size:12px; line-height:1.7; }
#app.origo-dashboard .studio-subscription .n-progress { --n-fill-color:var(--studio-accent)!important; --n-rail-height:6px!important; }
#app.origo-dashboard .studio-subscription .n-progress-graph-line-fill { background:var(--studio-accent)!important; }
#app.origo-dashboard .studio-shortcuts .n-card-header { padding-bottom:16px; }
#app.origo-dashboard .studio-shortcuts .n-list { gap:8px; padding-inline:18px; padding-bottom:18px; }
#app.origo-dashboard .studio-shortcuts .n-list-item { padding:14px!important; background:var(--studio-soft); border-color:transparent; transition:background .18s,border-color .18s; }
#app.origo-dashboard .studio-shortcuts .n-list-item .text-base { font-size:13px; font-weight:600; }
#app.origo-dashboard .studio-shortcuts .n-list-item .text-sm { font-size:11px; color:var(--studio-muted)!important; line-height:1.6; margin-top:5px; }
#app.origo-dashboard .studio-shortcuts .n-list-item svg { width:18px; color:var(--studio-accent); }
#app.origo-dashboard .studio-shortcuts .n-list-item:hover { border-color:var(--studio-line); background:var(--studio-tint)!important; }
#app.origo-dashboard .origo-online-summary { margin-top:0; border-radius:16px; background:var(--studio-surface); }
/* Keep the scroll viewport stretched; .origo-shell owns content centering. */
#origo-page { padding:0!important; width:100%; max-width:none; margin-inline:0; }
.origo-top { padding:4px 0 22px; margin-bottom:24px; border-bottom:1px solid var(--studio-line); }
.origo-top h1 { font-size:30px; font-weight:650; }
.origo-top p { font-size:13px; line-height:1.8; }
.origo-plan { padding:26px; border-radius:18px; box-shadow:none; }
.origo-plan__head h2 { font-size:24px; letter-spacing:-.03em; }
.origo-plan--current { background:linear-gradient(145deg,var(--studio-surface),var(--studio-tint)); box-shadow:0 0 0 1px var(--studio-accent); }
.origo-plan__facts { padding-top:22px; border-top:1px solid var(--studio-line); }
.origo-plan__prices { padding-top:22px; }
.origo-plan__prices dd { font-size:20px; letter-spacing:-.03em; }
.origo-summary { border-radius:18px; box-shadow:none; }
.origo-machine,.origo-node-group,.origo-device-list { box-shadow:none; border-radius:16px; }
@media(min-width:1600px) { #app article.flex-1 > section > section { padding-inline:max(32px,calc((100vw - 1500px)/2))!important; } }
@media(max-width:1050px) { #app.origo-dashboard .studio-dashboard-grid { grid-template-columns:1fr; } .origo-dashboard-intro::after { left:45%; } }
@media(max-width:640px) {
  html:not(.origo-auth) #app article.flex-1 > section > section { padding:20px 16px!important; }
  #app article.flex-1 > header { height:58px!important; padding-inline:16px; }
  .origo-dashboard-intro { min-height:130px; padding:24px 20px; margin-bottom:16px; }
  .origo-dashboard-intro h1 { font-size:27px; }
  .origo-dashboard-intro p { max-width:210px; line-height:1.7; }
  #app.origo-dashboard .studio-dashboard-grid { gap:16px; }
  #app.origo-dashboard .studio-notice .carousel-img { height:122px!important; padding-inline:18px!important; }
  #app.origo-dashboard .studio-notice .carousel-img > div:first-child { left:18px; }
  #app.origo-dashboard .studio-notice .carousel-img p { font-size:12px; padding-left:48px; padding-right:10px; }
  #app.origo-dashboard .studio-shortcuts .n-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app.origo-dashboard .studio-shortcuts .n-list-item { padding:12px!important; }
  .origo-top h1 { font-size:26px; } .origo-plan { padding:22px; }
}
.studio-notice .carousel-img { position:relative; }
.studio-page-intro { flex-shrink:0; padding:4px 0 22px; margin-bottom:24px; border-bottom:1px solid var(--studio-line); }
.studio-page-intro h1 { margin:0; color:var(--studio-text); font-size:30px; font-weight:650; letter-spacing:-.04em; line-height:1.3; }
.studio-page-intro p { margin:8px 0 0; color:var(--studio-muted); font-size:13px; line-height:1.8; }
.origo-plan { background:var(--studio-surface); }
@media(min-width:1200px) { .origo-plan-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .origo-plan { padding:22px; } }
@media(max-width:640px) { .studio-page-intro h1 { font-size:26px; } }
/* Artwork belongs to the welcome area; data surfaces stay visually quiet. */
html:not(.origo-auth) body::before { display:none; }
.origo-plan:not(:has(.origo-plan__tags)) .origo-plan__facts { margin-top:60px; }
#app article .studio-settings-grid { display:grid!important; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:auto auto auto auto; align-content:start; gap:20px; }
.studio-settings-grid > .studio-page-intro { grid-column:1/-1; margin-bottom:4px; }
.studio-settings-grid > .n-card { margin:0!important; min-width:0; }
.studio-settings-wallet { grid-column:1; grid-row:2; }
.studio-settings-security { grid-column:2; grid-row:2/span 2; }
.studio-settings-notifications { grid-column:1; grid-row:3; }
.studio-settings-reset { grid-column:1/-1; }
.studio-settings-security .n-form,.studio-settings-security .n-form-item,.studio-settings-security .n-input { max-width:100%; }
@media(max-width:900px) {
  #app article .studio-settings-grid { grid-template-columns:1fr; gap:16px; }
  .studio-settings-grid > .n-card { grid-column:auto; grid-row:auto; }
}
#app .n-switch { --n-rail-color-active:var(--studio-accent)!important; --n-box-shadow-focus:0 0 0 3px var(--studio-tint)!important; }
html:not(.origo-admin) :is(.n-dialog,.n-modal.n-card,.n-dropdown-menu,.n-popover) {
  --n-color:var(--studio-surface)!important; --n-text-color:var(--studio-text)!important;
  --n-title-text-color:var(--studio-text)!important; --n-border-color:var(--studio-line)!important;
  --n-border-radius:14px!important; border-radius:14px!important;
  box-shadow:0 16px 60px #190f1820;
}
html:not(.origo-admin) .n-dropdown-menu { --n-option-text-color:var(--studio-text)!important; --n-option-color-hover:var(--studio-soft)!important; }
html:not(.origo-admin) :is(.n-dialog,.n-modal) .n-button--primary-type {
  --n-color:var(--studio-accent)!important; --n-color-hover:var(--studio-accent-hover)!important;
  --n-color-pressed:var(--studio-accent-hover)!important; --n-border:1px solid var(--studio-accent)!important;
  --n-text-color:#fff!important; --n-border-radius:9px!important;
}
html.dark:not(.origo-admin) :is(.n-dialog,.n-modal) .n-button--primary-type { --n-text-color:#301725!important; }
