:root{
  --bg:#E9EEF3;                  
  --edge:#CBD8E5;                
  --edge-btn:rgba(10,38,71,.26); 
  --lift:   0 2px 0 rgba(255,255,255,1) inset, 0 0 0 1px rgba(255,255,255,.55) inset,
            0 5px 0 var(--edge), 0 20px 40px rgba(16,40,60,.20);
  --lift-sm:0 1.5px 0 rgba(255,255,255,1) inset, 0 0 0 1px rgba(255,255,255,.5) inset,
            0 4px 0 var(--edge), 0 12px 24px rgba(16,40,60,.16);
  --gloss: linear-gradient(180deg, rgba(255,255,255,.62)  0%,
                                   rgba(255,255,255,.34) 44%,
                                   rgba(255,255,255,.05) 45%,
                                   rgba(0,0,0,.055)      72%,
                                   rgba(0,0,0,.16)      100%);
  --sheen: radial-gradient(135% 76% at 50% -26%,
                           rgba(255,255,255,.58) 0%,
                           rgba(255,255,255,.14) 46%,
                           rgba(255,255,255,0)   68%);
  --rim:   inset 0 0 0 1px rgba(255,255,255,.3);
  --btn-up:  inset 0 1.5px 0 rgba(255,255,255,.75), var(--rim),
             inset 0 -2px 3px rgba(10,38,71,.14),
             0 4px 0 var(--edge-btn), 0 10px 20px rgba(16,40,60,.22);
  --btn-over:inset 0 1.5px 0 rgba(255,255,255,.9),  var(--rim),
             inset 0 -2px 3px rgba(10,38,71,.14),
             0 5px 0 var(--edge-btn), 0 14px 26px rgba(16,40,60,.26);
  --btn-down:inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 3px 6px rgba(10,38,71,.22),
             0 1px 0 var(--edge-btn), 0 2px 5px rgba(16,40,60,.18);
}
body{ background:var(--bg); }
.btn, .top-link, .user-chip, .mon-btn, .day-nav .nb, .go-link, .n-add,
.u-btn, .g-btn, .ts-btn, .sms-btn, .etc-chip, .st-btn, .tlf, .ear-toggle,
.seg-b, .tr-pick, .ri-done, .modal-close,
.share-btn, .month-nav button, .btn-save, .btn-cancel, .hol-btn,
.cl-add, .close-btn{
  background-image:var(--sheen), var(--gloss);
  box-shadow:var(--btn-up);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s;
}
.btn:hover, .top-link:hover, .user-chip:hover, .mon-btn:hover, .day-nav .nb:hover,
.go-link:hover, .n-add:hover, .u-btn:hover, .g-btn:hover, .ts-btn:hover,
.sms-btn:hover, .etc-chip:hover, .st-btn:hover, .tlf:hover, .ear-toggle:hover,
.seg-b:hover, .tr-pick:hover, .ri-done:hover,
.share-btn:hover, .month-nav button:hover, .btn-save:hover, .btn-cancel:hover,
.hol-btn:hover, .cl-add:hover, .close-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--btn-over);
}
.btn:active, .top-link:active, .user-chip:active, .mon-btn:active, .day-nav .nb:active,
.go-link:active, .n-add:active, .u-btn:active, .g-btn:active, .ts-btn:active,
.sms-btn:active, .etc-chip:active, .st-btn:active, .tlf:active, .ear-toggle:active,
.seg-b:active, .tr-pick:active, .ri-done:active, .modal-close:active,
.share-btn:active, .month-nav button:active, .btn-save:active, .btn-cancel:active,
.hol-btn:active, .cl-add:active, .close-btn:active{
  transform:translateY(2px);
  box-shadow:var(--btn-down);
}
.btn:focus-visible, .top-link:focus-visible, .mon-btn:focus-visible,
.day-nav .nb:focus-visible, .go-link:focus-visible, .u-btn:focus-visible,
.g-btn:focus-visible, .ts-btn:focus-visible, .etc-chip:focus-visible,
.st-btn:focus-visible, .tlf:focus-visible, .seg-b:focus-visible,
.share-btn:focus-visible, .month-nav button:focus-visible,
.btn-save:focus-visible, .btn-cancel:focus-visible, .hol-btn:focus-visible,
.cl-add:focus-visible{
  outline:3px solid #2F6AB0;
  outline-offset:2px;
}
.btn.ghost, .mon-btn, .day-nav .nb, .u-btn, .seg-b, .tr-pick, .ri-done,
.etc-chip, .st-btn, .tlf, .ear-toggle, .month-nav button, .btn-cancel,
.hol-btn.ghost, .share-btn.refresh, .share-btn.lock, .share-btn.user{
  --edge-btn:#AFC0D0;
}
.seg-b.on, .u-btn.on, .etc-chip.on, .st-btn.on, .tlf.on{
  --edge-btn:rgba(10,38,71,.3);
  transform:translateY(2px);
  box-shadow:var(--btn-down);
}
.seg-b.on:hover, .u-btn.on:hover, .etc-chip.on:hover,
.st-btn.on:hover, .tlf.on:hover{
  transform:translateY(2px);
  box-shadow:var(--btn-down);
}
.tr-del, .ag-del, .dc-rep, .fx-more, .mc-nav, .lk-btn, .cl-btns button{
  background-image:var(--sheen), var(--gloss);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--rim),
             inset 0 -1px 2px rgba(10,38,71,.12), 0 3px 0 #B8C7D6,
             0 6px 12px rgba(16,40,60,.16);
  transition:transform .12s ease, box-shadow .12s ease;
}
.tr-del:active, .ag-del:active, .dc-rep:active, .fx-more:active,
.mc-nav:active, .lk-btn:active, .cl-btns button:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #B8C7D6;
}
.modal-close, .close-btn{
  transition:transform .12s ease, box-shadow .12s ease, background .15s;
}
.card, .calendar, .cb-panel{
  border-color:#DCE5EE;
  box-shadow:var(--lift);
}
.card > h2{ border-bottom-color:#E4EBF2; }
.today-box{ box-shadow:var(--lift-sm); }
.modal-card, .umodal, .n-modal, .modal, .user-box, .gate-card{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 5px 0 #B9C8D8,
             0 26px 56px rgba(10,38,71,.34);
}
.find-list, .drop-menu{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 4px 0 #C4D2E0,
             0 14px 30px rgba(16,40,60,.2);
}
.mini, .stat{ border-color:#DCE5EE; box-shadow:var(--lift-sm); }
.m-as{
  background:linear-gradient(180deg,#FFFFFF 0%,#E9F2FC 100%);
  border-color:#C6DCF0;
  box-shadow:0 1px 0 #fff inset, 0 4px 0 #BDD5EC, 0 11px 22px rgba(31,95,168,.17);
}
.m-rep{
  background:linear-gradient(180deg,#FFFFFF 0%,#E4F6F0 100%);
  border-color:#BEE3D5;
  box-shadow:0 1px 0 #fff inset, 0 4px 0 #A9DCC9, 0 11px 22px rgba(15,110,86,.17);
}
.m-un{
  background:linear-gradient(180deg,#FFFFFF 0%,#FDE8E4 100%);
  border-color:#EFC6BE;
  box-shadow:0 1px 0 #fff inset, 0 4px 0 #EFBDB4, 0 13px 26px rgba(185,62,46,.19);
}
.stat.c1{ background:linear-gradient(180deg,#FFFFFF 0%,#E9F2FC 100%); border-color:#C6DCF0; box-shadow:0 1px 0 #fff inset,0 4px 0 #BDD5EC,0 10px 20px rgba(31,95,168,.15); }
.stat.c2{ background:linear-gradient(180deg,#FFFFFF 0%,#E4F6F0 100%); border-color:#BEE3D5; box-shadow:0 1px 0 #fff inset,0 4px 0 #A9DCC9,0 10px 20px rgba(15,110,86,.15); }
.stat.c3{ background:linear-gradient(180deg,#FFFFFF 0%,#FDF2DC 100%); border-color:#EBD5A2; box-shadow:0 1px 0 #fff inset,0 4px 0 #E3C27A,0 10px 20px rgba(201,138,18,.15); }
.stat.c4{ background:linear-gradient(180deg,#FFFFFF 0%,#FCE9F0 100%); border-color:#F0C6D7; box-shadow:0 1px 0 #fff inset,0 4px 0 #E8B0C8,0 10px 20px rgba(231,86,138,.15); }
.tile:hover{ box-shadow:0 1px 0 #fff inset, 0 6px 0 var(--edge), 0 20px 38px rgba(16,40,60,.2); }
button.mini, .stat.click{ transition:transform .14s ease, box-shadow .14s ease; }
button.mini:hover, .stat.click:hover{ transform:translateY(-2px); }
button.mini:active, .stat.click:active{ transform:translateY(1px); box-shadow:var(--btn-down); }
.topbar{
  border-bottom:3px solid var(--navy-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 8px 22px rgba(15,52,96,.26);
}
.modal-head, .umh{ box-shadow:0 1px 0 rgba(255,255,255,.18) inset; }
.board{ box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 4px 0 #C9D6E3, 0 12px 26px rgba(16,40,60,.15); }
input[type="text"], input[type="search"], input[type="date"],
input[type="number"], input[type="tel"], input[type="password"],
input:not([type]), select, textarea{
  box-shadow:inset 0 2px 4px rgba(16,40,60,.09);
}
input:focus, select:focus, textarea:focus{
  box-shadow:inset 0 2px 4px rgba(16,40,60,.09), 0 0 0 3px rgba(47,106,176,.22);
}
.cell.today{ box-shadow:inset 0 0 0 2px var(--today), 0 0 0 3px rgba(232,141,42,.2); }
.cb-card{ box-shadow:0 2px 0 #E8D7DC, 0 5px 11px rgba(122,69,85,.12); }
.cl-item{ box-shadow:0 2px 0 rgba(16,40,60,.07); }
.cl-name{ background-image:var(--gloss); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #E0C3B8; }
.cl-name:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #E0C3B8; }
@media (prefers-reduced-motion: reduce){
  .btn, .top-link, .user-chip, .mon-btn, .day-nav .nb, .go-link, .n-add,
  .u-btn, .g-btn, .ts-btn, .sms-btn, .etc-chip, .st-btn, .tlf, .ear-toggle,
  .seg-b, .tr-pick, .ri-done, .modal-close, .share-btn, .month-nav button,
  .btn-save, .btn-cancel, .hol-btn, .cl-add, .close-btn,
  .tr-del, .ag-del, .dc-rep, .fx-more, .mc-nav, .lk-btn,
  button.mini, .stat.click{ transition:none; }
  .btn:hover, .top-link:hover, .user-chip:hover, .mon-btn:hover, .day-nav .nb:hover,
  .go-link:hover, .n-add:hover, .u-btn:hover, .g-btn:hover, .ts-btn:hover,
  .sms-btn:hover, .etc-chip:hover, .st-btn:hover, .tlf:hover, .ear-toggle:hover,
  .seg-b:hover, .tr-pick:hover, .ri-done:hover, .share-btn:hover,
  .month-nav button:hover, .btn-save:hover, .btn-cancel:hover, .hol-btn:hover,
  .cl-add:hover, .close-btn:hover,
  button.mini:hover, .stat.click:hover{ transform:none; }
}
@media (max-width: 760px){
  :root{
    --lift:    0 1px 0 rgba(255,255,255,.95) inset, 0 3px 0 var(--edge), 0 9px 18px rgba(16,40,60,.13);
    --lift-sm: 0 1px 0 rgba(255,255,255,.95) inset, 0 2px 0 var(--edge), 0 6px 12px rgba(16,40,60,.11);
    --btn-up:  inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 var(--edge-btn), 0 5px 10px rgba(16,40,60,.15);
    --btn-over:inset 0 1px 0 rgba(255,255,255,.5),  0 3px 0 var(--edge-btn), 0 7px 13px rgba(16,40,60,.18);
    --btn-down:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 var(--edge-btn), 0 2px  4px rgba(16,40,60,.15);
  }
}
.topbar, .modal-head, .umh, .gate-head, .n-head{
  position:relative;
  isolation:isolate;           
}
.topbar::before, .modal-head::before, .umh::before,
.gate-head::before, .n-head::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 86% at 50% -34%, rgba(255,255,255,.34) 0%,
                                          rgba(255,255,255,.08) 52%,
                                          rgba(255,255,255,0)   72%),
    linear-gradient(180deg, rgba(255,255,255,.22)  0%,
                            rgba(255,255,255,.10) 46%,
                            rgba(255,255,255,.01) 47%,
                            rgba(0,0,0,.10)       78%,
                            rgba(0,0,0,.20)      100%);
}
.topbar{
  border-bottom:3px solid var(--navy-deep);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),
             inset 0 -1px 0 rgba(0,0,0,.25),
             0 10px 28px rgba(15,52,96,.34);
}
.modal-head, .umh{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.22);
}
.card, .calendar, .cb-panel, .board,
.mini, .stat, .dev-card{
  position:relative;
  isolation:isolate;
}
.card::before, .calendar::before, .cb-panel::before, .board::before,
.mini::before, .stat::before, .dev-card::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(130% 70% at 50% -22%, rgba(255,255,255,.75) 0%,
                                          rgba(255,255,255,.22) 45%,
                                          rgba(255,255,255,0)   68%),
    linear-gradient(180deg, rgba(255,255,255,.55)  0%,
                            rgba(255,255,255,.28) 42%,
                            rgba(255,255,255,.02) 43%,
                            rgba(16,40,60,.035)   74%,
                            rgba(16,40,60,.085)  100%);
}
.card > h2{
  background-image:linear-gradient(180deg, rgba(255,255,255,.96) 0%,
                                           rgba(238,245,251,.7) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1);
}
.modal-card, .umodal, .n-modal, .modal, .user-box, .gate-card{
  box-shadow:inset 0 2px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.6),
             0 6px 0 #B9C8D8, 0 34px 70px rgba(10,38,71,.40);
}
.mini, .stat{ box-shadow:var(--lift-sm); }
button.mini:hover, .stat.click:hover{ box-shadow:var(--lift); }
.dev-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 2px 0 rgba(203,216,229,.8),
             0 6px 14px rgba(16,40,60,.1);
}
.dev-side-title, .da-ear, .ul-ear, .or-old{
  background-image:var(--sheen), var(--gloss);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             inset 0 -1px 2px rgba(0,0,0,.16),
             0 2px 0 rgba(10,38,71,.18), 0 5px 10px rgba(16,40,60,.17);
}
.dc-tag, .tag, .cpb .cw.self, .cpb .cw.lead, .cpb .cw.gone{
  background-image:var(--sheen), var(--gloss);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),
             inset 0 -1px 1px rgba(10,38,71,.1),
             0 1px 2px rgba(16,40,60,.16);
}
input[type="text"], input[type="search"], input[type="date"],
input[type="number"], input[type="tel"], input[type="password"],
input:not([type]), select, textarea{
  box-shadow:inset 0 3px 6px rgba(16,40,60,.13), inset 0 -1px 0 rgba(255,255,255,.9);
}
input:focus, select:focus, textarea:focus{
  box-shadow:inset 0 3px 6px rgba(16,40,60,.13), inset 0 -1px 0 rgba(255,255,255,.9),
             0 0 0 3px rgba(47,106,176,.25);
}
@media (max-width: 760px){
  .topbar{ box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 6px 16px rgba(15,52,96,.28); }
  .modal-card, .umodal, .n-modal, .modal, .user-box, .gate-card{
    box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 4px 0 #B9C8D8,
               0 20px 40px rgba(10,38,71,.34);
  }
}