/* Existing looks surfaces use the shared light/dark tokens; renderers keep their character palettes. */
.ns-looks-page { margin: 0; min-height: 100vh; color: var(--ns-text); background: var(--ns-bg); font-family: var(--ns-font); }
.ns-looks-page * { box-sizing: border-box; }
.ns-looks-door { max-width: 720px; margin: 0 auto; padding: clamp(24px, 7vw, 80px) 24px; }
.ns-looks-door h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 500; line-height: 1.2; margin: 12px 0 24px; }
.ns-looks-door p { max-width: 58ch; line-height: 1.6; }
.ns-looks-eyebrow, .ns-looks-note { color: var(--ns-text-2); }
.ns-looks-eyebrow { font-size: 14px; }
.ns-looks-next { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; margin-top: 16px; border-radius: var(--ns-radius); color: var(--ns-on-accent); background: var(--ns-gold); text-decoration: none; font-weight: 600; }
.ns-looks-next:focus-visible { outline: 3px solid var(--ns-text); outline-offset: 4px; }
.ns-looks-page .stage { background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.ns-looks-page .row :is(button, label) { border-color: var(--ns-border-strong); background: var(--ns-card); color: var(--ns-text); border-radius: var(--ns-radius); }
.ns-looks-page .row button[aria-pressed="true"] { border-color: var(--ns-gold-deep); box-shadow: inset 0 0 0 1px var(--ns-gold-deep); }
.ns-looks-page .row button:focus-visible { outline: 2px solid var(--ns-text); outline-offset: 3px; }
.ns-looks-page .lo-top select { border-color: var(--ns-border-strong); }
.ns-looks-page .lo-pack button { background: var(--ns-gold); color: var(--ns-on-accent); }
.ns-looks-page .lo-choices button { color: var(--ns-on-accent); }
.ns-looks-page .lo-price a { color: var(--ns-gold-light); }
.ns-looks-page :is(.lo-choices button, .lo-pack button, .lo-top select):focus-visible { outline-color: var(--ns-text); }
.ns-cat.ns-gp { --ns-text-primary: var(--ns-text); --ns-text-secondary: var(--ns-text-2); --ns-accent: var(--ns-gold-light); background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-font); }
.ns-cat.ns-gp .ns-cat-title { font-weight: 500; }
.ns-cat.ns-gp .ns-cat-caveat { background: var(--ns-surface); border-color: var(--ns-border); border-left-color: var(--ns-gold); }
.ns-cat.ns-gp > .container { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.ns-cat.ns-gp .ns-cat-title { color: var(--ns-text); }
.ns-cat.ns-gp h1 + p { color: var(--ns-text-2); }
.ns-cat.ns-gp :is(.ns-cat-role, .ns-cat-other, .mp-card-tag) { background: var(--ns-surface); border-color: var(--ns-border); color: var(--ns-text-2); }
.ns-cat.ns-gp .mp-card { background: var(--ns-card); border-color: var(--ns-border); }
.ns-cat.ns-gp .mp-card-desc { color: var(--ns-text-2); }
.ns-cat.ns-gp .mp-btn-try { background: var(--ns-surface); color: var(--ns-text); }
.ns-cat.ns-gp .ns-cat-btn--primary { background: var(--ns-gold); color: var(--ns-on-accent); }

/* Line 15822 (upskill-looks-6-r1): the Google-path look for the owner's 3D look card behind ai.features.looks_upskill_6.
   Every colour, the type family and the radius are read from the tokens in css/ns-tokens.css (.ns-gp scope, light by
   default, dark under prefers-color-scheme: dark); nothing here names a colour of its own. 375 px first: one column,
   full-width controls, 44 px touch targets, one clear next step (the gold "Give it this 3D look"). */

.ns-gp.ns-owned-3d-look {
    font-family: var(--ns-font);
    color: var(--ns-text);
    background: var(--ns-card);
    border: 1px solid var(--ns-border-strong);
    border-radius: var(--ns-radius);
}
.ns-gp.ns-owned-3d-look h2 { font-size: 20px; font-weight: 500; line-height: 1.3; }
.ns-gp.ns-owned-3d-look h3 { font-size: 16px; font-weight: 500; }
.ns-gp.ns-owned-3d-look p { color: var(--ns-text-2); font-size: 14px; }
.ns-gp.ns-owned-3d-look .ns-owned-3d-look__state,
.ns-gp.ns-owned-3d-look .ns-owned-3d-look__result,
.ns-gp.ns-owned-3d-look p[role="status"] { color: var(--ns-text); }
.ns-gp.ns-owned-3d-look label { font-size: 14px; font-weight: 500; }
.ns-gp.ns-owned-3d-look input[type="file"],
.ns-gp.ns-owned-3d-look textarea {
    color: var(--ns-text);
    background: var(--ns-surface);
    border: 1px solid var(--ns-border-strong);
    border-radius: 8px;
}
.ns-gp.ns-owned-3d-look .ns-owned-3d-look__view { background: var(--ns-surface); }
.ns-gp.ns-owned-3d-look button {
    font: 500 14px/1.2 var(--ns-font);
    color: var(--ns-text);
    background: transparent;
    border: 1px solid var(--ns-border-strong);
    border-radius: 22px;
    padding: 0 24px;
}
.ns-gp.ns-owned-3d-look button[type="submit"],
.ns-gp.ns-owned-3d-look [data-3d-describe-submit] {
    color: var(--ns-on-accent);
    background: var(--ns-gold);
    border-color: transparent;
}
.ns-gp.ns-owned-3d-look :focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 2px; }
.ns-gp.ns-owned-3d-look button:disabled { opacity: .5; }