/* 薅羊毛 V5.13 · 统一视觉基线
   独立于功能代码：仅调整布局、列宽、字级、边距和响应式呈现。
   后载入，集中收敛历史版本累积的布局覆盖规则。 */

:root{
  --ui-gap:14px;
  --ui-panel-padding:17px;
  --ui-border:#e0e7f0;
  --ui-radius:14px;
  --ui-caption:#6d7d93;
}
html,body{max-width:100%;min-width:0}
body{line-height:1.46}
button,input,select,textarea{min-width:0}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #517fdd;outline-offset:2px;
}
.app-shell{grid-template-columns:236px minmax(0,1fr);width:100%}
.sidebar{min-width:0;padding:21px 16px}
.brand{gap:11px;margin-bottom:21px;min-width:0}
.brand-mark{flex:none}
.brand-copy{min-width:0}
.brand-copy h1,.brand-copy p{overflow:hidden;text-overflow:ellipsis}
.nav-label{margin:15px 10px 5px;font-size:10px}
.nav button{min-height:42px;padding:9px 12px;font-size:14px;line-height:1.35}
.sidebar-foot{width:100%;min-width:0}
.sidebar-sync{min-width:0}
.sidebar-sync-copy{min-width:0}

.main{min-width:0;width:100%;padding:23px clamp(18px,2vw,30px) 40px}
.main>.topbar,.main>.view,.view>*{min-width:0}
.topbar{min-height:75px;gap:20px;align-items:center;margin-bottom:16px}
.topbar>div:first-child{min-width:0;flex:1}
.topbar h2{font-size:29px;line-height:1.18;margin:3px 0 4px;letter-spacing:-.4px}
.topbar p{font-size:13px;line-height:1.5}
.eyebrow{font-size:10px}
.topbar .top-actions{min-width:0}
.global-search-wrap{width:min(360px,36%);flex:none}
.global-search-input{width:100%;min-width:0}
.section-head{min-height:59px;gap:14px;align-items:center;margin-bottom:13px}
.section-head>div{flex:1;min-width:0}
.section-head h3{font-size:21px;line-height:1.24;margin:0}
.section-head p{font-size:13px;line-height:1.45;margin-top:4px}
.section-head>.btn{flex:none;min-height:41px;padding:9px 13px;white-space:nowrap}
.btn,.small-btn,.mini{align-items:center;justify-content:center;line-height:1.35}
.small-btn{min-height:36px}
.module-toolbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:10px;row-gap:8px;margin-bottom:12px;
}
.module-toolbar .search-input{width:100%;min-width:0;min-height:42px;flex:none}
.module-toolbar .toolbar-select{width:190px;max-width:100%;min-height:42px}
.module-toolbar .toolbar-check{justify-self:end;white-space:nowrap;min-height:42px}
.filter-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.filter-pill{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
.metric-grid,.period-summary,.coupon-summary{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ui-gap);margin-bottom:var(--ui-gap);
}
.metric,.summary-box{
  min-width:0;border-radius:var(--ui-radius);border-color:var(--ui-border);
  box-shadow:0 5px 18px rgba(17,36,67,.035);
}
.metric{
  display:flex;flex-direction:column;justify-content:center;
  min-height:111px;padding:14px 16px;
}
.metric .label{font-size:13px;line-height:1.35}
.metric .value{font-size:29px;line-height:1.16;margin:5px 0 1px}
.metric .hint{font-size:12px;line-height:1.4}
.summary-box{
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;min-height:94px;padding:12px 10px;text-align:center;
}
.summary-box b{font-size:27px;line-height:1.15}
.summary-box span{font-size:12px;line-height:1.35;margin-top:5px}

.panel,.table-panel,.period-block{
  border-color:var(--ui-border);border-radius:var(--ui-radius);
}
.panel,.table-panel{padding:var(--ui-panel-padding)}
.panel-head{min-height:39px;gap:12px;align-items:center;margin-bottom:12px}
.panel-head>div{min-width:0}
.panel-head h3{font-size:17px;line-height:1.3}
.panel-head span{font-size:12px;line-height:1.4;margin-top:3px}
.dashboard-primary{
  grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr);
  gap:var(--ui-gap);margin-bottom:var(--ui-gap);
}
.dashboard-primary>.panel,.dashboard-side>.panel,
.dashboard-secondary>.panel,.two-col>.panel{margin-top:0}
.dashboard-side{gap:var(--ui-gap)}
.dashboard-secondary,.two-col{gap:var(--ui-gap);margin-bottom:var(--ui-gap)}
.panel+.panel{margin-top:var(--ui-gap)}
.dashboard-side>.panel+.panel,.two-col>.panel+.panel{margin-top:0}
.dashboard-task-list{gap:7px}
.dashboard-task{
  min-height:65px;padding:10px 12px;
  grid-template-columns:28px minmax(0,1fr) auto;column-gap:10px;
}
.dashboard-task>span{min-width:0}
.dashboard-task span b{font-size:15px;line-height:1.35}
.dashboard-task span small{font-size:12px;line-height:1.4}
.dashboard-task em{font-size:11px;white-space:nowrap;justify-self:end}
.today-progress{margin-bottom:12px}
.shortcut-grid{gap:9px}
.shortcut{min-height:69px;padding:11px 12px}
.shortcut b{font-size:14px}
.shortcut small{font-size:12px}

.period-cycle-tabs{gap:9px;margin-bottom:12px}
.period-cycle-tab{min-width:0;min-height:46px;padding:7px}
.period-cycle-tab span{font-size:13px}
.period-cycle-tab b{font-size:11px}
.period-block{padding:var(--ui-panel-padding);margin-bottom:12px}
.period-head{min-height:45px;align-items:center;gap:10px;margin-bottom:10px}
.period-head h4{font-size:17px;line-height:1.28}
.period-head small{font-size:12px;line-height:1.4}
.period-head>span{flex:none;font-size:12px}
.period-list{gap:7px}
.period-row-compact{
  display:grid;
  grid-template-columns:30px 29px minmax(0,1fr) 108px!important;
  align-items:center;gap:9px;padding:10px 12px;min-height:64px;
}
.period-row-compact>.drag-handle{grid-column:1;grid-row:1;justify-self:center;min-width:27px}
.period-row-compact>.check{grid-column:2;grid-row:1;justify-self:center}
.period-row-compact>.period-main{grid-column:3;grid-row:1;min-width:0}
.period-row-compact>.period-actions{
  display:flex;grid-column:4;grid-row:1;flex-direction:row;
  justify-content:flex-end;align-items:center;gap:5px;min-width:0;
}
.period-title-line{min-width:0}
.period-title-line .period-title{font-size:15px;line-height:1.35}
.period-compact-meta{gap:5px 10px;margin-top:4px;font-size:12px;line-height:1.35}
.period-compact-note{max-width:100%}
.period-actions .mini{min-height:32px;padding:5px 8px;font-size:12px}
.period-row-compact .drag-handle{touch-action:none}
.periodic-detail-body{gap:12px}
.detail-grid{gap:10px}
.detail-item,.detail-note{min-width:0}

.compact-list{
  max-width:100%;min-width:0;
  border:1px solid var(--ui-border);border-radius:var(--ui-radius);
}
.compact-list-head,.compact-list-row{
  box-sizing:border-box;width:100%;min-width:0;column-gap:10px;
  padding-left:14px;padding-right:14px;
}
.compact-list-head{min-height:44px;font-size:12px;line-height:1.35;align-items:center}
.compact-list-head>span{min-width:0}
.compact-list-row{min-height:65px;row-gap:3px}
.compact-list-row>div{min-width:0}
.list-primary b{font-size:14px;line-height:1.4}
.list-primary small{font-size:12px;line-height:1.35}
.list-number b{font-size:14px;font-variant-numeric:tabular-nums}
.list-text{font-size:12px;line-height:1.5}
.list-actions{display:flex;justify-content:flex-end;align-items:center;gap:5px}
.list-actions .mini{min-height:32px;padding:5px 7px;font-size:12px;white-space:nowrap}
.list-date{font-size:12px;font-variant-numeric:tabular-nums}
.credit-list-head,.credit-list-row{
  grid-template-columns:minmax(145px,1.3fr) minmax(72px,.55fr) minmax(72px,.55fr)
    minmax(102px,.82fr) minmax(135px,1.22fr) minmax(75px,.6fr) 116px;
}
.coupon-list-head,.coupon-list-row{
  grid-template-columns:32px minmax(145px,1.25fr) minmax(68px,.52fr)
    minmax(105px,.8fr) minmax(78px,.65fr) minmax(145px,1.22fr) 116px;
}
.knowledge-list-head,.knowledge-list-row{
  grid-template-columns:minmax(155px,1.2fr) minmax(115px,.9fr)
    minmax(180px,2fr) 116px;
}
.credit-list-head>span:nth-child(2),
.credit-list-head>span:nth-child(3),
.credit-list-head>span:nth-child(4),
.credit-list-head>span:nth-child(6),
.credit-list-row>div:nth-child(2),
.credit-list-row>div:nth-child(3),
.credit-list-row>div:nth-child(4),
.credit-list-row>div:nth-child(6),
.coupon-list-head>span:nth-child(1),
.coupon-list-head>span:nth-child(3),
.coupon-list-head>span:nth-child(4),
.coupon-list-head>span:nth-child(5),
.coupon-list-row>div:nth-child(1),
.coupon-list-row>div:nth-child(3),
.coupon-list-row>div:nth-child(4),
.coupon-list-row>div:nth-child(5){
  text-align:center;justify-self:stretch;
}
.credit-list-row .list-number,.coupon-list-row .list-number{align-items:center}
.credit-list-row .list-progress{grid-template-columns:minmax(0,1fr) 37px;gap:5px}
.credit-list-row .list-progress b{font-size:12px;text-align:right}
.coupon-list-row>.list-actions,.credit-list-row>.list-actions,.knowledge-list-row>.list-actions{justify-self:stretch}
.table-scroll{max-width:100%;overflow-x:auto}
.table-panel table{min-width:780px}
.table-panel th,.table-panel td{vertical-align:middle}
.table-panel th{font-size:12px}
.table-panel td{font-size:13px}

.modal .form-grid{gap:12px}
.modal .form-grid label{min-width:0;display:flex;flex-direction:column;gap:6px}
.modal .form-grid input,.modal .form-grid select,.modal .form-grid textarea{width:100%;max-width:100%}
.modal-actions{align-items:center;flex-wrap:wrap;gap:9px}
.modal-actions .btn{min-height:41px}
.sync-choice-grid{align-items:stretch}
.sync-source-box{min-width:0}
.sync-choice-actions{align-items:stretch}
.sync-choice-actions .btn{height:100%}

/* 中等宽度：保证单行列表能容纳全部操作，不截断表头 */
@media(min-width:701px) and (max-width:1220px){
  .app-shell{grid-template-columns:215px minmax(0,1fr)}
  .main{padding-left:18px;padding-right:18px}
  .credit-list-head,.credit-list-row{
    grid-template-columns:minmax(132px,1.3fr) minmax(63px,.55fr) minmax(64px,.55fr)
      minmax(95px,.8fr) minmax(90px,1fr) minmax(70px,.55fr) 108px;
    column-gap:7px;
  }
  .coupon-list-head,.coupon-list-row{
    grid-template-columns:30px minmax(127px,1.25fr) minmax(55px,.5fr)
      minmax(92px,.75fr) minmax(72px,.6fr) minmax(90px,.9fr) 108px;
    column-gap:7px;
  }
  .period-row-compact{grid-template-columns:28px 28px minmax(0,1fr) 102px!important}
}
@media(min-width:701px) and (max-width:1040px){
  .dashboard-primary{grid-template-columns:minmax(0,1fr)}
  .dashboard-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-side>.panel{margin:0}
  .credit-list-head>span:nth-child(5),.credit-list-row>div:nth-child(5),
  .coupon-list-head>span:nth-child(6),.coupon-list-row>div:nth-child(6){display:none}
  .credit-list-head,.credit-list-row{
    grid-template-columns:minmax(145px,1.45fr) minmax(60px,.63fr) minmax(65px,.63fr)
      minmax(90px,.9fr) minmax(78px,.75fr) 106px;
  }
  .coupon-list-head,.coupon-list-row{
    grid-template-columns:32px minmax(145px,1.4fr) minmax(66px,.55fr)
      minmax(100px,.9fr) minmax(74px,.75fr) 106px;
  }
}

/* 手机端：以同一页边距和纵向间距作为全页对齐基线 */
@media(max-width:700px){
  :root{--ui-gap:10px;--ui-panel-padding:12px;--ui-radius:13px}
  html,body{max-width:100%;overflow-x:clip}
  .app-shell{display:block;min-width:0}
  .sidebar{padding:10px 12px!important;min-width:0}
  .sidebar:not(.mobile-collapsed){
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;align-items:stretch;
  }
  .sidebar:not(.mobile-collapsed)>.brand{grid-column:1/-1;width:100%}
  .sidebar:not(.mobile-collapsed)>.sidebar-foot{
    grid-column:1/-1;display:flex!important;flex-direction:row;
    margin:4px 0 0;padding-top:8px;align-items:center;width:100%;gap:8px;
  }
  .sidebar:not(.mobile-collapsed) .nav button{min-width:0;min-height:43px;padding:7px 2px;font-size:13px;text-align:center}
  .sidebar.mobile-collapsed{display:block;padding:9px 12px!important}
  .sidebar.mobile-collapsed>.sidebar-foot{width:100%;min-width:0;margin:5px 0 0}
  .sidebar-foot .sidebar-sync{min-width:0}
  .sidebar-foot .sidebar-sync-copy{min-width:0;flex:1}
  .sidebar-foot .sidebar-sync-copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar .brand{min-width:0;align-items:center}
  .brand-copy{min-width:0}
  .main{width:100%;min-width:0;padding:13px 12px calc(96px + env(safe-area-inset-bottom))!important}
  .topbar{min-height:0;display:block;margin:0 0 12px}
  .topbar h2{font-size:23px;line-height:1.22;margin:2px 0 4px}
  .topbar p{font-size:12px;line-height:1.45}
  .topbar .top-actions{width:100%;margin-top:9px}
  .global-search-wrap{width:100%;max-width:none}
  .global-search-input{min-height:41px}
  .section-head{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:10px}
  .section-head h3{font-size:19px}
  .section-head p{font-size:12px;line-height:1.4}
  .section-head>.btn{min-height:39px;max-width:155px;white-space:normal;font-size:13px;padding:7px 9px;line-height:1.3}
  .metric-grid,.period-summary,.coupon-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
  .metric{min-height:94px;padding:11px 12px}
  .metric .label{font-size:12px}
  .metric .value{font-size:25px;line-height:1.2;margin:4px 0}
  .metric .hint{font-size:11px}
  .summary-box{min-height:78px;padding:10px 6px}
  .summary-box b{font-size:25px}
  .summary-box span{font-size:11px;margin-top:4px}
  .dashboard-primary{display:block;margin-bottom:10px}
  .dashboard-side{display:block}
  .dashboard-side>.panel{margin:10px 0 0}
  .dashboard-side>.panel+.panel{margin-top:10px}
  .dashboard-secondary{display:block}
  .dashboard-secondary>.panel{margin:0 0 10px}
  .two-col{grid-template-columns:1fr;gap:10px}
  .two-col>.panel{margin:0}
  .panel,.table-panel{padding:12px;border-radius:13px}
  .panel-head{min-height:36px;margin-bottom:10px;gap:8px}
  .panel-head h3{font-size:17px}
  .panel-head span{font-size:11px}
  .dashboard-task{grid-template-columns:28px minmax(0,1fr) auto!important;
    min-height:60px;padding:10px!important;gap:8px;align-items:center}
  .dashboard-task>span{min-width:0}
  .dashboard-task span b{font-size:15px;line-height:1.3}
  .dashboard-task span small{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dashboard-task em{grid-column:3!important;grid-row:1!important;justify-self:end!important;white-space:nowrap}
  .dashboard-task .check{width:26px;height:26px}
  .shortcut-grid{gap:8px}
  .shortcut{min-height:64px;padding:9px 10px}
  .shortcut b{font-size:13px}
  .shortcut small{font-size:11px}
  .module-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:10px}
  .module-toolbar .search-input,.module-toolbar .toolbar-select{width:100%;max-width:100%;min-height:41px}
  .module-toolbar .toolbar-check{justify-self:start}
  .period-cycle-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;overflow:visible;margin:0 0 9px}
  .period-cycle-tab{min-height:44px;min-width:0;padding:5px 2px;gap:2px;border-radius:10px}
  .period-cycle-tab span{font-size:12px;white-space:nowrap}
  .period-cycle-tab b{font-size:10px;min-width:0;padding:2px 5px}
  .period-block{padding:11px 9px;border-radius:13px;margin-bottom:10px}
  .period-head{min-height:36px;align-items:center;margin-bottom:9px;padding:0 2px}
  .period-head h4{font-size:17px}
  .period-head small{font-size:11px;line-height:1.35}
  .period-list{gap:7px}
  .period-row-compact{
    grid-template-columns:28px 26px minmax(0,1fr) 14px!important;
    column-gap:7px!important;row-gap:0!important;
    min-height:66px;padding:9px 8px!important;border-radius:11px;
  }
  .period-row-compact>.drag-handle{grid-column:1;grid-row:1;justify-self:center;width:29px;min-width:29px;min-height:42px}
  .period-row-compact>.check{grid-column:2;grid-row:1;justify-self:center;width:26px;height:26px}
  .period-row-compact>.period-main{grid-column:3!important;grid-row:1;min-width:0}
  .period-row-compact>.period-actions{display:none!important}
  .period-row-compact::after{grid-column:4;grid-row:1;align-self:center;justify-self:end}
  .period-title-line .period-title{font-size:15px}
  .period-compact-meta{font-size:11.5px;line-height:1.45;margin-top:3px;gap:3px 7px}
  .period-compact-note{max-width:100%}
  .filter-row{gap:6px}
  .filter-pill{min-height:38px;padding:6px 10px;font-size:12px}
  .compact-list{border-radius:12px}
  .compact-list-head{display:none}
  .compact-list-row{width:100%;min-width:0;padding:9px 10px;column-gap:8px;row-gap:4px}
  .credit-list-row,.coupon-list-row,.knowledge-list-row{align-items:center}
  .credit-list-row{
    grid-template-columns:minmax(0,1fr) auto auto;min-height:116px;
  }
  .credit-list-row .list-primary{grid-column:1/3;grid-row:1}
  .credit-list-row>div:nth-child(6){grid-column:3;grid-row:1}
  .credit-list-row>div:nth-child(2){grid-column:1;grid-row:2}
  .credit-list-row>div:nth-child(3){grid-column:2;grid-row:2}
  .credit-list-row>div:nth-child(4){grid-column:1/3;grid-row:3}
  .credit-list-row>div:nth-child(5){grid-column:1/3;grid-row:4}
  .credit-list-row .list-actions{grid-column:3;grid-row:2/5;flex-direction:column;align-self:center}
  .credit-list-row .list-number{align-items:flex-start}
  .credit-list-row .list-text{text-align:left}
  .credit-list-row .list-progress{grid-template-columns:minmax(0,1fr) 37px}
  .coupon-list-row{
    grid-template-columns:30px minmax(0,1fr) auto;min-height:86px;
  }
  .coupon-list-row>div:nth-child(1){grid-column:1;grid-row:1/3}
  .coupon-list-row>div:nth-child(2){grid-column:2;grid-row:1}
  .coupon-list-row>div:nth-child(3){grid-column:3;grid-row:1}
  .coupon-list-row>div:nth-child(4){grid-column:2;grid-row:2}
  .coupon-list-row>div:nth-child(5){grid-column:3;grid-row:2}
  .coupon-list-row>div:nth-child(6){grid-column:2;grid-row:3;text-align:left;justify-self:start}
  .coupon-list-row>.list-actions{grid-column:3;grid-row:3;align-self:center}
  .knowledge-list-row{
    grid-template-columns:minmax(0,1fr) auto;min-height:78px;
  }
  .knowledge-list-row>div:nth-child(1){grid-column:1;grid-row:1}
  .knowledge-list-row>div:nth-child(2){grid-column:1;grid-row:2}
  .knowledge-list-row>div:nth-child(3){grid-column:1;grid-row:3}
  .knowledge-list-row>.list-actions{grid-column:2;grid-row:1/4;flex-direction:column;align-self:center}
  .list-primary b{font-size:14px}
  .list-primary small,.list-text,.list-date{font-size:12px}
  .list-actions{gap:5px}
  .list-actions .mini{min-height:32px;padding:5px 8px;font-size:12px}
  .sync-choice-grid{grid-template-columns:1fr;gap:8px}
  .sync-choice-actions{grid-template-columns:1fr;gap:8px}
  .sync-choice-actions button:last-child{grid-column:1}
  .modal{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .modal .form-grid{gap:10px}
  .modal-actions{justify-content:flex-end;gap:8px}
  .mobile-bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));width:100%}
  .mobile-bottom-nav button{min-width:0}
  .mobile-bottom-nav svg{flex:none}
}
@media(max-width:350px){
  .main{padding-left:10px!important;padding-right:10px!important}
  .sidebar{padding-left:10px!important;padding-right:10px!important}
  .section-head>.btn{max-width:128px}
  .period-cycle-tab span{font-size:11px}
  .period-cycle-tab b{font-size:9px}
}