/* H + J + Z MIX：柔和奶油、粗框圓角、漫畫貼紙撞色 */
:root{
  --ink:#29263b;
  --muted:#716c7b;
  --line:#29263b;
  --paper:#fffdf6;
  --rose:#f45d82;
  --rose-dark:#29263b;
  --rose-soft:#ffdbe6;
  --nav:#55cedc;
  --page:#fff8e6;
  --surface:#fffef9;
  --surface-soft:#fff2c5;
  --gold:#ffd967;
  --mist:#6ed7df;
}

html,body{color:#29263b;background:#fff8e6;}

.app-shell{
  grid-template-columns:210px minmax(0,1fr);
  background-color:#fff8e6;
  background-image:radial-gradient(#e9d8a7 1px,transparent 1px),linear-gradient(rgba(245,221,178,.22) 1px,transparent 1px);
  background-size:12px 12px,100% 32px;
}

.sidebar{
  color:#29263b;
  background:#58cfdd;
  border-right:4px solid #29263b;
}

.brand-mark{
  color:#29263b;
  background:#ffd966;
  border:3px solid #29263b;
  border-radius:50%;
  box-shadow:4px 4px 0 #fff;
  transform:rotate(-4deg);
}

.brand strong{color:#29263b;}
.brand span{color:#4d5364;}

.main-nav button{color:#343246;border-radius:16px 5px 16px 5px;}
.main-nav button span{background:#fff;border-color:#29263b;border-radius:0;}
.main-nav button:hover{color:#29263b;background:#c9f4ee;border-color:#29263b;}

.main-nav button.active{
  color:#29263b;
  background:#ffdf61;
  border:3px solid #29263b;
  border-radius:22px 7px 22px 7px;
  box-shadow:6px 6px 0 #29263b;
  transform:translateX(-2px) rotate(-1deg);
}

.main-nav button.active span{background:#ff9ab4;border-color:#29263b;}

.sidebar-foot{
  color:#29263b;
  background:#c9f5ec;
  border:2px solid #29263b;
  border-radius:14px 5px 14px 5px;
  box-shadow:4px 4px 0 #29263b;
}

.sidebar-foot small{color:#565669;}

.topbar{
  background:#fff9eb;
  border-bottom:2px solid #29263b;
}

.topbar h1,
.welcome-row h2,
.table-toolbar h2,
.section-actions h2,
.manager-heading h2{
  color:#29263b;
  background:#fff;
  border:3px solid #29263b;
  border-radius:18px 6px 18px 6px;
  box-shadow:6px 6px 0 #29263b;
  transform:rotate(-.5deg);
}

.eyebrow{
  display:inline-block;
  color:#29263b!important;
  background:#8de2e6;
  padding:4px 9px!important;
  border:2px solid #29263b;
}

.primary-button{
  color:#fff;
  background:#f35d82;
  border:3px solid #29263b;
  border-radius:999px;
  box-shadow:5px 5px 0 #29263b;
}

.ghost-button{
  color:#29263b;
  background:#fff;
  border:2px solid #29263b;
  border-radius:12px;
  box-shadow:3px 3px 0 #ffd966;
}

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

.panel:nth-of-type(3n+1),.stat-card:nth-child(3n+1){box-shadow:7px 7px 0 #78dce1;}
.panel:nth-of-type(3n+2),.stat-card:nth-child(3n+2){box-shadow:7px 7px 0 #ffd966;}
.panel:nth-of-type(3n),.stat-card:nth-child(3n){box-shadow:7px 7px 0 #f58cac;}

.stat-card{transform:none;}
.stat-card:nth-child(even){transform:none;}
.stat-icon{border-color:#29263b;}
.stat-card.rose .stat-icon{background:#ffb0c2;}
.stat-card.blue .stat-icon{background:#8de3e7;}
.stat-card.violet .stat-icon{background:#d9c5f6;}
.stat-card.amber .stat-icon{background:#ffe58d;}

.panel-header,
.attendance-column>header,
.external-support-panel>header{
  color:#29263b;
  background:#eafbf7;
  border-bottom:2px solid #29263b;
}

.overview-grid>.panel:nth-child(2) .panel-header{background:#fff0ba;}
.event-row,.todo-list button,.table-row,.external-list>div{border-color:#b9afbd;background:#fff;}
.event-date,.todo-icon,.type-pill{border-color:#29263b;border-radius:10px 3px 10px 3px;}

.table-toolbar,.attendance-toolbar{background:#fffef9;border-bottom:2px dashed #b7aab9;}

.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:#29263b;
  background:#fff;
  border:2px solid #29263b;
  border-radius:12px 4px 12px 4px;
}

.member-visible-count{
  color:#29263b;
  background:#f0e6ff;
  border:2px solid #29263b;
  border-radius:12px;
}

.filter-tabs{padding:4px;border-radius:999px;box-shadow:4px 4px 0 #29263b;}
.filter-tabs button{border-radius:999px;}
.filter-tabs button.active{color:#fff;background:#f35d82;transform:none;}

.table-head{color:#29263b;background:#8be2e5;border-bottom:2px solid #29263b;}
.member-table .table-row{border-top:1px solid #c8bec9;}

.event-hero{
  background:#fff0ad;
  border-radius:22px 8px 22px 8px;
  border-left:8px solid #f35d82;
  box-shadow:7px 7px 0 #29263b;
  clip-path:none;
}

.event-hero::after{
  content:"WOW!";
  color:#29263b;
  background:#ffdd64;
  border-color:#29263b;
  border-radius:9px 3px 9px 3px;
}

.event-emblem{
  color:#fff;
  background:#f35d82;
  border-color:#29263b;
  border-radius:14px 5px 14px 5px;
  transform:rotate(-4deg);
}

.event-emblem.practice{background:#9bd882;}
.event-emblem.dragon{background:#b79ae0;}
.hero-count{border-color:#b6a9b8;}

.attendance-controls{
  background:#fffef9;
  border:3px dashed #a99eae;
  border-radius:22px 8px 22px 8px;
  box-shadow:6px 6px 0 #d7cfe7;
}

.attendance-controls>div{border-color:#b6a9b8!important;}
.attendance-controls>div>span{color:#29263b!important;background:#f8a6ba!important;border-color:#29263b;border-radius:50%!important;}

.attendance-column{
  color:#29263b;
  border:3px solid #29263b;
  border-radius:22px 8px 22px 8px;
  box-shadow:7px 7px 0 #29263b;
  overflow:hidden;
}

.attendance-columns>.attendance-column:nth-child(1){background:#ebfff8;box-shadow:7px 7px 0 #8adfd8;}
.attendance-columns>.attendance-column:nth-child(2){background:#fff2bd;box-shadow:7px 7px 0 #d5aa58;transform:none;}
.attendance-columns>.attendance-column:nth-child(3){background:#fff0f6;box-shadow:7px 7px 0 #e7a5bc;transform:none;}
.attendance-columns>.attendance-column:nth-child(1)>header{background:#d9f8f1;}
.attendance-columns>.attendance-column:nth-child(2)>header{background:#ffeaa0;}
.attendance-columns>.attendance-column:nth-child(3)>header{background:#ffd9e8;}
.attendance-cards>div{background:transparent;border-color:#b9afb9;}

.profession-icon{border-color:#29263b!important;background:#fffaf2!important;}

.roster-catalog>summary,.roster-template-bar{background:#fffef9!important;border-color:#29263b;}
.roster-group-editor{border-radius:18px 6px 18px 6px;box-shadow:7px 7px 0 #78dce1;}
.roster-group-editor>header{background:#29263b!important;}
.roster-team-card>h4{background:#8be2e5!important;}
.roster-team-card:nth-child(2n)>h4{background:#ffe277!important;}

.external-support-panel.compact,
.sidebar>.external-support-panel.compact{
  color:#29263b!important;
  background:#c9f5ec!important;
  border:2px solid #29263b!important;
  border-radius:14px 5px 14px 5px!important;
  box-shadow:4px 4px 0 #29263b!important;
}

.external-support-panel.compact>header{background:#ffdd67!important;border-color:#29263b!important;}
.external-support-panel.compact .external-list>div{color:#fff;background:#3b3852;border-color:#29263b;}

/* MIX 登入頁 */
.auth-page{
  color:#29263b;
  background:#fff8e6;
  background-image:radial-gradient(#e9d8a7 1px,transparent 1px);
  background-size:12px 12px;
}

.auth-art{
  border-right:4px solid #29263b;
  background-image:url("/assets/login-comic-guild-art-title-20260824.png")!important;
  background-size:108% auto!important;
  background-position:50% 48%!important;
  animation:mixAuthArtDrift 12s ease-in-out infinite alternate;
}

.auth-art-shade{
  background:linear-gradient(180deg,rgba(255,255,255,0) 54%,rgba(41,38,59,.2) 100%)!important;
}

@keyframes mixAuthArtDrift{
  from{background-size:108% auto;background-position:48% 49%;}
  to{background-size:114% auto;background-position:52% 46%;}
}

.auth-panel{
  background-color:#fff8e6;
  background-image:radial-gradient(#e9d8a7 1px,transparent 1px),linear-gradient(rgba(245,221,178,.24) 1px,transparent 1px);
  background-size:12px 12px,100% 32px;
}

.auth-card{
  color:#29263b;
  background:#fffef9;
  border:3px solid #29263b;
  border-radius:24px 8px 24px 8px;
  box-shadow:10px 10px 0 #58cfdd;
}

.auth-card h2{
  color:#29263b;
  background:#fff;
  border-color:#29263b;
  border-radius:16px 5px 16px 5px;
  box-shadow:5px 5px 0 #f35d82;
}

.auth-intro,.remember-row,.auth-security{color:#716c7b!important;}
.auth-tabs{border-color:#29263b;border-radius:999px;box-shadow:4px 4px 0 #ffda68;overflow:hidden;}
.auth-tabs button{border-radius:999px;}
.auth-tabs button.active{color:#29263b;background:#78dce1;}
.auth-card form>label:not(.remember-row){color:#29263b;}

.auth-card input[type=text],.auth-card input[type=password]{
  color:#29263b;
  background:#fff;
  border:2px solid #29263b;
  border-radius:14px 5px 14px 5px;
}

.auth-card input:focus{border-color:#29263b;box-shadow:5px 5px 0 #78dce1;}
.auth-submit{color:#fff;background:#f35d82;border-color:#29263b;border-radius:999px;box-shadow:5px 5px 0 #29263b;}

/* 新版一劍飛花 Logo：桌面放在 GIF 左側主視覺。 */
.auth-brand{
  width:min(620px,88%);
  height:160px;
  left:4%;
  bottom:4%;
  background:url("/assets/yijian-feihua-logo-mix-pink-20260824.png") left center/contain no-repeat;
  filter:drop-shadow(0 10px 0 rgba(20,18,30,.45));
  text-shadow:none;
}

.auth-brand>*{display:none!important;}
.auth-brand{display:none!important;}

@media(max-width:980px){
  .app-shell{grid-template-columns:190px minmax(0,1fr);}
}

@media(max-width:760px){
  .sidebar{border-right:0;border-bottom:4px solid #29263b;}
  .main-nav button.active{transform:none;}
  .attendance-column{transform:none!important;}
  .auth-art{border-right:0;border-bottom:4px solid #29263b;}
  .auth-art::before{
    content:none;
    display:none;
    z-index:2;
    position:absolute;
    left:5%;
    right:5%;
    bottom:5%;
    height:92px;
    background:url("/assets/yijian-feihua-logo-mix-pink-20260824.png") center bottom/contain no-repeat;
    filter:drop-shadow(0 6px 0 rgba(20,18,30,.42));
  }
  .auth-card{border-radius:20px 6px 20px 6px;box-shadow:7px 7px 0 #58cfdd;}
  .auth-mobile-brand{display:none!important;}
}

@media(max-width:520px){
  .event-hero{clip-path:none;}
  .auth-art::before{height:74px;}
}