/* Taste Skill 2.5: white-mint-tiles / Instrument Sans + DM Mono.
   Existing Auth application: all OTP, sync and editing behavior remains upstream. */
:root {
  --p-bg: #ffffff; --p-surface: #f3f3f3; --p-ink: #232323; --p-muted: #686868;
  --p-accent: #a1ffcb; --p-accent-ink: #232323; --p-action: #232323; --p-action-ink: #ffffff;
  --p-inv-bg: #232323; --p-inv-surface: #303030; --p-inv-ink: #ffffff; --p-inv-muted: #a4a4a4;
  --p-inv-accent: #a1ffcb; --p-inv-accent-ink: #232323; --p-inv-action: #a1ffcb; --p-inv-action-ink: #232323;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500; --display-tracking: -0.028em;
  --display-tracking-xl: -0.036em; --display-stretch: 96%; --ly-scale: 1.04;
  --auth-color-scheme:light;
  --auth-font:"Instrument Sans","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --auth-bg:#f6f7f5; --auth-surface:var(--p-bg); --auth-nav:var(--p-bg);
  --auth-ink:var(--p-ink); --auth-muted:#616860; --auth-placeholder:#717a71;
  --auth-border:#dce1da; --auth-divider:#e2e6df; --auth-hover:#f1f5ef;
  --auth-accent:#28734c; --auth-soft:#e5f7ec; --auth-mint:var(--p-accent);
  --auth-focus:#28734c; --auth-warning:#926218; --auth-track:#e9eee8;
  --auth-avatar:#f0f3ee; --auth-error:#b53640; --auth-shadow:0 8px 28px #18291c0b;
  --auth-dialog-shadow:0 24px 80px #07120b33;
}
:root[data-auth-theme="dark"] {
  --auth-color-scheme:dark;
  --auth-bg:#101411; --auth-surface:#191e1a; --auth-nav:#141915;
  --auth-ink:#eff3ed; --auth-muted:#a6b0a4; --auth-placeholder:#98a493;
  --auth-border:#343d34; --auth-divider:#2b342b; --auth-hover:#242d24;
  --auth-accent:var(--p-inv-accent); --auth-soft:#243c2c; --auth-focus:#8fdbaf;
  --auth-warning:#e7b45f; --auth-track:#30392f; --auth-avatar:#252e25;
  --auth-error:#ffa1a5; --auth-shadow:0 8px 28px #0002;
  --auth-dialog-shadow:0 24px 80px #0007;
}
body:has([data-auth-shell]) {
  margin:0; background:var(--auth-bg)!important; color:var(--auth-ink)!important;
  color-scheme:var(--auth-color-scheme);
}
[data-auth-shell] {
  min-height:100svh; font-family:var(--auth-font); color:var(--auth-ink);
  background:var(--auth-bg); -webkit-font-smoothing:antialiased;
}
[data-auth-shell] *,[data-auth-shell] *::before,[data-auth-shell] *::after { box-sizing:border-box; }
[data-auth-nav] {
  position:relative!important; flex:0 0 80px!important; height:80px;
  margin:0!important; padding:0 max(32px,calc((100% - 1200px)/2))!important;
  justify-content:space-between!important; gap:24px;
  background:var(--auth-nav)!important; color:var(--auth-ink)!important;
  border-bottom:1px solid var(--auth-divider)!important;
}
[data-auth-brand] { display:flex; align-items:center; gap:12px; white-space:nowrap; }
[data-auth-brand]>svg { width:64px; height:24px; color:var(--auth-ink); }
[data-auth-brand-name] { font-size:22px; line-height:1.2; font-weight:500; letter-spacing:-.6px; }
[data-auth-brand-divider] { height:20px; width:1px; margin:0 4px; background:var(--auth-border); }
[data-auth-brand-description] { color:var(--auth-muted); font-size:13px; }
[data-auth-nav-actions] { display:flex; align-items:center; gap:24px; }
[data-auth-security] { display:flex; align-items:center; gap:8px; color:var(--auth-muted); font-size:13px; white-space:nowrap; }
[data-auth-security] svg { width:16px; height:16px; color:var(--auth-accent); }
[data-auth-nav-actions]>button { width:40px; height:40px; padding:8px; border:1px solid var(--auth-border); border-radius:8px; color:var(--auth-muted)!important; }
[data-auth-theme-control] { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--auth-border); border-radius:12px; background:var(--auth-bg); }
[data-auth-theme-control] button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--auth-muted); cursor:pointer; }
[data-auth-theme-control] button[aria-pressed="true"] { color:var(--auth-ink)!important; background:var(--auth-surface)!important; box-shadow:0 1px 4px #101c1412; }
[data-auth-theme-control] svg { width:16px; height:16px; }
[data-auth-main] { width:min(1200px,calc(100% - 64px)); max-width:none!important; margin:0 auto!important; padding:56px 0 32px; align-items:stretch!important; }
[data-auth-heading] { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:32px; }
[data-auth-heading-copy] { min-width:0; }
[data-auth-heading-copy] h1 { display:flex; align-items:center; gap:16px; margin:0 0 12px!important; font:500 36px/1.25 var(--auth-font)!important; color:var(--auth-ink)!important; letter-spacing:-1.2px!important; }
[data-auth-count] { display:inline-flex; align-items:center; padding:5px 10px; border:1px solid var(--auth-border); border-radius:8px; background:var(--auth-surface); color:var(--auth-muted); font-size:13px; font-weight:400; line-height:1.5; letter-spacing:0; white-space:nowrap; }
[data-auth-heading-copy]>p { margin:0!important; color:var(--auth-muted)!important; font:400 14px/1.7 var(--auth-font)!important; }
[data-auth-search] { min-width:0!important; width:336px; flex-shrink:0; margin:0!important; }
[data-auth-search] .MuiInputBase-root { height:48px; min-height:48px; padding:0 16px 0 44px!important; border-radius:12px!important; background:var(--auth-surface)!important; color:var(--auth-ink)!important; box-shadow:none; }
[data-auth-search] fieldset { border:1px solid var(--auth-border)!important; border-radius:12px!important; }
[data-auth-search] .Mui-focused fieldset { border-color:var(--auth-focus)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-focus) 12%,transparent); }
[data-auth-search] .MuiInputBase-root::before { content:""; position:absolute; left:16px; top:16px; width:16px; height:16px; background:var(--auth-muted); mask:url('/ui/v6/icons/ui-search.svg') center/contain no-repeat; }
[data-auth-search] input { height:48px!important; padding:0!important; font:400 14px/48px var(--auth-font)!important; }
[data-auth-search] input::placeholder { opacity:1!important; color:var(--auth-placeholder); }
[data-auth-grid] { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:24px; margin:0!important; }
[data-auth-item] { position:relative; min-width:0; padding:0!important; }
[data-auth-copy] { display:block!important; width:100%; border-radius:16px!important; text-align:left!important; cursor:pointer; -webkit-tap-highlight-color:transparent; }
[data-auth-card] { display:flex; flex-direction:column; position:relative; min-width:0!important; min-height:228px; width:100%; padding:24px 24px 32px; overflow:hidden; border:1px solid var(--auth-border); border-radius:16px!important; background:var(--auth-surface)!important; box-shadow:0 1px 2px #18291c03; transition:border-color 140ms,box-shadow 180ms,transform 180ms cubic-bezier(.2,.8,.2,1); }
[data-auth-card-head] { display:flex; align-items:center; gap:12px; min-width:0; padding-right:32px; }
[data-auth-avatar] { display:flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; border:1px solid var(--auth-divider); border-radius:12px; background:var(--auth-avatar); color:var(--auth-muted); font-size:20px; font-weight:500; }
[data-auth-avatar] img { display:block; width:24px; height:24px; object-fit:contain; }
[data-auth-avatar] svg { width:20px; height:20px; }
[data-auth-avatar]:has(img) { background:#fff; border-color:#e3e7df; }
[data-auth-identity] { min-width:0; flex:1; }
[data-auth-identity] p:first-child { margin:0 0 4px!important; color:var(--auth-ink)!important; font:500 16px/1.4 var(--auth-font)!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
[data-auth-identity] p:nth-of-type(2) { margin:0!important; color:var(--auth-muted)!important; font:400 13px/1.5 var(--auth-font)!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
[data-auth-copy-symbol] { display:none; }
[data-auth-edit] { position:absolute; z-index:3; top:20px; right:16px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--auth-placeholder); cursor:pointer; }
[data-auth-edit] svg { width:17px; height:17px; }
[data-auth-code-row] { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; min-width:0; margin-top:32px; }
[data-auth-current] { min-width:0; flex-shrink:0; }
[data-auth-current]>p,[data-auth-next] p:first-child { margin:0 0 8px!important; color:var(--auth-muted)!important; font:400 13px/1.4 var(--auth-font)!important; }
[data-auth-current] h3 { margin:0!important; color:var(--auth-ink)!important; font:400 36px/1.15 var(--font-mono)!important; font-variant-numeric:tabular-nums; letter-spacing:-1.2px!important; white-space:nowrap; }
[data-auth-next] { flex-shrink:0; margin-left:auto; padding-bottom:3px; text-align:right; }
[data-auth-next] p:last-child { margin:0!important; color:var(--auth-muted)!important; font:400 14px/1.4 var(--font-mono)!important; letter-spacing:0; white-space:nowrap; }
[data-auth-validity] { position:absolute!important; bottom:16px; left:24px; right:24px; height:3px; border-radius:4px; overflow:hidden; background:var(--auth-track); }
[data-auth-validity]>div { height:3px!important; border-radius:4px; }
[data-auth-pin] { position:absolute; top:68px; right:24px; color:var(--auth-accent); }
[data-auth-pin] svg { width:13px; height:13px; }
[data-auth-empty] { grid-column:1/-1; padding:64px 24px; border:1px dashed var(--auth-border); border-radius:16px; background:var(--auth-surface); text-align:center; }
[data-auth-empty]>p { margin:0; color:var(--auth-muted)!important; font-size:14px; line-height:1.8; }
[data-auth-item]>.MuiStack-root { min-width:0!important; max-width:none!important; width:100%; min-height:228px; border:1px solid var(--auth-border); border-radius:16px!important; background:var(--auth-surface)!important; color:var(--auth-ink)!important; }
[data-auth-footer] { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:32px 0 0!important; padding:24px 0 0; border-top:1px solid var(--auth-divider); }
[data-auth-footer]>p { margin:0!important; color:var(--auth-muted)!important; font:400 13px/1.7 var(--auth-font)!important; }
[data-auth-footer] a { display:inline-flex; align-items:center; gap:8px; color:var(--auth-ink); font:500 13px/1.7 var(--auth-font); text-decoration:none; }
[data-auth-footer] svg { width:14px; height:14px; }
[data-auth-notice] { position:fixed; z-index:1500; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); margin:0; padding:12px 24px; border:1px solid var(--auth-border); border-radius:12px; background:var(--auth-surface); color:var(--auth-ink); font:400 14px/1.5 var(--auth-font); box-shadow:var(--auth-shadow); }
body:has([data-auth-shell]) .MuiSnackbarContent-root { color:var(--auth-ink)!important; background:var(--auth-surface)!important; border:1px solid var(--auth-border); border-radius:12px!important; box-shadow:var(--auth-shadow); font-family:var(--auth-font); }
body:has([data-auth-shell]) #auth-options .MuiPaper-root { border:1px solid var(--auth-border); border-radius:12px!important; background:var(--auth-surface)!important; color:var(--auth-ink); box-shadow:var(--auth-shadow); }
[data-auth-editor] { width:min(512px,calc(100vw - 32px)); max-width:512px; max-height:calc(100svh - 40px); margin:auto; padding:0; overflow:auto; border:1px solid var(--auth-border); border-radius:20px; background:var(--auth-surface); color:var(--auth-ink); color-scheme:var(--auth-color-scheme); font-family:var(--auth-font); box-shadow:var(--auth-dialog-shadow); }
[data-auth-editor]::backdrop { background:#08110b88; backdrop-filter:blur(4px); }
[data-auth-editor] * { box-sizing:border-box; }
[data-auth-editor-form] { margin:0; }
[data-auth-editor-form] header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px; border-bottom:1px solid var(--auth-divider); }
[data-auth-editor-form] header>div { display:flex; align-items:center; gap:12px; min-width:0; }
[data-auth-editor-icon] { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--auth-soft); color:var(--auth-accent); }
[data-auth-editor-icon] svg { width:20px; height:20px; }
[data-auth-editor-form] h2 { margin:0 0 4px; font-size:20px; font-weight:500; line-height:1.4; color:var(--auth-ink); }
[data-auth-editor-form] header p { margin:0; color:var(--auth-muted); font-size:13px; line-height:1.7; }
[data-auth-dialog-close] { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--auth-muted); cursor:pointer; }
[data-auth-dialog-close] svg { width:18px; height:18px; }
[data-auth-editor-fields] { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:24px; }
[data-auth-editor-fields]>label { display:flex; align-items:center; justify-content:space-between; margin-top:16px; color:var(--auth-ink); font-size:13px; font-weight:500; }
[data-auth-editor-fields]>label:first-child { margin-top:0; }
[data-auth-editor-fields]>label>span:not(:only-child) { color:var(--auth-muted); font-size:13px; font-weight:400; }
[data-auth-editor-fields]>input,[data-auth-editor-fields] textarea { width:100%; min-width:0; min-height:48px; padding:12px; border:1px solid var(--auth-border); border-radius:8px; outline:none; background:var(--auth-bg); color:var(--auth-ink); font:400 16px/1.5 var(--auth-font); }
[data-auth-editor-fields] input::placeholder,[data-auth-editor-fields] textarea::placeholder { color:var(--auth-placeholder); }
[data-auth-editor-fields]>input:focus,[data-auth-editor-fields] textarea:focus { border-color:var(--auth-focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-focus) 12%,transparent); }
[data-auth-editor-fields] textarea { resize:vertical; min-height:96px; max-height:192px; }
[data-auth-editor-fields] [data-auth-pin-option] { justify-content:flex-start; gap:12px; margin-top:16px; cursor:pointer; }
[data-auth-pin-option] input { width:18px; height:18px; margin:0; accent-color:var(--auth-accent); }
[data-auth-editor-fields] [data-auth-pin-option]>span { display:flex; flex-direction:column; gap:4px; color:var(--auth-ink); font-size:14px; font-weight:500; }
[data-auth-pin-option] small { color:var(--auth-muted); font-size:13px; font-weight:400; }
[data-auth-editor-error] { margin:8px 0 0; padding:12px; border:1px solid color-mix(in srgb,var(--auth-error) 25%,transparent); border-radius:8px; background:color-mix(in srgb,var(--auth-error) 5%,transparent); color:var(--auth-error); font-size:13px; line-height:1.7; }
[data-auth-editor-form] footer { display:flex; justify-content:flex-end; gap:12px; padding:16px 24px; border-top:1px solid var(--auth-divider); background:var(--auth-bg); }
[data-auth-editor-form] footer button { min-height:44px; padding:10px 20px; border:1px solid var(--auth-border); border-radius:8px; background:var(--auth-surface); color:var(--auth-ink); font:500 14px/1.5 var(--auth-font); cursor:pointer; }
[data-auth-editor-form] footer [data-auth-save] { background:var(--auth-mint); border-color:var(--auth-mint); color:#232323; }
[data-auth-editor-form] button:disabled { opacity:.5; cursor:default; }
[data-auth-theme-option],[data-auth-edit],[data-auth-dialog-close],[data-auth-editor-form] footer button { transition:background-color 140ms,border-color 140ms,color 140ms,transform 140ms cubic-bezier(.2,.8,.2,1); }
[data-auth-theme-option]:focus-visible,[data-auth-edit]:focus-visible,[data-auth-copy]:focus-visible,[data-auth-dialog-close]:focus-visible,[data-auth-editor-form] footer button:focus-visible { outline:2px solid var(--auth-focus); outline-offset:4px; }
@media(hover:hover) and (pointer:fine) {
  [data-auth-copy]:hover [data-auth-card] { border-color:var(--auth-focus); box-shadow:var(--auth-shadow); transform:translateY(-2px); }
  [data-auth-edit]:hover,[data-auth-dialog-close]:hover,[data-auth-theme-control] button:hover,[data-auth-nav-actions]>button:hover { background:var(--auth-hover)!important; color:var(--auth-ink)!important; }
  [data-auth-editor-form] footer button:hover:not(:disabled) { transform:translateY(-1px); border-color:var(--auth-focus); }
  [data-auth-editor-form] footer [data-auth-save]:hover:not(:disabled) { background:#baffda; }
  [data-auth-footer] a:hover { text-decoration:underline; text-underline-offset:4px; }
}
[data-auth-copy]:active [data-auth-card] { transform:translateY(0); background:var(--auth-hover)!important; }
[data-auth-editor-form] footer button:active:not(:disabled) { transform:translateY(1px) scale(.985); }
@media(max-width:1199px) {
  [data-auth-grid] { gap:16px; }
  [data-auth-card] { padding:24px 20px 32px; }
  [data-auth-current] h3 { font-size:32px!important; }
  [data-auth-validity] { left:20px; right:20px; }
}
@media(max-width:1023px) {
  [data-auth-grid] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  [data-auth-main] { padding-top:40px; }
  [data-auth-search] { width:280px; }
  [data-auth-nav-actions] { gap:16px; }
  [data-auth-brand-description],[data-auth-brand-divider] { display:none; }
}
@media(max-width:639px) {
  [data-auth-nav] { flex-basis:72px!important; height:72px; padding:0 24px!important; gap:12px; }
  [data-auth-brand] { gap:8px; }
  [data-auth-brand]>svg { width:56px; height:22px; }
  [data-auth-brand-name] { font-size:20px; }
  [data-auth-nav-actions] { gap:8px; }
  [data-auth-security] { display:none; }
  [data-auth-theme-control] { gap:0; padding:3px; border-radius:10px; }
  [data-auth-theme-control] button { width:32px; height:32px; }
  [data-auth-nav-actions]>button { width:36px; height:36px; }
  [data-auth-main] { width:calc(100% - 48px); padding:32px 0 24px; }
  [data-auth-heading] { flex-direction:column; align-items:stretch; gap:24px; margin-bottom:24px; }
  [data-auth-heading-copy] h1 { gap:12px; font-size:30px!important; margin-bottom:8px!important; }
  [data-auth-search] { width:100%; }
  [data-auth-grid] { grid-template-columns:minmax(0,1fr); gap:16px; }
  [data-auth-card] { min-height:224px; padding:24px 20px 32px; }
  [data-auth-current] h3 { font-size:36px!important; }
  [data-auth-edit] { width:40px; height:40px; top:16px; right:12px; }
  [data-auth-footer] { margin-top:24px!important; padding-top:24px; gap:12px; }
  [data-auth-editor-form] header,[data-auth-editor-fields] { padding:20px; }
  [data-auth-editor-form] header { gap:8px; }
  [data-auth-editor-icon] { display:none; }
  [data-auth-editor-form] footer { padding:16px 20px; }
  [data-auth-editor-form] footer button { flex:1; }
}
@media(max-width:359px) {
  [data-auth-nav] { padding:0 16px!important; }
  [data-auth-main] { width:calc(100% - 32px); }
  [data-auth-current] h3 { font-size:32px!important; }
  [data-auth-next] p:last-child { font-size:13px!important; }
}
@media(prefers-reduced-motion:reduce) {
  [data-auth-card],[data-auth-edit],[data-auth-dialog-close],[data-auth-editor-form] footer button { transition:none!important; transform:none!important; }
}