/* Sync themes: seven looks for Sync Box (Sync Home and the console). Generated by build-themes.js; do not edit by hand.
   Canonical: claude-sync/docs/sync-look/sync-themes.css, copied to syncbox/core/public/. Loaded after every other stylesheet.
   <html data-theme="sync|tonal|nord|paper|midnight|graphite|christmas" data-mode="light|dark">; sync-theme.js resolves Automatic.
   Any element can carry the two attributes (the theme picker's previews do). Design, sources, contrast: docs/sync-themes.md */
/* Sync: Apple, monochrome Liquid Glass */
[data-theme=sync] {
  --ground: #ececf0; --card: #fbfbfc; --raised: #f6f6f8; --top: #fdfdfe; --glass: rgba(250, 250, 252, .74); --glass-solid: #f7f7f9;
  --quiet: rgba(118, 118, 128, .13); --fill2: rgba(118, 118, 128, .16); --track: rgba(118, 118, 128, .16); --scrim: rgba(0, 0, 0, .28);
  --tx1: #1c1c1e; --tx2: rgba(60, 60, 67, .84); --tx3: rgba(60, 60, 67, .74); --tx4: rgba(60, 60, 67, .36); --sep: rgba(60, 60, 67, .13);
  --edge: rgba(60, 60, 67, .09); --ink-fill: #1c1c1e; --on-ink: #f2f2f4; --accent: #1c1c1e; --on-accent: #f2f2f4;
  --accent-soft: rgba(28, 28, 30, .07); --tile-on: #fdfdfe; --on-tile: #1c1c1e; --on-tile2: rgba(60, 60, 67, .8); --info: #1d64bf;
  --amber: #c98000; --green: #2a9d4b; --blue: #1f7ae0; --orange: #e8741c; --teal: #12999a; --indigo: #5856d6; --cyan: #138fc2;
  --on-tone: #fdfdfe; --a-amber: #935700; --a-green: #1f7a3a; --a-blue: #1d64bf;
  --sh-card: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(60, 60, 67, .08), 0 1px 2px rgba(0, 0, 0, .04), 0 18px 36px -26px rgba(0, 0, 0, .34);
  --sh-float: 0 0 0 1px rgba(60, 60, 67, .1), 0 10px 30px -10px rgba(0, 0, 0, .3); --sh-sheet: 0 30px 80px -20px rgba(0, 0, 0, .45);
  --spec: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5); --blur: 22px; --ok: #1a6b33;
  --ok-bg: rgba(26, 107, 51, .10); --warn: #7d5100; --warn-bg: rgba(201, 128, 0, .12); --alert: #b4392f; --alert-bg: rgba(180, 57, 47, .07);
  --red: #b4392f; --a-red: #b4392f; --mark-ink: #1c1c1e; --wall-tint: #fbfbfc;
  color-scheme: light;
}
[data-theme=sync][data-mode=dark] {
  --ground: #0b0b0c; --card: #1c1c1e; --raised: #2c2c2e; --top: #3a3a3c; --glass: rgba(38, 38, 41, .78); --glass-solid: #232325;
  --quiet: rgba(120, 120, 128, .24); --fill2: rgba(120, 120, 128, .32); --track: rgba(120, 120, 128, .32); --scrim: rgba(0, 0, 0, .55);
  --tx1: #f5f5f7; --tx2: rgba(235, 235, 245, .78); --tx3: rgba(235, 235, 245, .62); --tx4: rgba(235, 235, 245, .28);
  --sep: rgba(84, 84, 88, .55); --edge: rgba(255, 255, 255, .07); --ink-fill: #ececee; --on-ink: #1c1c1e; --accent: #f2f2f4;
  --on-accent: #1c1c1e; --accent-soft: rgba(255, 255, 255, .12); --tile-on: #e9e9ec; --on-tile: #1c1c1e; --on-tile2: rgba(60, 60, 67, .84);
  --info: #6cb4ff; --amber: #ffb340; --green: #40c870; --blue: #4f9dff; --orange: #ff9a52; --teal: #3fc6cb; --indigo: #8b88ff; --cyan: #5ac8f0;
  --on-tone: #1c1c1e; --a-amber: #ffc24a; --a-green: #4cd87a; --a-blue: #6cb4ff;
  --sh-card: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .06);
  --sh-float: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -16px rgba(0, 0, 0, .8);
  --sh-sheet: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -20px rgba(0, 0, 0, .8);
  --spec: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07); --blur: 30px; --ok: #4cd27a;
  --ok-bg: rgba(12, 58, 26, .5); --warn: #ffc94a; --warn-bg: rgba(58, 42, 0, .5); --alert: #ee8a80; --alert-bg: rgba(58, 16, 12, .5);
  --red: #ee8a80; --a-red: #ee8a80; --mark-ink: #f5f5f7; --wall-tint: #1c1c1e;
  color-scheme: dark;
}
/* Tonal: Material 3, sage tonal surfaces */
[data-theme=tonal] {
  --ground: #f3f6f3; --card: #fbfdfb; --raised: #eef2ef; --top: #fbfdfb; --glass: #e8eeea; --glass-solid: #e8eeea; --quiet: #e2e9e4;
  --fill2: #d6e0da; --track: #d6e0da; --scrim: rgba(16, 29, 24, .32); --tx1: #171d1a; --tx2: #3f4945; --tx3: #56605b; --tx4: #a3aea8;
  --sep: #d6ddd8; --edge: #dfe5e1; --ink-fill: #2b6a5a; --on-ink: #f3f9f6; --accent: #2b6a5a; --on-accent: #f3f9f6;
  --accent-soft: rgba(43, 106, 90, .12); --tile-on: #c9ebdf; --on-tile: #0e2a22; --on-tile2: #2f4d44; --info: #2e5f8f; --amber: #b37800;
  --green: #3f8f52; --blue: #3f72b5; --orange: #c96a2a; --teal: #2b8a7f; --indigo: #5f63b8; --cyan: #2d84a8; --on-tone: #fbfdfb;
  --a-amber: #7d5800; --a-green: #2e6b3a; --a-blue: #2e5f8f; --sh-card: 0 0 0 1px #e1e7e3;
  --sh-float: 0 1px 3px rgba(16, 29, 24, .12), 0 4px 12px -2px rgba(16, 29, 24, .1); --sh-sheet: 0 8px 30px -6px rgba(16, 29, 24, .3);
  --spec: inset 0 0 0 1px rgba(16, 29, 24, .04); --blur: 0px; --ok: #1a6b33; --ok-bg: rgba(26, 107, 51, .10); --warn: #7d5100;
  --warn-bg: rgba(201, 128, 0, .12); --alert: #b4392f; --alert-bg: rgba(180, 57, 47, .07); --red: #b4392f; --a-red: #b4392f;
  --mark-ink: #1c1c1e; --wall-tint: #fbfdfb;
  color-scheme: light;
}
[data-theme=tonal][data-mode=dark] {
  --ground: #0f1412; --card: #1a201d; --raised: #242a27; --top: #2f3532; --glass: #1f2522; --glass-solid: #1f2522; --quiet: #29302d;
  --fill2: #323a36; --track: #3a433e; --scrim: rgba(0, 0, 0, .5); --tx1: #dee4e0; --tx2: #bfc9c3; --tx3: #9ea8a3; --tx4: #5f6a65;
  --sep: #333b37; --edge: #262d2a; --ink-fill: #8fd5bf; --on-ink: #00382d; --accent: #8fd5bf; --on-accent: #00382d;
  --accent-soft: rgba(143, 213, 191, .14); --tile-on: #2a5045; --on-tile: #dcf5ec; --on-tile2: #b3d6ca; --info: #a3c8f0; --amber: #e9b54f;
  --green: #7fcf8e; --blue: #8cb6ec; --orange: #f0a070; --teal: #7fd3c4; --indigo: #b3b6ff; --cyan: #86cbe6; --on-tone: #0f1412;
  --a-amber: #e9c16c; --a-green: #8fd69a; --a-blue: #a3c8f0; --sh-card: 0 0 0 1px #262d2a;
  --sh-float: 0 0 0 1px #2c3330, 0 8px 24px -8px rgba(0, 0, 0, .6); --sh-sheet: 0 0 0 1px #2c3330, 0 20px 50px -12px rgba(0, 0, 0, .7);
  --spec: inset 0 0 0 1px rgba(255, 255, 255, .03); --blur: 0px; --ok: #4cd27a; --ok-bg: rgba(12, 58, 26, .5); --warn: #ffc94a;
  --warn-bg: rgba(58, 42, 0, .5); --alert: #ee8a80; --alert-bg: rgba(58, 16, 12, .5); --red: #ee8a80; --a-red: #ee8a80; --mark-ink: #f5f5f7;
  --wall-tint: #1a201d;
  color-scheme: dark;
}
/* Nord: Arctic calm, Polar Night and Snow Storm */
[data-theme=nord] {
  --ground: #e5e9f0; --card: #f2f4f8; --raised: #eceff4; --top: #f8f9fb; --glass: rgba(236, 239, 244, .82); --glass-solid: #eceff4;
  --quiet: rgba(76, 86, 106, .1); --fill2: rgba(76, 86, 106, .14); --track: rgba(76, 86, 106, .16); --scrim: rgba(46, 52, 64, .32);
  --tx1: #2e3440; --tx2: #3b4252; --tx3: #4c566a; --tx4: rgba(76, 86, 106, .4); --sep: rgba(76, 86, 106, .16); --edge: rgba(76, 86, 106, .12);
  --ink-fill: #3b4252; --on-ink: #eceff4; --accent: #4c6d94; --on-accent: #f2f4f8; --accent-soft: rgba(94, 129, 172, .14); --tile-on: #f8f9fb;
  --on-tile: #2e3440; --on-tile2: #4c566a; --info: #3d5e84; --amber: #b08024; --green: #68874f; --blue: #5e81ac; --orange: #c4704f;
  --teal: #4e8a88; --indigo: #8a6f9e; --cyan: #5d9cb0; --on-tone: #f2f4f8; --a-amber: #80600f; --a-green: #4a6e34; --a-blue: #466a92;
  --sh-card: 0 0 0 1px rgba(76, 86, 106, .12), 0 12px 28px -22px rgba(46, 52, 64, .35);
  --sh-float: 0 0 0 1px rgba(76, 86, 106, .14), 0 10px 30px -12px rgba(46, 52, 64, .3); --sh-sheet: 0 24px 60px -18px rgba(46, 52, 64, .4);
  --spec: inset 0 1px 0 rgba(255, 255, 255, .7); --blur: 18px; --ok: #1a6b33; --ok-bg: rgba(26, 107, 51, .10); --warn: #7d5100;
  --warn-bg: rgba(201, 128, 0, .12); --alert: #b4392f; --alert-bg: rgba(180, 57, 47, .07); --red: #b4392f; --a-red: #b4392f;
  --mark-ink: #1c1c1e; --wall-tint: #f2f4f8;
  color-scheme: light;
}
[data-theme=nord][data-mode=dark] {
  --ground: #2a2f3a; --card: #323846; --raised: #3b4252; --top: #434c5e; --glass: rgba(52, 58, 72, .84); --glass-solid: #353b49;
  --quiet: rgba(216, 222, 233, .08); --fill2: rgba(216, 222, 233, .12); --track: rgba(216, 222, 233, .14); --scrim: rgba(20, 23, 29, .55);
  --tx1: #eceff4; --tx2: #d8dee9; --tx3: #b2bacb; --tx4: rgba(216, 222, 233, .3); --sep: rgba(216, 222, 233, .1);
  --edge: rgba(216, 222, 233, .07); --ink-fill: #d8dee9; --on-ink: #2e3440; --accent: #88c0d0; --on-accent: #2e3440;
  --accent-soft: rgba(136, 192, 208, .16); --tile-on: #d8dee9; --on-tile: #2e3440; --on-tile2: #434c5e; --info: #9ec4e0; --amber: #ebcb8b;
  --green: #a3be8c; --blue: #81a1c1; --orange: #d08770; --teal: #8fbcbb; --indigo: #b48ead; --cyan: #88c0d0; --on-tone: #2e3440;
  --a-amber: #ebcb8b; --a-green: #a3be8c; --a-blue: #9ec4e0;
  --sh-card: inset 0 1px 0 rgba(236, 239, 244, .05), 0 0 0 1px rgba(216, 222, 233, .06);
  --sh-float: inset 0 1px 0 rgba(236, 239, 244, .08), 0 0 0 1px rgba(216, 222, 233, .08), 0 16px 40px -16px rgba(0, 0, 0, .6);
  --sh-sheet: 0 0 0 1px rgba(216, 222, 233, .08), 0 30px 70px -20px rgba(0, 0, 0, .7); --spec: inset 0 1px 0 rgba(236, 239, 244, .1);
  --blur: 18px; --ok: #4cd27a; --ok-bg: rgba(12, 58, 26, .5); --warn: #ffc94a; --warn-bg: rgba(58, 42, 0, .5); --alert: #ee8a80;
  --alert-bg: rgba(58, 16, 12, .5); --red: #ee8a80; --a-red: #ee8a80; --mark-ink: #f5f5f7; --wall-tint: #323846;
  color-scheme: dark;
}
/* Paper: Warm neutral, e-ink calm */
[data-theme=paper] {
  --ground: #f1ede4; --card: #faf7f1; --raised: #f6f2ea; --top: #fdfbf7; --glass: #f6f2ea; --glass-solid: #f6f2ea;
  --quiet: rgba(92, 74, 50, .09); --fill2: rgba(92, 74, 50, .12); --track: rgba(92, 74, 50, .14); --scrim: rgba(42, 38, 33, .3);
  --tx1: #2a2621; --tx2: #4f483f; --tx3: #665e53; --tx4: rgba(92, 74, 50, .36); --sep: rgba(92, 74, 50, .15); --edge: rgba(92, 74, 50, .12);
  --ink-fill: #2a2621; --on-ink: #f6f2ea; --accent: #2a2621; --on-accent: #f6f2ea; --accent-soft: rgba(42, 38, 33, .07); --tile-on: #fdfbf7;
  --on-tile: #2a2621; --on-tile2: #5a5248; --info: #2c6390; --amber: #ad7500; --green: #6f8a1a; --blue: #3b7ab0; --orange: #c0612a;
  --teal: #3a8a83; --indigo: #6a5aa6; --cyan: #3a88a6; --on-tone: #faf7f1; --a-amber: #80570a; --a-green: #4c6b12; --a-blue: #2c6390;
  --sh-card: 0 0 0 1px rgba(92, 74, 50, .12); --sh-float: 0 0 0 1px rgba(92, 74, 50, .14), 0 6px 18px -10px rgba(42, 38, 33, .25);
  --sh-sheet: 0 0 0 1px rgba(92, 74, 50, .12), 0 20px 50px -18px rgba(42, 38, 33, .35); --spec: inset 0 0 0 1px rgba(255, 255, 255, .3);
  --blur: 0px; --ok: #1a6b33; --ok-bg: rgba(26, 107, 51, .10); --warn: #7d5100; --warn-bg: rgba(201, 128, 0, .12); --alert: #b4392f;
  --alert-bg: rgba(180, 57, 47, .07); --red: #b4392f; --a-red: #b4392f; --mark-ink: #1c1c1e; --wall-tint: #faf7f1;
  color-scheme: light;
}
[data-theme=paper][data-mode=dark] {
  --ground: #1a1815; --card: #24211d; --raised: #2d2924; --top: #38332d; --glass: #24211d; --glass-solid: #24211d;
  --quiet: rgba(236, 226, 208, .07); --fill2: rgba(236, 226, 208, .1); --track: rgba(236, 226, 208, .12); --scrim: rgba(0, 0, 0, .5);
  --tx1: #ece6da; --tx2: #cbc3b5; --tx3: #a9a093; --tx4: rgba(236, 226, 208, .26); --sep: rgba(236, 226, 208, .1);
  --edge: rgba(236, 226, 208, .07); --ink-fill: #e6dfd1; --on-ink: #24211d; --accent: #e6dfd1; --on-accent: #24211d;
  --accent-soft: rgba(236, 226, 208, .1); --tile-on: #e6dfd1; --on-tile: #24211d; --on-tile2: #4f483f; --info: #86b4da; --amber: #e2b65c;
  --green: #a2bb62; --blue: #7aa9d2; --orange: #df9566; --teal: #7cbfb5; --indigo: #aea1dd; --cyan: #7cb9cf; --on-tone: #1a1815;
  --a-amber: #e2b65c; --a-green: #a9c26e; --a-blue: #86b4da; --sh-card: 0 0 0 1px rgba(236, 226, 208, .07);
  --sh-float: 0 0 0 1px rgba(236, 226, 208, .09), 0 16px 40px -16px rgba(0, 0, 0, .6);
  --sh-sheet: 0 0 0 1px rgba(236, 226, 208, .08), 0 30px 70px -20px rgba(0, 0, 0, .7); --spec: inset 0 1px 0 rgba(236, 226, 208, .05);
  --blur: 0px; --ok: #4cd27a; --ok-bg: rgba(12, 58, 26, .5); --warn: #ffc94a; --warn-bg: rgba(58, 42, 0, .5); --alert: #ee8a80;
  --alert-bg: rgba(58, 16, 12, .5); --red: #ee8a80; --a-red: #ee8a80; --mark-ink: #f5f5f7; --wall-tint: #24211d;
  color-scheme: dark;
}
/* Midnight: High contrast; OLED black for wall tablets at night */
[data-theme=midnight] {
  --ground: #f4f4f5; --card: #fcfcfd; --raised: #fcfcfd; --top: #fcfcfd; --glass: #fcfcfd; --glass-solid: #fcfcfd; --quiet: rgba(0, 0, 0, .07);
  --fill2: rgba(0, 0, 0, .09); --track: rgba(0, 0, 0, .14); --scrim: rgba(0, 0, 0, .4); --tx1: #0b0b0c; --tx2: #2c2c2e; --tx3: #48484a;
  --tx4: rgba(0, 0, 0, .4); --sep: rgba(0, 0, 0, .18); --edge: rgba(0, 0, 0, .22); --ink-fill: #0b0b0c; --on-ink: #fcfcfd; --accent: #0b0b0c;
  --on-accent: #fcfcfd; --accent-soft: rgba(0, 0, 0, .08); --tile-on: #fcfcfd; --on-tile: #0b0b0c; --on-tile2: #2c2c2e; --info: #0b52ad;
  --amber: #b87300; --green: #1a7f3c; --blue: #1260c8; --orange: #b85512; --teal: #0d7d7e; --indigo: #4a48c4; --cyan: #0a76a3;
  --on-tone: #fcfcfd; --a-amber: #704800; --a-green: #0f6630; --a-blue: #0b52ad; --sh-card: 0 0 0 1px rgba(0, 0, 0, .22);
  --sh-float: 0 0 0 1px rgba(0, 0, 0, .24), 0 6px 18px -8px rgba(0, 0, 0, .25);
  --sh-sheet: 0 0 0 1px rgba(0, 0, 0, .24), 0 24px 60px -16px rgba(0, 0, 0, .4); --spec: inset 0 0 0 1px rgba(0, 0, 0, 0); --blur: 0px;
  --ok: #1a6b33; --ok-bg: rgba(26, 107, 51, .10); --warn: #7d5100; --warn-bg: rgba(201, 128, 0, .12); --alert: #b4392f;
  --alert-bg: rgba(180, 57, 47, .07); --red: #b4392f; --a-red: #b4392f; --mark-ink: #1c1c1e; --wall-tint: #fcfcfd;
  color-scheme: light;
}
[data-theme=midnight][data-mode=dark] {
  --ground: #000000; --card: #121214; --raised: #1c1c1e; --top: #2c2c2e; --glass: #0c0c0d; --glass-solid: #0c0c0d;
  --quiet: rgba(255, 255, 255, .08); --fill2: rgba(255, 255, 255, .11); --track: rgba(255, 255, 255, .16); --scrim: rgba(0, 0, 0, .7);
  --tx1: #e8e8ea; --tx2: #c2c2c7; --tx3: #9a9aa0; --tx4: rgba(255, 255, 255, .24); --sep: rgba(255, 255, 255, .12);
  --edge: rgba(255, 255, 255, .13); --ink-fill: #e8e8ea; --on-ink: #000000; --accent: #ffb547; --on-accent: #1a1205;
  --accent-soft: rgba(255, 181, 71, .14); --tile-on: #2a2a2d; --on-tile: #f2f2f4; --on-tile2: #c2c2c7; --info: #86beff; --amber: #ffb547;
  --green: #3fc46c; --blue: #5a9cf5; --orange: #ff9452; --teal: #3cbcc0; --indigo: #8c89f5; --cyan: #56bde6; --on-tone: #000000;
  --a-amber: #ffbf5a; --a-green: #4cd27a; --a-blue: #86beff; --sh-card: 0 0 0 1px rgba(255, 255, 255, .13);
  --sh-float: 0 0 0 1px rgba(255, 255, 255, .15); --sh-sheet: 0 0 0 1px rgba(255, 255, 255, .15);
  --spec: inset 0 0 0 1px rgba(255, 255, 255, 0); --blur: 0px; --ok: #4cd27a; --ok-bg: rgba(12, 58, 26, .5); --warn: #ffc94a;
  --warn-bg: rgba(58, 42, 0, .5); --alert: #ee8a80; --alert-bg: rgba(58, 16, 12, .5); --red: #ee8a80; --a-red: #ee8a80; --mark-ink: #f5f5f7;
  --wall-tint: #121214;
  color-scheme: dark;
}
/* Graphite: Industrial: crisp borders, indigo accent */
[data-theme=graphite] {
  --ground: #f4f4f5; --card: #fbfbfb; --raised: #fbfbfb; --top: #fbfbfb; --glass: rgba(250, 250, 250, .86); --glass-solid: #f9f9f9;
  --quiet: rgba(0, 0, 0, .05); --fill2: rgba(0, 0, 0, .07); --track: rgba(0, 0, 0, .09); --scrim: rgba(0, 0, 0, .3); --tx1: #171717;
  --tx2: #404040; --tx3: #5c5c5c; --tx4: rgba(0, 0, 0, .3); --sep: #e5e5e5; --edge: #e2e2e2; --ink-fill: #171717; --on-ink: #fafafa;
  --accent: #4f5bc4; --on-accent: #fafafa; --accent-soft: rgba(79, 91, 196, .1); --tile-on: #fbfbfb; --on-tile: #171717; --on-tile2: #404040;
  --info: #4f5bc4; --amber: #bb7800; --green: #23944c; --blue: #3b6fd8; --orange: #d86a1e; --teal: #138f8f; --indigo: #5e6ad2; --cyan: #1689b8;
  --on-tone: #fbfbfb; --a-amber: #8a5700; --a-green: #17703a; --a-blue: #3858b8; --sh-card: 0 0 0 1px #e2e2e2, 0 1px 2px rgba(0, 0, 0, .04);
  --sh-float: 0 0 0 1px #e0e0e0, 0 4px 14px -4px rgba(0, 0, 0, .12); --sh-sheet: 0 0 0 1px #e0e0e0, 0 16px 40px -12px rgba(0, 0, 0, .25);
  --spec: inset 0 0 0 1px rgba(255, 255, 255, 0); --blur: 14px; --ok: #1a6b33; --ok-bg: rgba(26, 107, 51, .10); --warn: #7d5100;
  --warn-bg: rgba(201, 128, 0, .12); --alert: #b4392f; --alert-bg: rgba(180, 57, 47, .07); --red: #b4392f; --a-red: #b4392f;
  --mark-ink: #1c1c1e; --wall-tint: #fbfbfb;
  color-scheme: light;
}
[data-theme=graphite][data-mode=dark] {
  --ground: #0e0f10; --card: #161719; --raised: #1c1d20; --top: #26282c; --glass: rgba(22, 23, 25, .88); --glass-solid: #18191b;
  --quiet: rgba(255, 255, 255, .055); --fill2: rgba(255, 255, 255, .08); --track: rgba(255, 255, 255, .1); --scrim: rgba(0, 0, 0, .6);
  --tx1: #f2f3f4; --tx2: #c4c7cc; --tx3: #9196a0; --tx4: rgba(255, 255, 255, .22); --sep: #26282c; --edge: #232529; --ink-fill: #eeeff1;
  --on-ink: #161719; --accent: #8f98f4; --on-accent: #10122a; --accent-soft: rgba(124, 135, 240, .16); --tile-on: #26282c; --on-tile: #f2f3f4;
  --on-tile2: #c4c7cc; --info: #9aa2f6; --amber: #e8a93a; --green: #3fb86a; --blue: #5b8ef0; --orange: #ec8a4e; --teal: #3cb4b4;
  --indigo: #7c87f0; --cyan: #4cb0dc; --on-tone: #0e0f10; --a-amber: #e8b34f; --a-green: #4cc77a; --a-blue: #8fb0ff;
  --sh-card: 0 0 0 1px #232529; --sh-float: 0 0 0 1px #2a2c31, 0 12px 30px -12px rgba(0, 0, 0, .7);
  --sh-sheet: 0 0 0 1px #2a2c31, 0 24px 60px -16px rgba(0, 0, 0, .8); --spec: inset 0 1px 0 rgba(255, 255, 255, .04); --blur: 14px;
  --ok: #4cd27a; --ok-bg: rgba(12, 58, 26, .5); --warn: #ffc94a; --warn-bg: rgba(58, 42, 0, .5); --alert: #ee8a80;
  --alert-bg: rgba(58, 16, 12, .5); --red: #ee8a80; --a-red: #ee8a80; --mark-ink: #f5f5f7; --wall-tint: #161719;
  color-scheme: dark;
}
/* Christmas: Burgundy velvet, pine and fairy-light gold over the tree */
[data-theme=christmas] {
  --ground: #f5edef; --card: #fffafb; --raised: #fbf4f5; --top: #fffcfc; --glass: rgba(255, 247, 249, .76); --glass-solid: #faf0f2;
  --quiet: rgba(122, 36, 58, .08); --fill2: rgba(122, 36, 58, .11); --track: rgba(122, 36, 58, .13); --scrim: rgba(42, 10, 20, .32);
  --tx1: #2b1419; --tx2: rgba(64, 22, 34, .86); --tx3: rgba(64, 22, 34, .74); --tx4: rgba(64, 22, 34, .34); --sep: rgba(96, 30, 48, .13);
  --edge: rgba(96, 30, 48, .09); --ink-fill: #2b1419; --on-ink: #fbf1f3; --accent: #9a2452; --on-accent: #fff5f8;
  --accent-soft: rgba(154, 36, 82, .1); --tile-on: #fff4dc; --on-tile: #2b1a08; --on-tile2: #6b4710; --info: #24569e; --amber: #bf7d00;
  --green: #2e8a52; --blue: #2f6fc0; --orange: #d0651e; --teal: #178a85; --indigo: #6150c8; --cyan: #1a84b0; --on-tone: #fffafb;
  --a-amber: #6c4500; --a-green: #1f6a3e; --a-blue: #24569e;
  --sh-card: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(96, 30, 48, .08), 0 1px 2px rgba(42, 10, 20, .05), 0 18px 36px -26px rgba(42, 10, 20, .4);
  --sh-float: 0 0 0 1px rgba(96, 30, 48, .1), 0 10px 30px -10px rgba(42, 10, 20, .32); --sh-sheet: 0 30px 80px -20px rgba(42, 10, 20, .5);
  --spec: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5); --blur: 26px; --ok: #1a6b33;
  --ok-bg: rgba(26, 107, 51, .10); --warn: #7d5100; --warn-bg: rgba(201, 128, 0, .12); --alert: #b4392f; --alert-bg: rgba(180, 57, 47, .07);
  --red: #b4392f; --a-red: #b4392f; --mark-ink: #1c1c1e; --wall-tint: #fff6f8;
  color-scheme: light;
}
[data-theme=christmas][data-mode=dark] {
  --ground: #150b0e; --card: #26151b; --raised: #311b23; --top: #3e232d; --glass: rgba(48, 20, 30, .74); --glass-solid: #2b161e;
  --quiet: rgba(255, 214, 224, .1); --fill2: rgba(255, 214, 224, .14); --track: rgba(255, 214, 224, .16); --scrim: rgba(10, 2, 5, .6);
  --tx1: #fbf3f4; --tx2: rgba(252, 236, 240, .8); --tx3: rgba(252, 236, 240, .64); --tx4: rgba(252, 236, 240, .28);
  --sep: rgba(255, 214, 224, .13); --edge: rgba(255, 214, 224, .08); --ink-fill: #f7eaed; --on-ink: #2a1219; --accent: #f3a9c6;
  --on-accent: #3a0d20; --accent-soft: rgba(243, 169, 198, .16); --tile-on: #f8e2b4; --on-tile: #2b1a06; --on-tile2: #5e4114; --info: #a9c8f0;
  --amber: #ffc35c; --green: #5fbf7f; --blue: #7aa7e6; --orange: #ff9f6b; --teal: #5cc4b4; --indigo: #a59cf0; --cyan: #6cc4e0;
  --on-tone: #1c0d12; --a-amber: #ffcf73; --a-green: #86d39f; --a-blue: #a9c8f0;
  --sh-card: inset 0 1px 0 rgba(255, 230, 236, .07), 0 0 0 1px rgba(255, 214, 224, .07);
  --sh-float: inset 0 1px 0 rgba(255, 230, 236, .14), 0 0 0 1px rgba(255, 214, 224, .09), 0 18px 40px -16px rgba(0, 0, 0, .8);
  --sh-sheet: inset 0 1px 0 rgba(255, 230, 236, .1), 0 0 0 1px rgba(255, 214, 224, .07), 0 30px 80px -20px rgba(0, 0, 0, .8);
  --spec: inset 0 1px 0 rgba(255, 236, 240, .22), inset 0 0 0 1px rgba(255, 220, 228, .08); --blur: 36px; --ok: #4cd27a;
  --ok-bg: rgba(12, 58, 26, .5); --warn: #ffc94a; --warn-bg: rgba(58, 42, 0, .5); --alert: #ee8a80; --alert-bg: rgba(58, 16, 12, .5);
  --red: #ee8a80; --a-red: #ee8a80; --mark-ink: #f5f5f7; --wall-tint: #3a1220;
  color-scheme: dark;
}
/* the one token layer: every Sync Box page reads these names (the Sync look's, Sync Home's and the console's own) */
[data-theme] {
  --bg: var(--ground); --wash: var(--ground); --page-bg: var(--ground); --grid-minor: transparent; --grid-major: transparent;
  --ink: var(--tx1); --ink2: var(--tx2); --label2: var(--tx2); --muted: var(--tx3); --none: var(--tx4); --line: var(--sep); --inset: var(--quiet);
  --hue: var(--accent); --hue-soft: var(--accent-soft); --on-hue: var(--on-accent); --lens: var(--quiet); --sel: var(--top); --sel-ring: var(--sh-float);
  --glass-strong: var(--glass-solid); --sheet: var(--card); --glass-spec: var(--spec); --shadow: var(--sh-float);
  --up: var(--ok); --up-bg: var(--ok-bg); --down: var(--alert); --down-bg: var(--alert-bg);
  --info-bg: color-mix(in srgb, var(--info) 13%, transparent);
  --hb: var(--ground); --hi: var(--tx1); --hi2: var(--tx2); --hi3: var(--tx3); --hline: var(--sep); --grp: var(--card); --toff: var(--quiet); --icoff: var(--fill2);
  --ton: var(--tile-on); --tonshadow: var(--sh-card); --amber-txt: var(--a-amber); --amber-ic: var(--amber); --amber-bg: color-mix(in srgb, var(--amber) 22%, transparent);
  --soft-red: var(--alert); --sheet-bg: var(--raised); --fill: var(--ink-fill); --fill-ink: var(--on-ink); --side-bg: var(--glass);
  --cardsh: var(--sh-card); --idle: var(--tx4); --cool: var(--blue); --heat: var(--orange); --light-on: var(--amber);
  --chart1: var(--tx1); --chart2: var(--amber); --chart3: var(--blue); --chart4: var(--green); --chart5: var(--tx3);
  --media-bg: #0b0b0c; --media-ink: #f5f5f7; --media-ink2: rgba(245, 245, 247, .74); --media-scrim: rgba(20, 20, 22, .58); --media-fill: rgba(255, 255, 255, .14);
  --media-panel: rgba(44, 44, 46, .9); --media-alert: #ee8a80; --media-warn: #ffd25e; --media-warn-bg: rgba(255, 196, 0, .25);
  --media-arm: #ffbd3d; --media-live: #3ec463;
}
/* the mark keeps the brand ink in every theme (brand decision 6); the "Powered by Sync" line keeps its quiet grey */
[data-theme] .sync-mark { background: var(--mark-ink) } [data-theme] .powered .sync-mark { background: var(--muted) }
/* the console's primary action and avatar follow the theme's accent (ink in Sync and Paper) */
[data-theme] .btn.primary, [data-theme] .who b, [data-theme] .side .me b { background: var(--accent); color: var(--on-accent) }
[data-theme] .btn.primary:hover { background: var(--accent) }
/* a grey pill (nothing to report) sits on glass: the secondary text level keeps it AA on every ground */
[data-theme] .pill.none { color: var(--tx2) }
/* glass: each theme's thickness; a flat theme (blur 0) is opaque and needs no blur work at all */
[data-theme] .glass, [data-theme] .hs, [data-theme] .tabbar { -webkit-backdrop-filter: blur(var(--blur)) saturate(170%); backdrop-filter: blur(var(--blur)) saturate(170%) }
[data-theme=tonal] .glass, [data-theme=paper] .glass, [data-theme=midnight] .glass, [data-theme=tonal] .hs, [data-theme=paper] .hs, [data-theme=midnight] .hs,
[data-theme=tonal] .tabbar, [data-theme=paper] .tabbar, [data-theme=midnight] .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none }
/* the theme picker (Account → Appearance, console Settings, a dashboard's settings): each choice drawn in its own tokens */
.thpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0 0 14px }
.thpick button { display: grid; gap: 7px; min-height: 44px; padding: 6px 6px 9px; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer }
.thpick button > span:last-child { padding: 0 4px; display: flex; align-items: center; gap: 6px }
.thpick button[aria-checked=true] { box-shadow: 0 0 0 2px var(--accent) } .thpick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.thp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 74px; padding: 8px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--edge), 0 0 0 1px var(--edge) }
.thp-c { display: grid; gap: 4px; align-content: end; padding: 6px; border-radius: 8px; background: var(--card); box-shadow: var(--sh-card); min-width: 0 }
.thp-c.on { background: var(--tile-on) } .thp-d { width: 12px; height: 12px; border-radius: 50%; background: var(--fill2) } .thp-c.on .thp-d { background: var(--amber) }
.thp-c b { display: block; height: 5px; width: 72%; border-radius: 3px; background: var(--tx1) } .thp-c em { display: block; height: 4px; width: 46%; border-radius: 3px; background: var(--tx3) }
.thp-c.on b { background: var(--on-tile) } .thp-c.on em { background: var(--a-amber) }
.thp[data-theme="christmas"] { background: url(data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAaAAwDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQb/xAAhEAABBAIABwAAAAAAAAAAAAABAAIRIQMxEzJRYXGBsf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/EABkRAQADAQEAAAAAAAAAAAAAAAEAAhEhMf/aAAwDAQACEQMRAD8A47gh9gye6R7QHQQKTkAV9Wy3JbgJ1tDYrVwHYEjrJKmcTp5o9IzK503ws8kq8n//2Q==) center / cover } .thp[data-theme="christmas"] .thp-c:not(.on) { background: color-mix(in srgb, var(--wall-tint) 62%, transparent) } .thp[data-theme="christmas"][data-mode="light"] { background: url(data:image/jpeg;base64,/9j/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAQABgDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCBgf/xAAhEAACAQQCAgMAAAAAAAAAAAABAgMABAUREiEGMZGhsf/EABYBAQEBAAAAAAAAAAAAAAAAAAMBAv/EABsRAAIDAAMAAAAAAAAAAAAAAAECAAMRIWKB/9oADAMBAAIRAxEAPwDSA6AhCw2R0KpGXzMVhlri1gjkaNZA7oDoMy6J+aaYq7EOTmx9+4M0YAhZvbr3qkXkmLMNjNftOHmeY8112uz0fyicnOI9Qrwl/JAZBsveW88gSOdpjCUVdbiOj9HdFKY8vDyx0zRAPBJtyOiSPWzRWV7SWspbUGCf/9k=) center / cover }
.thp-bar { grid-column: 1 / -1; display: flex; gap: 4px } .thp-bar i { flex: 1; height: 4px; border-radius: 3px; background: var(--ok) } .thp-bar i + i { background: var(--warn) } .thp-bar i + i + i { background: var(--accent) }