/* Z 漫畫貼紙主題｜純視覺覆蓋，不改動資料與功能邏輯 */
:root{
  color-scheme:light;
  --ink:#17171c;
  --muted:#625f69;
  --line:#17171c;
  --paper:#fffdf4;
  --rose:#ff5b77;
  --rose-dark:#25233c;
  --rose-soft:#ffd1dc;
  --nav:#25233c;
  --page:#fff7cf;
  --surface:#fffef8;
  --surface-soft:#fff2a8;
  --gold:#ffdc3f;
  --mist:#58d7dc;
}

html,body{
  color:#17171c;
  background:#fff7cf;
}

body{
  font-family:"Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC",sans-serif;
}

.app-shell{
  grid-template-columns:210px minmax(0,1fr);
  background-color:#fff7cf;
  background-image:radial-gradient(#e7c72e 1.15px,transparent 1.15px);
  background-size:11px 11px;
}

.sidebar{
  color:#fff;
  background:#25233c;
  border-right:6px solid #17171c;
  padding:24px 15px 20px;
}

.brand{
  gap:11px;
  padding:0 8px 29px;
}

.brand-mark{
  color:#17171c;
  background:#ffdf3d;
  border:3px solid #17171c;
  border-radius:0;
  box-shadow:5px 5px 0 #ff5b77;
  transform:rotate(-5deg);
}

.brand strong{
  color:#fff;
  font-family:inherit;
  font-weight:900;
  letter-spacing:.08em;
}

.brand span{color:#c9c6e2;}

.main-nav{gap:9px;}

.main-nav button{
  color:#e7e4f4;
  border:2px solid transparent;
  border-radius:0;
  padding:11px 10px;
  font-weight:800;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}

.main-nav button span{
  color:#17171c;
  background:#ffdd3f;
  border:2px solid #17171c;
  border-radius:0;
}

.main-nav button:hover{
  color:#17171c;
  background:#fff;
  border-color:#17171c;
  transform:translateX(3px);
}

.main-nav button.active{
  color:#17171c;
  background:#58d7dc;
  border-color:#17171c;
  box-shadow:5px 5px 0 #ff5b77;
  transform:rotate(-1deg);
}

.main-nav button.active span{
  color:#17171c;
  background:#ffdf3f;
}

.sidebar-foot{
  color:#fff;
  background:#34314c;
  border:2px solid #fff;
  border-radius:0;
  box-shadow:4px 4px 0 #17171c;
}

.sidebar-foot small{color:#c9c6db;}
.bot-dot i.online,.sync-stamp i,.status-active i{box-shadow:0 0 0 3px #17171c;}

.topbar{
  min-height:87px;
  background:#fffbe7;
  border-bottom:3px solid #17171c;
  backdrop-filter:none;
}

.topbar h1,
.welcome-row h2,
.table-toolbar h2,
.section-actions h2,
.manager-heading h2{
  display:inline-block;
  color:#fff;
  background:#25233c;
  border:2px solid #17171c;
  padding:3px 10px;
  font-family:inherit;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:4px 4px 0 #ff5b77;
  transform:rotate(-1deg);
}

.topbar p,.welcome-row p,.table-toolbar p,.section-actions p{color:#625f69;}
.eyebrow{color:#e73e63!important;}

.content{
  max-width:1480px;
  padding:27px 30px 48px;
}

.primary-button{
  color:#17171c;
  background:#ff5b77;
  border:3px solid #17171c;
  border-radius:0;
  box-shadow:5px 5px 0 #17171c;
}

.primary-button:hover{
  filter:none;
  transform:translate(-1px,-1px);
  box-shadow:7px 7px 0 #17171c;
}

.ghost-button{
  color:#17171c;
  background:#fff;
  border:2px solid #17171c;
  border-radius:0;
  box-shadow:3px 3px 0 #ffdd3f;
}

.preview-badge,
.profile>span{
  color:#17171c;
  background:#ffdf3f;
  border:2px solid #17171c;
  border-radius:0;
}

.profile{border-left:2px solid #17171c;}
.logout-button{color:#25233c;font-weight:900;}

.panel,
.stat-card,
.event-hero,
.attendance-editor,
.filter-tabs,
.roster-catalog,
.roster-template-bar,
.roster-history,
.account-panel,
.account-card,
.login-card{
  color:#17171c;
  background:#fff;
  border:3px solid #17171c;
  border-radius:0;
  box-shadow:7px 7px 0 #17171c;
}

.panel:nth-of-type(3n+1),.stat-card:nth-child(3n+1){box-shadow:7px 7px 0 #58d7dc;}
.panel:nth-of-type(3n+2),.stat-card:nth-child(3n+2){box-shadow:7px 7px 0 #ffdd3f;}
.panel:nth-of-type(3n),.stat-card:nth-child(3n){box-shadow:7px 7px 0 #ff5b77;}

.stats-grid{gap:17px;margin-bottom:21px;}
.stat-card{position:relative;transform:rotate(-.25deg);}
.stat-card:nth-child(even){transform:rotate(.35deg);}
.stat-card strong{font-family:inherit;font-weight:900;}
.stat-icon{border:2px solid #17171c;border-radius:50%;}
.stat-card.rose .stat-icon{color:#17171c;background:#ff8da3;}
.stat-card.blue .stat-icon{color:#17171c;background:#58d7dc;}
.stat-card.violet .stat-icon{color:#17171c;background:#bf9aff;}
.stat-card.amber .stat-icon{color:#17171c;background:#ffdf3f;}

.panel-header,
.attendance-column>header,
.external-support-panel>header{
  color:#17171c;
  background:#58d7dc;
  border-bottom:3px solid #17171c;
}

.panel-header h3,.attendance-column h3,.external-support-panel h3{
  font-family:inherit;
  font-weight:900;
}

.overview-grid>.panel:nth-child(2) .panel-header{background:#ffdd3f;}
.attendance-columns>.attendance-column:nth-child(1)>header{background:#58d7dc;}
.attendance-columns>.attendance-column:nth-child(2)>header{background:#ffdd3f;}
.attendance-columns>.attendance-column:nth-child(3)>header{background:#ff7893;}

.event-row,
.todo-list button,
.table-row,
.attendance-cards>div,
.external-list>div{
  background:#fff;
  border-color:#17171c;
}

.event-row:hover{background:#fff3aa;}
.event-date,.todo-icon,.type-pill{border:2px solid #17171c;border-radius:0;}
.event-date{color:#17171c;background:#ff8ca3;}
.event-date.practice,.type-pill.practice{color:#17171c;background:#b7ef65;}
.event-date.dragon,.type-pill.dragon{color:#17171c;background:#bf9aff;}
.type-pill{color:#17171c;background:#ff9cb0;}

.bot-card{
  color:#fff;
  background:#25233c;
  border:2px solid #17171c;
  border-radius:0;
  box-shadow:4px 4px 0 #ff5b77;
}

.table-toolbar,
.attendance-toolbar{
  background:#fff;
  border-bottom:3px solid #17171c;
}

.search,
.member-select-control select,
.event-picker,
.attendance-editor select,
.attendance-cards select,
.external-form input,
.external-form select,
.table-row select,
.account-panel input,
.account-panel select{
  color:#17171c;
  background:#fff;
  border:2px solid #17171c;
  border-radius:0;
}

.search:focus-within,
.member-select-control select:focus,
.event-picker:focus,
.external-form input:focus,
.external-form select:focus{
  border-color:#17171c;
  box-shadow:4px 4px 0 #58d7dc;
}

.member-visible-count{
  color:#17171c;
  background:#ffec8e;
  border:2px solid #17171c;
  border-radius:0;
}

.filter-tabs{
  gap:0;
  padding:4px;
  box-shadow:4px 4px 0 #ffdd3f;
}

.filter-tabs button{
  color:#17171c;
  border-radius:0;
  font-weight:900;
}

.filter-tabs button.active{
  color:#fff;
  background:#25233c;
  transform:rotate(-1deg);
}

.table-head{
  color:#17171c;
  background:#58d7dc;
  border-bottom:3px solid #17171c;
  font-weight:900;
}

.member-table .table-row{border-top:2px solid #17171c;}
.member-name>i:not(.profession-icon){border:2px solid #17171c;border-radius:0;}
.member-name-edit{border-radius:0;}
.member-name-edit:hover,.member-name-edit:focus{border-color:#17171c;background:#fff0a5;box-shadow:3px 3px 0 #58d7dc;}

.event-hero{
  position:relative;
  background:#58d7dc;
  margin-bottom:19px;
  clip-path:polygon(0 0,97% 0,100% 19%,100% 100%,3% 100%,0 81%);
}

.event-hero::after{
  content:"WOW!";
  position:absolute;
  right:20px;
  top:-13px;
  color:#17171c;
  background:#ffdd3f;
  border:2px solid #17171c;
  padding:3px 8px;
  font-size:11px;
  font-weight:900;
  transform:rotate(6deg);
}

.event-emblem{
  color:#17171c;
  background:#ff5b77;
  border:3px solid #17171c;
  border-radius:50%;
}

.event-emblem.practice{background:#b7ef65;}
.event-emblem.dragon{background:#bf9aff;}
.event-hero h2{font-family:inherit;font-weight:900;}
.hero-count{border-left:2px solid #17171c;}
.hero-count b{font-family:inherit;font-weight:900;}

.attendance-editor{
  background:#fff;
  margin-bottom:18px;
}

.attendance-column{
  color:#17171c;
  background:#fff;
  border:3px solid #17171c;
  border-radius:0;
  box-shadow:7px 7px 0 #17171c;
}

.attendance-columns>.attendance-column:nth-child(1){box-shadow:7px 7px 0 #58d7dc;}
.attendance-columns>.attendance-column:nth-child(2){box-shadow:7px 7px 0 #ffdd3f;transform:rotate(.25deg);}
.attendance-columns>.attendance-column:nth-child(3){box-shadow:7px 7px 0 #ff5b77;transform:rotate(-.25deg);}

.attendance-cards{padding:0;}
.attendance-cards>div{padding:6px 13px;border-bottom:2px solid #17171c;}
.attendance-cards>div:last-child{border-bottom:0;}
.attendance-cards>div>i:not(.profession-icon){border:2px solid #17171c;border-radius:50%;}
.profession-icon{border:2px solid #17171c!important;border-radius:50%!important;}

.attendance-filter-panel{overflow:visible;}
.attendance-controls{
  border:3px solid #17171c;
  background:#fff;
  box-shadow:7px 7px 0 #ff5b77;
}

.attendance-controls>div{border-color:#17171c!important;}
.attendance-controls>div>span{color:#17171c!important;background:#ffdd3f!important;border:2px solid #17171c;border-radius:0!important;}

.roster-history{
  background:#fff;
  padding:12px;
}

.roster-catalog>summary,
.roster-template-bar{
  color:#17171c;
  background:#fff!important;
  border-bottom:3px solid #17171c;
}

.roster-group-editor{
  background:#fff;
  border:3px solid #17171c;
  border-radius:0;
  box-shadow:7px 7px 0 #58d7dc;
}

.roster-group-editor>header{
  color:#fff;
  background:#25233c!important;
  border-bottom:3px solid #17171c!important;
}

.roster-team-card{
  border-color:#17171c!important;
  background:#fff;
}

.roster-team-card>h4{
  color:#17171c!important;
  background:#58d7dc!important;
  border-color:#17171c!important;
}

.roster-team-card:nth-child(2n)>h4{background:#ffdd3f!important;}
.roster-slot-editor,.roster-slot-editor.job-colored{border-color:#17171c!important;}

.roster-template-actions .primary-button,
.roster-template-actions .ghost-button{border-width:2px;}

.external-support-panel.compact,
.sidebar>.external-support-panel.compact{
  color:#fff!important;
  background:#34314c!important;
  border:2px solid #fff!important;
  border-radius:0!important;
  box-shadow:4px 4px 0 #17171c!important;
}

.external-support-panel.compact>header{
  color:#17171c!important;
  background:#ffdd3f!important;
  border-bottom:2px solid #17171c!important;
}

.external-support-panel.compact h3{color:#17171c!important;}
.external-support-panel.compact .external-list>div{background:#25233c;border:1px solid #817ca1;border-radius:0;}

.toast{
  color:#17171c;
  background:#b7ef65;
  border:3px solid #17171c;
  border-radius:0;
  box-shadow:5px 5px 0 #17171c;
}

.login-shell,.auth-shell{
  background-color:#fff7cf!important;
  background-image:radial-gradient(#e7c72e 1.15px,transparent 1.15px)!important;
  background-size:11px 11px!important;
}

@media(max-width:980px){
  .app-shell{grid-template-columns:185px minmax(0,1fr);}
  .sidebar{padding-inline:12px;}
  .content{padding-inline:20px;}
}

@media(max-width:760px){
  .app-shell{display:block;}
  .sidebar{
    position:relative;
    width:auto;
    height:auto;
    border-right:0;
    border-bottom:5px solid #17171c;
  }
  .main-nav button.active{transform:none;}
  .content{padding:18px 13px 35px;}
  .topbar{padding-inline:14px;}
  .topbar h1,.welcome-row h2,.table-toolbar h2,.section-actions h2,.manager-heading h2{box-shadow:3px 3px 0 #ff5b77;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .attendance-columns{grid-template-columns:1fr;gap:18px;}
  .attendance-column{transform:none!important;}
}

@media(max-width:520px){
  .stats-grid{grid-template-columns:1fr;}
  .topbar{align-items:flex-start;}
  .top-actions{flex-wrap:wrap;justify-content:flex-end;}
  .event-hero{clip-path:none;}
}

/* 登入／註冊頁沿用漫畫貼紙語言，保留原本動態主視覺。 */
.auth-page{
  color:#17171c;
  background:#fff7cf;
  background-image:radial-gradient(#e7c72e 1.15px,transparent 1.15px);
  background-size:11px 11px;
}

.auth-art{border-right:6px solid #17171c;}

.auth-art::after{
  background:linear-gradient(115deg,rgba(37,35,60,.16),rgba(37,35,60,.38) 62%,rgba(23,23,28,.78));
}

.auth-brand>span,
.auth-mobile-brand>span{
  color:#17171c!important;
  background:#ffdf3d!important;
  border:3px solid #17171c!important;
  border-radius:0!important;
  box-shadow:5px 5px 0 #ff5b77!important;
  transform:rotate(-5deg);
}

.auth-brand b,.auth-mobile-brand b{font-family:inherit;font-weight:900;}

.auth-panel{
  background:#fff7cf;
  background-image:radial-gradient(#e7c72e 1.15px,transparent 1.15px);
  background-size:11px 11px;
}

.auth-card{
  color:#17171c;
  background:#fff;
  border:3px solid #17171c;
  border-radius:0;
  padding:38px;
  box-shadow:10px 10px 0 #25233c;
  backdrop-filter:none;
}

.auth-card h2{
  display:inline-block;
  color:#fff;
  background:#25233c;
  border:2px solid #17171c;
  margin:0;
  padding:3px 10px;
  font-family:inherit;
  font-weight:900;
  box-shadow:4px 4px 0 #ff5b77;
  transform:rotate(-1deg);
}

.auth-intro,.remember-row,.auth-security{color:#625f69!important;}

.auth-tabs{
  background:#fff;
  border:3px solid #17171c;
  border-radius:0;
  gap:0;
  padding:4px;
  box-shadow:4px 4px 0 #ffdd3f;
}

.auth-tabs button{
  color:#17171c;
  border-radius:0;
}

.auth-tabs button.active{
  color:#17171c;
  background:#58d7dc;
  box-shadow:none;
  transform:rotate(-1deg);
}

.auth-card form>label:not(.remember-row){color:#17171c;}

.auth-card input[type=text],
.auth-card input[type=password]{
  color:#17171c;
  background:#fff;
  border:3px solid #17171c;
  border-radius:0;
}

.auth-card input:focus{
  border-color:#17171c;
  box-shadow:5px 5px 0 #58d7dc;
}

.remember-row input{accent-color:#ff5b77;}

.auth-submit{
  color:#17171c;
  background:#ff5b77;
  border:3px solid #17171c;
  border-radius:0;
  box-shadow:5px 5px 0 #17171c;
  font-weight:900;
}

.auth-submit:hover{filter:none;transform:translate(-1px,-1px);box-shadow:7px 7px 0 #17171c;}

.auth-error{
  color:#17171c;
  background:#ffb1c0;
  border:2px solid #17171c;
  border-radius:0;
  box-shadow:3px 3px 0 #17171c;
}

@media(max-width:760px){
  .auth-art{border-right:0;border-bottom:5px solid #17171c;}
  .auth-card{border-radius:0;margin-top:-34px;padding:27px 22px;box-shadow:7px 7px 0 #25233c;}
}