/* Ecell cool-glass visual refresh: presentation only; no workflow or scoring logic changes. */
:root {
  --paper: #e9eceb;
  --surface: rgba(248, 249, 247, .58);
  --ink: #35434a;
  --muted: #727d80;
  --line: rgba(103, 119, 122, .2);
  --green: #526f66;
  --green-light: rgba(210, 222, 215, .72);
  --gold: #a88e70;
  --red: #a77a78;
  --radius: 22px;
  color-scheme: light;
  background: var(--paper);
}

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 80% 4%, rgba(171, 190, 197, .6), transparent 38rem),
    radial-gradient(ellipse at 8% 30%, rgba(194, 185, 194, .44), transparent 32rem),
    radial-gradient(ellipse at 62% 78%, rgba(187, 201, 190, .46), transparent 38rem),
    linear-gradient(145deg, #e8ebeb 0%, #e6e9e8 48%, #eeeae5 100%);
  background-attachment: fixed;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: #719bb5;
}

button {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(63, 79, 78, .14), inset 0 1px rgba(255, 255, 255, .17);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 11px 26px rgba(63, 79, 78, .19), inset 0 1px rgba(255, 255, 255, .22);
}

button.secondary {
  background: rgba(247, 248, 246, .52);
  border-color: rgba(255, 255, 255, .76);
  box-shadow: 0 7px 20px rgba(72, 82, 81, .08), inset 0 1.5px rgba(255, 255, 255, .92), inset 0 -1px rgba(150, 162, 159, .08);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}

button.secondary:hover:not(:disabled) {
  background: rgba(250, 251, 249, .76);
  border-color: rgba(255, 255, 255, .94);
}

button.quiet { box-shadow: none; }
button.quiet:hover:not(:disabled) { transform: none; box-shadow: none; background: rgba(220, 232, 237, .55); }

input, select, textarea {
  background: rgba(248, 249, 247, .42);
  border-color: rgba(255, 255, 255, .8);
  border-radius: 12px;
  box-shadow: 0 5px 18px rgba(68, 79, 78, .045), inset 0 1.5px rgba(255, 255, 255, .88), inset 0 -1px rgba(121, 136, 133, .09);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:focus, select:focus, textarea:focus {
  background: rgba(252, 252, 250, .72);
  border-color: rgba(117, 145, 143, .62);
  box-shadow: 0 0 0 4px rgba(152, 176, 169, .18), inset 0 1.5px rgba(255, 255, 255, .96);
}

h1, h2, h3 { color: #263644; }
h1 { font-weight: 680; letter-spacing: -1.15px; }
.mono { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .015em; }
.tag { border-radius: 999px; padding: 6px 10px; background: rgba(222, 235, 231, .82); }
.tag.warn { background: rgba(248, 237, 218, .88); }

.panel, .event-card, .roster-list, .table-wrap {
  background: linear-gradient(145deg, rgba(255, 255, 255, .56), rgba(239, 243, 239, .32));
  border: 1px solid rgba(255, 255, 255, .94);
  outline: 1px solid rgba(110, 126, 125, .12);
  border-radius: var(--radius);
  box-shadow: 0 24px 58px rgba(69, 81, 79, .15), 0 6px 16px rgba(69, 81, 79, .065), inset 0 1.5px rgba(255, 255, 255, .99), inset 0 -1px rgba(134, 149, 143, .1);
  -webkit-backdrop-filter: blur(36px) saturate(142%);
  backdrop-filter: blur(36px) saturate(142%);
}

.panel { padding: 28px; }
.sidebar {
  background: rgba(239, 242, 240, .44);
  border-right: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 8px 0 38px rgba(65, 79, 77, .07), inset -1px 0 rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(34px) saturate(142%);
  backdrop-filter: blur(34px) saturate(142%);
}
.sidebar .brand { color: #2a584e; }
.nav-btn { border-radius: 13px; color: #637581; }
.nav-btn.active {
  background: linear-gradient(135deg, rgba(230, 237, 231, .74), rgba(215, 225, 225, .54));
  color: #47675f;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 7px 18px rgba(73, 91, 87, .09), inset 0 1px rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav-btn:hover:not(:disabled) { background: rgba(226, 235, 239, .72); }
.sidebar-bottom { border-color: rgba(102, 124, 143, .18); }
.topbar {
  background: rgba(245, 247, 245, .42);
  border-bottom-color: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 28px rgba(64, 79, 76, .045), inset 0 1px rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
  backdrop-filter: blur(34px) saturate(145%);
}
.page-head .eyebrow { color: #b47d43; }
.event-card { color: var(--ink); text-align: left; }
.event-card:hover:not(:disabled) { background: rgba(255, 255, 255, .92); border-color: rgba(102, 145, 163, .32); }
.roster-list { overflow: hidden; }
.roster-header { border-color: rgba(103, 128, 146, .17); }
.person { background: rgba(255, 255, 255, .34); border-bottom-color: rgba(104, 128, 146, .13); }
.person:hover:not(:disabled), .person.selected { background: linear-gradient(100deg, rgba(220, 231, 224, .76), rgba(219, 228, 231, .58)); }
.person.selected { box-shadow: inset 3px 0 #718f84; }
.serial { color: #778894; }
.person-info strong { color: #293946; }
.person-info .dance-note { color: #ad7745; }
.candidate-head { border-color: rgba(103, 128, 146, .2); }
.candidate-head .serial, .score-total strong { color: #28554b; }
.score-row { border-color: rgba(103, 128, 146, .14); }
.score-row input { background: rgba(255, 255, 255, .84); border-radius: 13px; }
.score-total { border-bottom: 1px solid rgba(103, 128, 146, .14); }
.live-box {
  background: linear-gradient(125deg, #526d64, #71868a 62%, #85818e);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 18px 38px rgba(66, 83, 79, .19), inset 0 1.5px rgba(255, 255, 255, .3);
  border-radius: 20px;
}
.live-box button { box-shadow: none; }
.live-box button:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); transform: translateY(-1px); }
.filters { align-items: center; }
.table-wrap { overflow: auto; }
table { border-collapse: separate; border-spacing: 0; background: transparent; }
th { background: rgba(215, 224, 222, .66); color: #607174; border-bottom: 1px solid rgba(255, 255, 255, .7); }
td { background: rgba(250, 250, 247, .3); border-top: 1px solid rgba(255, 255, 255, .62); }
tbody tr:hover td { background: rgba(225, 232, 229, .55); }
td strong { color: #2b4654; }

.video-wrap, .record-monitor, .record-camera-frame, .recorder-preview {
  box-shadow: 0 14px 32px rgba(30, 50, 60, .14);
  border: 1px solid rgba(255, 255, 255, .12);
}
.video-wrap, .record-monitor { background: linear-gradient(145deg, #18342e, #263f46 72%, #304753); }
.attempt, .roster-group, .roster-group-empty { border-color: rgba(103, 128, 146, .17); }
.roster-group-heading { background: rgba(216, 225, 220, .68); color: #526f66; }
.roster-group-heading:hover { background: rgba(224, 232, 226, .86); }
.summary-video-preview, .my-person-video .summary-video-preview {
  border-radius: 10px;
  background: linear-gradient(145deg, #dce8eb, #e8e8f0);
  box-shadow: 0 5px 14px rgba(46, 69, 89, .1);
}
.summary-video-actions .summary-video-card, .my-person-video { border-radius: 12px; }
.summary-video-actions .summary-video-card:hover:not(:disabled), .my-person-video:hover:not(:disabled) { background: rgba(225, 237, 235, .65); }
.my-score-cell { border-radius: 12px; background: rgba(255, 255, 255, .58); }
.my-score-cell:hover:not(:disabled) { background: rgba(225, 237, 235, .82); border-color: rgba(83, 123, 145, .3); }
.save-directory, .record-history .history-row { border-color: rgba(103, 128, 146, .17); }
.record-button, .record-button:hover:not(:disabled) { background: #a94743; }
.record-button:hover:not(:disabled) { box-shadow: 0 9px 22px rgba(169, 71, 67, .2); }
.notice { background: rgba(249, 241, 226, .85); border-left-color: #bf8a50; border-radius: 0 12px 12px 0; }
.notice.error { background: rgba(250, 234, 231, .9); }
.empty { color: var(--muted); }
.empty strong { color: #2c3c49; }
.brand-logo { box-shadow: 0 5px 16px rgba(45, 68, 89, .12); border: 1px solid rgba(94, 119, 137, .1); }

dialog {
  background: linear-gradient(145deg, rgba(250, 251, 249, .82), rgba(232, 237, 234, .72));
  border-color: rgba(255, 255, 255, .94);
  border-radius: 22px;
  box-shadow: 0 30px 92px rgba(56, 68, 68, .26), inset 0 1.5px rgba(255, 255, 255, .98), inset 0 -1px rgba(127, 143, 139, .1);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
  backdrop-filter: blur(34px) saturate(145%);
}
dialog::backdrop { background: rgba(38, 54, 65, .4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
#toast {
  background: rgba(38, 66, 63, .94);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(38, 54, 65, .2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.login-aside {
  background: radial-gradient(ellipse at 80% 15%, rgba(173, 188, 187, .3), transparent 38%), linear-gradient(145deg, #354f49, #566f69 58%, #65737b);
}
.login-aside::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -170px;
  bottom: 60px;
  border-radius: 50%;
  background: rgba(185, 212, 222, .1);
  filter: blur(2px);
  pointer-events: none;
}
.login-aside > * { position: relative; z-index: 1; }
.login-main { background: rgba(246, 249, 250, .34); }
.login-box {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .56), rgba(231, 237, 234, .36));
  box-shadow: 0 24px 64px rgba(63, 77, 75, .13), inset 0 1.5px rgba(255, 255, 255, .98), inset 0 -1px rgba(125, 143, 136, .08);
  -webkit-backdrop-filter: blur(36px) saturate(142%);
  backdrop-filter: blur(36px) saturate(142%);
}

@media (max-width: 760px) {
  .sidebar {
    background: rgba(239, 242, 240, .72);
    border-top-color: rgba(255, 255, 255, .84);
    box-shadow: 0 -10px 34px rgba(65, 79, 77, .1), inset 0 1px rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    backdrop-filter: blur(32px) saturate(140%);
  }
  .content { padding-top: 22px; }
  .panel { padding: 21px; border-radius: 18px; }
  .page-head { gap: 12px; }
  .login-box { padding: 24px 20px; border-radius: 19px; }
  .summary-video-preview, .my-person-video .summary-video-preview { border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none !important; }
}

/* Rose quartz glass direction inspired by the supplied reference. */
:root {
  --paper: #f3e6e9;
  --surface: rgba(255, 250, 251, .62);
  --ink: #51444b;
  --muted: #897980;
  --line: rgba(151, 112, 129, .2);
  --green: #a85876;
  --green-light: rgba(236, 211, 221, .76);
  --gold: #b88a8a;
  --red: #b56c7d;
}

body {
  background:
    radial-gradient(ellipse at 74% 0%, rgba(255, 247, 248, .96), transparent 36rem),
    radial-gradient(ellipse at 6% 24%, rgba(232, 190, 207, .74), transparent 34rem),
    radial-gradient(ellipse at 88% 76%, rgba(220, 194, 212, .58), transparent 42rem),
    linear-gradient(145deg, #f1dce3 0%, #f6e9eb 47%, #eee4eb 100%);
}

.panel, .event-card, .roster-list, .table-wrap, .login-box {
  background: linear-gradient(145deg, rgba(255, 252, 252, .74), rgba(255, 247, 249, .42));
  border-color: rgba(255, 255, 255, .96);
  outline-color: rgba(174, 128, 149, .15);
  box-shadow: 0 24px 60px rgba(132, 85, 107, .15), 0 7px 20px rgba(132, 85, 107, .07), inset 0 1.5px rgba(255, 255, 255, .99), inset 0 -1px rgba(177, 137, 153, .11);
  -webkit-backdrop-filter: blur(38px) saturate(135%);
  backdrop-filter: blur(38px) saturate(135%);
}

.sidebar {
  background: rgba(255, 247, 249, .52);
  border-right-color: rgba(255, 255, 255, .86);
  box-shadow: 8px 0 40px rgba(132, 85, 107, .08), inset -1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(38px) saturate(140%);
  backdrop-filter: blur(38px) saturate(140%);
}

.topbar { background: rgba(255, 249, 250, .56); border-bottom-color: rgba(255, 255, 255, .86); }
.sidebar .brand, .nav-btn.active, .candidate-head .serial, .score-total strong { color: #8d4b68; }
.nav-btn { color: #806e76; }
.nav-btn.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(240, 216, 226, .68));
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 20px rgba(132, 85, 107, .1), inset 0 1px rgba(255, 255, 255, .98);
}
.nav-btn:hover:not(:disabled), button.quiet:hover:not(:disabled) { background: rgba(241, 218, 228, .7); }

button.secondary, input, select, textarea, .my-score-cell {
  background-color: rgba(255, 250, 251, .58);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 6px 18px rgba(132, 85, 107, .07), inset 0 1.5px rgba(255, 255, 255, .96), inset 0 -1px rgba(177, 137, 153, .08);
}
input:focus, select:focus, textarea:focus { border-color: rgba(177, 111, 141, .62); box-shadow: 0 0 0 4px rgba(202, 146, 168, .2), inset 0 1.5px rgba(255, 255, 255, .98); }
.person { background: rgba(255, 252, 252, .46); border-bottom-color: rgba(177, 137, 153, .15); }
.person:hover:not(:disabled), .person.selected { background: linear-gradient(100deg, rgba(242, 221, 229, .8), rgba(236, 223, 232, .72)); }
.person.selected { box-shadow: inset 3px 0 #b56f8a; }
.person-info strong, h1, h2, h3 { color: #463b42; }
.person-info .dance-note, .page-head .eyebrow { color: #a5677e; }
.tag { background: rgba(242, 222, 230, .88); }
.tag.warn { background: rgba(245, 230, 214, .9); }
th { background: rgba(238, 220, 228, .76); color: #79656e; }
td { background: rgba(255, 252, 252, .42); border-top-color: rgba(255, 255, 255, .78); }
tbody tr:hover td { background: rgba(244, 226, 233, .66); }
td strong { color: #604552; }
.live-box { background: linear-gradient(125deg, #a55d78, #bd8396 62%, #a38b9d); box-shadow: 0 18px 38px rgba(132, 85, 107, .19), inset 0 1.5px rgba(255, 255, 255, .34); }
.roster-group-heading { background: rgba(239, 220, 228, .76); color: #87516a; }
.roster-group-heading:hover { background: rgba(248, 233, 238, .92); }
.summary-video-preview, .my-person-video .summary-video-preview { background: linear-gradient(145deg, #f0dfe6, #e9e0eb); box-shadow: 0 5px 16px rgba(132, 85, 107, .12); }
.record-button, .record-button:hover:not(:disabled) { background: #b45e70; }
.notice { background: rgba(249, 237, 225, .9); border-left-color: #bd9170; }
.notice.error { background: rgba(250, 231, 234, .92); }
.login-aside { background: radial-gradient(ellipse at 80% 15%, rgba(255, 231, 239, .32), transparent 38%), linear-gradient(145deg, #704f61, #986b7f 58%, #9d8297); }
.login-main { background: rgba(255, 247, 249, .46); }
dialog { background: linear-gradient(145deg, rgba(255, 251, 252, .9), rgba(245, 227, 234, .82)); box-shadow: 0 30px 92px rgba(107, 67, 86, .25), inset 0 1.5px rgba(255, 255, 255, .99), inset 0 -1px rgba(177, 137, 153, .1); }
#toast { background: rgba(104, 63, 82, .94); }

@media (max-width: 760px) {
  .sidebar { background: rgba(255, 247, 249, .82); }
}