/* DAAILOK preview design system components.
   Canonical source: page CSS owns layout/content only; reusable controls live here. */
html[data-ds] :is([data-ui=button],[data-ui=field],[data-ui=panel],[data-ui=card],[data-ui=dialog],[data-ui=drawer]){
  box-sizing:border-box;
}
html[data-ds] [data-ui=button]{
  font-family:var(--ds-font-family);
  transition-duration:var(--ds-motion-normal);
}
html[data-ds] [data-ui=field]{
  font-family:var(--ds-font-family);
}
/* Independent luminous layer: no filter/backdrop/shadow interaction with glass buttons. */
html body .header nav .pill:is(.active,[aria-current="page"])::after,html body.section-page .header nav .pill:is(.active,[aria-current="page"])::after{display:none!important;content:none!important}
.nav-selection-light{display:none;position:absolute;pointer-events:none;left:4%;right:4%;height:22px;bottom:calc(-1.6svh - 10px);z-index:5;background:radial-gradient(ellipse at center,rgba(var(--ds-nav-halo-rgb),.46),rgba(var(--ds-nav-edge-rgb),.14) 38%,rgba(var(--ds-nav-edge-rgb),0) 74%);mix-blend-mode:screen;filter:none;border:0;box-shadow:none}
.nav-selection-light::before{content:"";position:absolute;top:10px;left:12%;right:12%;height:2px;border-radius:100%;background:linear-gradient(90deg,rgba(var(--ds-nav-core-rgb),0),rgba(var(--ds-nav-core-rgb),.75) 28%,var(--ds-nav-core) 50%,rgba(var(--ds-nav-core-rgb),.75) 72%,rgba(var(--ds-nav-core-rgb),0));box-shadow:0 0 5px rgba(var(--ds-nav-edge-rgb),.38)}
.header nav .pill:is(.active,[aria-current="page"])>.nav-selection-light{display:block}
@media(max-width:650px){.nav-selection-light{bottom:-15px}}

.ui-select-wrap{position:relative;display:inline-flex;min-width:140px;max-width:100%;vertical-align:middle}
.ui-select-native{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;pointer-events:none!important}
.ui-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;text-align:left;cursor:pointer}
.ui-select-trigger>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-popup{position:fixed;z-index:10020;display:flex;flex-direction:column;isolation:isolate;padding:4px;border:1px solid var(--ds-select-edge);border-radius:var(--ds-radius-card);background:var(--ds-select-surface);backdrop-filter:blur(18px) saturate(.85);-webkit-backdrop-filter:blur(18px) saturate(.85);box-shadow:var(--ds-select-popup-shadow);overflow:visible;max-height:300px}
.ui-select-options{overflow:auto;min-height:0;padding:12px;scroll-padding:12px}
.ui-select-popup>.ui-scroll-shell{min-height:0;width:100%}
.ui-select-popup>canvas{z-index:-1!important;pointer-events:none}
.ui-select-option{display:block;width:100%;border:1px solid transparent;border-radius:var(--ds-radius-option);padding:9px 12px;text-align:left;color:var(--ds-text);background:transparent;cursor:pointer}
.ui-select-option:is(:hover,:focus-visible){background:var(--ds-option-hover-bg);border-color:var(--ds-option-hover-edge);outline:none}
.ui-select-option[aria-selected=true]{color:var(--ds-accent-text);background:var(--ds-option-selected-bg);border-color:var(--ds-option-selected-edge)}
.ui-select-option:active{color:var(--ds-option-active-ink);background:var(--ds-option-active-bg);box-shadow:var(--ds-option-active-shadow)}
/* One scrollbar appearance and behavior for messages, admin tables and content. */
.ui-scroll-shell{display:grid;grid-template-columns:minmax(0,1fr) 10px;grid-template-rows:minmax(0,1fr) 10px;gap:4px;min-width:0;min-height:0;position:relative;flex:1}
.ui-scroll-shell>:is(.table-scroll,[data-ui-scroll]){grid-area:1/1;scrollbar-width:none!important}
.ui-scroll-shell>:is(.table-scroll,[data-ui-scroll])::-webkit-scrollbar{display:none!important}
.ui-scroll-track{border-radius:var(--ds-radius-pill);background:var(--ds-scroll-track-bg)}
.ui-scroll-shell>.ui-scroll-track{position:relative;min-width:0;min-height:0}
.ui-scroll-shell>.ui-scroll-track[data-axis=x]{grid-area:2/1;height:10px}
.ui-scroll-shell>.ui-scroll-track[data-axis=y]{grid-area:1/2;width:10px}
html body .ui-scroll-thumb{position:absolute!important;min-height:0!important;min-width:0!important;padding:0!important;border-radius:var(--ds-radius-pill)!important;touch-action:none;cursor:grab;border:var(--ds-scroll-border)!important;background:var(--ds-scroll-glass)!important;box-shadow:var(--ds-scroll-shadow)!important}
.ui-scroll-track[data-axis=x]>.ui-scroll-thumb{top:0;height:10px}
.ui-scroll-track[data-axis=y]>.ui-scroll-thumb{left:0;width:10px}
html body .ui-scroll-thumb:is(:active,[aria-pressed=true],[data-glass-selected=true]){cursor:grabbing;border:var(--ds-scroll-active-border)!important;background:var(--ds-scroll-active-glass)!important;box-shadow:var(--ds-scroll-active-shadow)!important}

/* Shared component implementation. Page layouts and optical canvases stay in their original owners. */
.ui-select-trigger{font:inherit;border:1px solid var(--ds-select-edge);border-radius:var(--ds-radius-control);background:var(--ds-select-surface);color:var(--ds-select-text);padding:10px 12px;min-height:var(--ds-control-height);backdrop-filter:blur(18px) saturate(.85);-webkit-backdrop-filter:blur(18px) saturate(.85);box-shadow:var(--ds-select-trigger-shadow)}
.ui-select-popup:popover-open{margin:0}
 .ui-scroll-track[hidden]{display:none!important}
.ui-scroll-thumb{touch-action:none}
.ui-auth-form{display:grid;gap:var(--ds-form-gap);margin:0}
.ui-auth-form label{display:grid;gap:6px;font-size:var(--ds-font-caption);line-height:1.6}
.ui-auth-form h2{font-size:var(--ds-font-auth-title);font-weight:450;letter-spacing:-.035em;margin:2px 0 7px}
.ui-auth-field-surface{display:block;border-radius:var(--ds-radius-auth)}
.ui-auth-field-surface:has(input:autofill){background:var(--ds-field-glass)}
.ui-auth-form input{box-sizing:border-box;height:38px;padding:0 11px;border-radius:var(--ds-radius-auth);font:inherit;width:100%;min-width:0}
.ui-auth-form .website-auth-submit{display:flex;align-items:center;justify-content:center;min-height:40px;padding:10px 16px;border:1px solid var(--ds-edge);border-radius:var(--ds-radius-auth);background:transparent;color:inherit;isolation:isolate;font:inherit;font-size:var(--ds-font-caption)}
.ui-auth-form .website-account-switch{background:transparent;text-align:left;color:inherit;font-size:var(--ds-font-caption);border:0}
.ui-auth-form .website-account-kicker,.ui-auth-form .website-account-message{font-size:var(--ds-font-caption);line-height:1.6;color:inherit}
html[data-ds] :is(button,input,textarea,select,a[data-ui]):focus-visible{outline:2px solid var(--ds-yellow);outline-offset:var(--ds-focus-offset)}
/* A parent panel never gets the button's pressed state. */
.ui-select-option{font-size:var(--ds-font-caption)}

/* Messages and tasks share the compact director-account width and page offset. */
html body .website-notification-drawer{width:min(var(--ds-drawer-width),calc(100vw - 36px))!important}
@media(min-width:901px){body.website-notification-drawer-open{--notification-drawer-reserve:calc(var(--ds-drawer-width) + var(--ds-drawer-gap))}}
@media(max-width:900px){html body .website-notification-drawer{width:min(var(--ds-drawer-width),calc(100vw - 20px))!important}}
.website-notification-drawer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;padding:16px;flex-wrap:nowrap}
.website-notification-drawer-head>div:first-child{grid-column:1;grid-row:1;min-width:0}
.website-notification-drawer-head>.website-notification-drawer-close{grid-column:2;grid-row:1;align-self:start;margin-left:auto}
.website-notification-drawer-tools{grid-column:1/-1;grid-row:2;width:auto;justify-content:flex-start;flex-wrap:wrap;gap:6px}
.website-notification-drawer-tools:empty{display:none}
.website-notification-drawer-tools button{white-space:normal!important}

.website-notification-drawer .website-message-item{min-width:0;overflow-wrap:anywhere}

html[data-ds] :is(.website-account-form,.preview-auth-form) input{border:1px solid var(--ds-edge)!important;background:var(--ds-field-glass)!important;color:var(--ds-text)!important;caret-color:var(--ds-text);backdrop-filter:blur(var(--ds-blur)) saturate(.82);box-shadow:var(--ds-inset)}
html[data-ds] [data-ui=field]::placeholder{color:var(--ds-muted)!important;opacity:1}
html[data-ds] :is(.website-account-form,.preview-auth-form) input:is(:autofill,:-webkit-autofill){-webkit-text-fill-color:var(--ds-text)!important;background-clip:text!important;-webkit-background-clip:text!important;box-shadow:var(--ds-inset)!important}

@layer daailok-readability {
/* Text roles only: these rules do not paint or resize page surfaces. */
html[data-ds] :where(.community-heading p,.community-tab,.community-access-note p,.community-side-caption,.community-side-empty,.community-profile-identity small,.community-post-top,.community-post-stats,.membership-note,.membership-card small){font-size:var(--ds-font-caption)!important}
html[data-ds] :where(.community-post p,.community-dialog p){font-size:var(--ds-font-body)!important}
html[data-ds] :where(.community-side-actions .pill,.community-side-actions .director-enter[data-glass-panel],.community-compose,.contact-mail-link){font-size:var(--ds-font-caption)!important}
html[data-ds] :where(.director-frame-nav,.director-summary p,.director-summary small,.community-side-title>span,.community-profile-identity small,.community-profile-stats span,.community-side-caption,.community-side-empty,.community-empty,.community-empty b,.membership-card small,.membership-card p,.membership-note){color:var(--ds-muted)!important;opacity:1!important}
html[data-ds] body.admin-page :where(p,small,.hint,.admin-page-heading>span,.sidebar-foot a,label,.community-admin-stats span,.test-access-badge.disabled){color:var(--ds-muted)!important;opacity:1!important}
html[data-ds] body#daailokStudio :where(#layerCount,.drag-grip,.layer-lock,.layer-delete,.shot-controls small){color:var(--ds-admin-muted)!important;opacity:1!important}
/* The production silver background is medium gray, not white. Use solid ink, not translucent gray type. */
html[data-ds][data-website-theme=silver] body :where(.header button,.director-frame-top,.director-frame-top span,.director-overline,.director-tagline,.director-summary p,.director-summary small,.director-product em,.director-enter-label,.community-heading p,.community-heading .eyebrow,.community-access-note,.community-access-note p,.community-access-note span,.community-toolbar button,.community-search input,.community-empty,.community-side-title>span,.community-side-title>button,.community-profile-identity small,.community-profile-stats span,.community-side-caption,.community-side-empty,.membership p,.membership small,.membership li,.membership-card h3,#membershipCurrent,.contact-overline,.contact-intro>p,.contact-list dt,.contact-list dd,.contact-list a,.contact-support-qr figcaption,.contact-support-qr figcaption strong,.contact-support-qr figcaption span,.contact-mail-link,.contact-photo-note,.contact-photo-note span,.contact-photo-note small){color:var(--ds-text)!important;opacity:1!important}
html[data-ds][data-website-theme=silver] body :where(.community-compose,.community-tab.active,.membership-action){color:var(--ds-accent-text)!important}
/* Dark glass stays dark in the light studio. Keep its text palette light. */
/* Admin retains the approved dark glass surfaces in both site theme preferences. */
html[data-ds] body.admin-page .ai-card-head b{color:var(--ds-text)!important}
html[data-ds][data-studio-theme=light] body#daailokStudio :where(.folder-count,.layer-icon,#selectionSymbol){color:var(--ds-ink-light)!important;opacity:1!important}
html[data-ds][data-studio-theme=light] body#daailokStudio .ai-panel :where(h2,#aiSend,textarea){color:var(--ds-surface-ink,var(--ds-ink-dark))!important}
html[data-ds][data-studio-theme=light] body#daailokStudio .ai-panel textarea::placeholder{color:var(--ds-surface-ink,var(--ds-ink-dark))!important;opacity:1}
html[data-ds][data-studio-theme=light] body#daailokStudio .studio-theme-switch button{color:var(--ds-studio-light-switch-ink)!important}

html[data-ds]:not([data-website-theme=silver]) .director-frame-nav span{color:var(--ds-director-nav-text)!important;opacity:1!important}
html[data-ds]:not([data-website-theme=silver]) .community-compose{color:var(--ds-community-compose-text)!important}
html[data-ds][data-website-theme=silver] .community-login-avatar{background:var(--ds-avatar-dark-bg)!important;color:var(--ds-login-yellow)!important}
html[data-ds][data-studio-theme=light] body#daailokStudio :where(#layerCount,.drag-grip,.layer-lock,.layer-delete){color:var(--ds-ink-light)!important;opacity:1!important}

html[data-ds] body#daailokStudio :where(.empty-folder-note,.timeline-head small){color:var(--ds-subtle-on-dark)!important;opacity:1!important}
html[data-ds][data-studio-theme=light] body#daailokStudio .layer-eye{color:var(--ds-ink-light)!important}
html[data-ds][data-studio-theme=light] body#daailokStudio .studio-theme-switch button{color:var(--ds-ink-dark)!important}
html[data-ds][data-studio-theme=light] body#daailokStudio #toggleGridPropBtn{color:var(--ds-ink-light)!important}

html[data-ds] body#daailokStudio .shot-add small{color:var(--ds-subtle-on-dark)!important;opacity:1!important}


html[data-ds] body.admin-page :where(.empty,#communityAdminEmpty,#supportPreview span){color:var(--ds-muted)!important;opacity:1!important}
html[data-ds] body.admin-page [data-ui=button]{color:var(--ds-text)!important}
html[data-ds] body.admin-page .nav-btn.active{color:var(--ds-accent-text)!important}
html[data-ds][data-website-theme=silver] .website-account-dialog :where(span,label,h2,button){color:var(--ds-text)!important;opacity:1!important}
html[data-ds][data-website-theme=silver] .community-search :where(input,button){color:var(--ds-ink-light)!important}
html[data-ds][data-website-theme=silver] .community-search input::placeholder{color:var(--ds-ink-light)!important;opacity:1}
html[data-ds][data-website-theme=silver] .ui-select-option[aria-selected=true]{color:var(--ds-accent-text)!important}
html[data-ds][data-website-theme=silver] .community-avatar:not(:has(img)){background:var(--ds-avatar-dark-bg)!important;color:var(--ds-login-yellow)!important}
html[data-ds] .image-label,html[data-ds] .expand{color:var(--ds-ink-light)!important;text-shadow:var(--ds-image-label-shadow)}

html[data-ds] body.admin-page :where(h1,h2,h3,h4,b,strong,li,td,th,.community-popular-admin span){color:var(--ds-text)!important}
html[data-ds] body.admin-page .help-document :where(p,li,span,td,th,h1,h2,h3,b,strong){color:var(--ds-document-ink)!important;opacity:1!important}
html[data-ds] .expand{background:var(--ds-overlay-strong)!important;color:var(--ds-ink-light)!important}

html[data-ds][data-website-theme=silver] :where(.hero-kicker,.hero-description,.card-copy h3,.card-copy p,.gallery-copy h3,.gallery-copy span,.visual-note){color:var(--ds-text)!important;opacity:1!important}

html[data-ds] .community-heading p{line-height:18.7px!important}
html[data-ds] .community-access-note p{line-height:13.95px!important}

html[data-ds] body.admin-page #supportQrPreview span{color:var(--ds-muted)!important;opacity:1!important}
/* A narrow text outline protects captions when the original moving light crosses them. */

/* Keep the gray/photo background untouched. A 1px outer halo supports small ink at its darkest stops. */
html[data-ds][data-website-theme=silver] :where(.director-product em,.hero-description,.card-copy h3,.card-copy p,.gallery-copy h3,.gallery-copy span,.visual-note,.membership-note,.contact-photo-note span,.contact-photo-note small,.community-toolbar .community-tab){color:var(--ds-ink-dark)!important;-webkit-text-stroke:var(--ds-stroke-on-light);paint-order:stroke fill}
html[data-ds][data-website-theme=silver] .community-search :where(button,input){color:var(--ds-ink-light)!important;-webkit-text-stroke:var(--ds-stroke-on-dark);paint-order:stroke fill}
html[data-ds][data-studio-theme=light] body#daailokStudio .test-access-note{color:var(--ds-ink-light)!important;opacity:1!important}

html[data-ds][data-studio-theme=light] body#daailokStudio :where(.studio-theme-switch button,.ai-mode){color:var(--ds-ink-dark)!important;-webkit-text-stroke:var(--ds-stroke-on-light);paint-order:stroke fill}
html[data-ds] body [data-ui=document] :where(p,li,span,td,th){color:inherit!important;font-size:var(--ds-font-body)!important;line-height:1.85!important;opacity:1!important}
}

/* Shape variants are shared; page CSS only supplies placement and optical context. */
@layer daailok-controls {
html[data-ds] [data-ui=button][data-ui-shape=pill]{border-radius:var(--ds-radius-pill)!important}
html[data-ds] [data-ui=button][data-ui-shape=control]{border-radius:var(--ds-radius-control)!important}
html[data-ds] [data-ui=button][data-ui-shape=auth]{border-radius:var(--ds-radius-auth)!important}
html[data-ds] :is(.website-account-form,.preview-auth-form) input{border-radius:var(--ds-radius-auth)!important;font-size:var(--ds-font-body)!important}
html[data-ds] .ui-select-trigger{font-size:var(--ds-font-caption)!important;border-radius:var(--ds-radius-control)!important}
html[data-ds] body.admin-page .ui-select-trigger{font-size:var(--ds-font-body)!important}
}


/* Preserve the approved community row heights while enlarging its small copy. */

/* One width token controls all three drawers, including responsive limits. */
html body .website-account-popover{width:min(var(--ds-drawer-width),calc(100vw - 36px))!important}
@media(min-width:901px){body.website-account-panel-open{--notification-drawer-reserve:calc(var(--ds-drawer-width) + var(--ds-drawer-gap))}}
@media(max-width:900px){html body .website-account-popover{width:min(var(--ds-drawer-width),calc(100vw - 20px))!important}}


@layer daailok-readability {
html[data-ds][data-website-theme=silver] .community-avatar:not(:has(img)){-webkit-text-stroke:var(--ds-stroke-on-dark);paint-order:stroke fill}
}

html[data-ds] .ui-auth-form .website-account-kicker{color:var(--ds-muted)!important}

@layer daailok-readability {
html[data-ds] body#daailokStudio :where(.drawer-kicker,.drawer-card span,.drawer-item em,.camera-settings small,.camera-settings-head span,.camera-preset-label,.camera-filter-label,.camera-metric-label,.camera-metric b,.prop-block-title){color:var(--ds-muted)!important;opacity:1!important}
html[data-ds][data-studio-theme=light] body#daailokStudio :is(.drawer-icon,.axis-input span){color:var(--ds-ink-light)!important;opacity:1!important}
html[data-ds][data-studio-theme=light] body#daailokStudio #saveStatusLabel{color:var(--ds-ink-dark)!important;opacity:1!important}
html[data-ds][data-studio-theme=light] body#daailokStudio [data-camera-aspect].active{color:var(--ds-yellow)!important}
html[data-ds][data-studio-theme=light] body#daailokStudio .shot-card.active .shot-info :is(b,small){color:var(--ds-ink-dark)!important;opacity:1!important}
html[data-ds][data-studio-theme=light] body#daailokStudio .layer-row.active .drag-grip{color:var(--ds-surface-ink,var(--ds-ink-light))!important;-webkit-text-stroke:var(--ds-stroke-drag);paint-order:stroke fill}
}



/* Verification inputs, shared by the preview studio and account dialogs. */
.ui-verification-row{display:flex;align-items:flex-end;gap:8px;width:100%;min-width:0}
.ui-verification-row>label{flex:1;min-width:0}
.ui-verification-row input{max-width:100%;box-sizing:border-box}
.ui-verification-row .ui-code-send{
  flex:0 0 auto;white-space:nowrap;min-height:38px;padding:8px 11px;
  border-radius:11px;border:1px solid rgba(160,160,160,.35);
  background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer
}
.ui-verification-row .ui-code-send:disabled{opacity:.52;cursor:default}

/* OTP states use the existing form/optical tokens and never change the page layout. */
.ui-verification-row[hidden],.ui-auth-form [hidden],.website-profile-form [hidden]{display:none!important}
html[data-ds] .ui-verification-row{align-items:flex-end;min-width:0;max-width:100%;gap:8px}
html[data-ds] .ui-verification-row>label{min-width:0;flex:1 1 auto}
html[data-ds] .ui-verification-row .ui-code-send{
  box-sizing:border-box;flex:0 0 auto;min-width:98px;height:38px;min-height:38px;
  padding:0 10px;border-radius:var(--ds-radius-auth);
  border:1px solid var(--ds-edge);background:var(--ds-field-glass);
  color:var(--ds-text);font-family:inherit;font-size:var(--ds-font-caption);
  line-height:1.2;transition:background .2s,border-color .2s,opacity .2s;
}
html[data-ds] .ui-verification-row .ui-code-send:not(:disabled):hover{
  border-color:var(--ds-yellow);background:var(--ds-field-glass);cursor:pointer;
}
html[data-ds] .ui-verification-row .ui-code-send:disabled{opacity:.48;cursor:default}
html[data-ds] .ui-auth-help{margin:-4px 0 1px;color:var(--ds-muted);font-size:var(--ds-font-caption);line-height:1.6}
html[data-ds] .ui-auth-form .website-account-message,
html[data-ds] .website-profile-form .website-account-message{
  display:block;min-height:16px;overflow-wrap:anywhere;line-height:1.5;
}

/* Keep long signup and account forms fully reachable inside the glass dialog. */
html[data-ds] .website-account-dialog[data-glass-panel]{max-height:92dvh;overflow:hidden}
html[data-ds] .website-account-dialog[data-glass-panel] .website-account-dialog-body{
  box-sizing:border-box;max-height:calc(92dvh - 65px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ds-edge) transparent;
}