/* ================================================
   律智 AI — 应用页面共享样式 v2
   Design System: Navy Trust + Teal Accent
   Refinement: Professional Legal SaaS
   ================================================ */

/* === DESIGN TOKENS === */
:root {
  --p50:#eef2ff;--p100:#dbe4ff;--p200:#bac8ff;--p300:#91a7ff;
  --p400:#748ffc;--p500:#4c6ef5;--p600:#3b5bdb;--p700:#364fc7;
  --p800:#1e3a5f;--p900:#0c1d36;
  --accent:#0d9488;--accent-light:#14b8a6;--accent-bg:rgba(13,148,136,.08);
  --n50:#f8fafc;--n100:#f1f5f9;--n200:#e2e8f0;--n300:#cbd5e1;
  --n400:#94a3b8;--n500:#64748b;--n600:#475569;--n700:#334155;
  --n800:#1e293b;--n900:#0f172a;
  --ok:#10b981;--ok-bg:rgba(16,185,129,.08);
  --warn:#f59e0b;--warn-bg:rgba(245,158,11,.08);
  --err:#ef4444;--err-bg:rgba(239,68,68,.08);
  --info:#3b82f6;--info-bg:rgba(59,130,246,.08);
  --ff:'Inter','Noto Sans SC',system-ui,sans-serif;
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.04);
  --transition-fast:150ms cubic-bezier(.4,0,.2,1);
  --transition-base:200ms cubic-bezier(.4,0,.2,1);
  --transition-smooth:300ms cubic-bezier(.4,0,.2,1);
}

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--ff);font-size:14px;line-height:1.6;color:var(--n700);background:var(--n50)}
img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;touch-action:manipulation}
:focus-visible{outline:2px solid var(--p500);outline-offset:2px;border-radius:var(--radius-sm)}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;background:var(--p600);color:#fff;padding:8px 16px;border-radius:var(--radius-sm);font-weight:600;font-size:13px;transition:top var(--transition-fast)}
.skip-link:focus{top:16px}
::selection{background:var(--p100);color:var(--p700)}

/* === SVG ICON SYSTEM === */
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-sm{width:16px;height:16px;stroke-width:2}
.icon-md{width:22px;height:22px}
.icon-lg{width:28px;height:28px;stroke-width:1.6}

/* === LAYOUT === */
.app{display:flex;min-height:100vh}
.sidebar{width:264px;background:#fff;border-right:1px solid var(--n200);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;transition:transform var(--transition-smooth)}
.main{flex:1;margin-left:264px;min-height:100vh;background:var(--n50)}
.main-i{padding:32px;max-width:1200px}

/* === SIDEBAR === */
.sb-brand{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--n100)}
.sb-logo{width:34px;height:34px;background:linear-gradient(135deg,var(--p700),var(--p500));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;box-shadow:var(--shadow-sm)}
.sb-name{font-size:17px;font-weight:700;color:var(--p900);letter-spacing:-.01em}.sb-name span{color:var(--p600)}
.sb-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.sb-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--n500);transition:all var(--transition-fast);position:relative}
.sb-item:hover{background:var(--p50);color:var(--p600)}
.sb-item:active{transform:scale(.98)}
.sb-item.active{background:var(--p50);color:var(--p600);font-weight:600}
.sb-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--p500)}
.sb-item-ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:inherit}
.sb-section{font-size:11px;font-weight:600;color:var(--n400);letter-spacing:.08em;padding:20px 16px 8px;text-transform:uppercase}
.sb-footer{padding:16px 20px;border-top:1px solid var(--n100)}
.sb-user{display:flex;align-items:center;gap:10px}
.sb-avatar{width:36px;height:36px;border-radius:9999px;background:linear-gradient(135deg,var(--accent),var(--accent-light));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px;flex-shrink:0}
.sb-uname{font-size:13px;font-weight:600;color:var(--n800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-urole{font-size:11px;color:var(--n400)}
.sb-logout{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--n400);transition:all var(--transition-fast);flex-shrink:0}
.sb-logout:hover{color:var(--err);background:var(--err-bg)}

/* === TOP BAR === */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.topbar-l{display:flex;align-items:center;gap:16px}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--n400)}
.breadcrumb a{color:var(--n500);transition:color var(--transition-fast);border-radius:4px;padding:2px 4px}
.breadcrumb a:hover{color:var(--p600);background:var(--p50)}
.breadcrumb .sep{color:var(--n300);font-size:10px}
.breadcrumb .current{color:var(--n700);font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:13px;padding:8px 20px;border-radius:var(--radius-sm);transition:all var(--transition-fast);white-space:nowrap;position:relative;overflow:hidden;touch-action:manipulation;user-select:none}
.btn-p{background:linear-gradient(135deg,var(--p600),var(--p700));color:#fff;box-shadow:0 2px 8px rgba(54,79,199,.25)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(54,79,199,.35)}
.btn-p:active{transform:translateY(0) scale(.97);box-shadow:0 1px 4px rgba(54,79,199,.2)}
.btn-o{border:1.5px solid var(--n200);color:var(--n600);background:#fff}
.btn-o:hover{border-color:var(--p300);color:var(--p600);background:var(--p50)}
.btn-o:active{background:var(--p100);transform:scale(.97)}
.btn-g{color:var(--n500);padding:8px;border-radius:var(--radius-sm)}
.btn-g:hover{color:var(--p600);background:var(--p50)}
.btn-d{color:var(--err);padding:8px}
.btn-d:hover{background:var(--err-bg);border-radius:var(--radius-sm)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:var(--radius-sm)}
.btn-lg{padding:12px 28px;font-size:15px;border-radius:var(--radius-md)}
.btn-ico{width:36px;height:36px;padding:0;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* === CARDS === */
.card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--n200);overflow:hidden;box-shadow:var(--shadow-xs);transition:box-shadow var(--transition-base),transform var(--transition-fast)}
.card--interactive:hover,.dm-card:hover,.feat:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.card--static{box-shadow:var(--shadow-xs);transition:none}
.card-h{padding:18px 24px;border-bottom:1px solid var(--n100);display:flex;align-items:center;justify-content:space-between}
.card-t{font-size:15px;font-weight:700;color:var(--n800);display:flex;align-items:center;gap:8px}
.card-b{padding:24px}

/* === BADGES / STATUS === */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.4}
.badge-ok{background:var(--ok-bg);color:#065f46}
.badge-warn{background:var(--warn-bg);color:#92400e}
.badge-err{background:var(--err-bg);color:#991b1b}
.badge-info{background:var(--info-bg);color:#1e40af}
.badge-neutral{background:var(--n100);color:var(--n600)}

/* === FORMS === */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--n700);margin-bottom:6px}
.form-hint{font-size:12px;color:var(--n400);margin-top:4px}
.form-req{color:var(--err);margin-left:2px}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;border:1.5px solid var(--n200);border-radius:var(--radius-sm);font-size:14px;font-family:var(--ff);color:var(--n700);background:#fff;transition:all var(--transition-fast);min-height:44px}
.form-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--n300)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--p400);box-shadow:0 0 0 3px rgba(76,110,245,.1)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--n300)}
.form-input:disabled,.form-select:disabled,.form-textarea:disabled{opacity:.5;cursor:not-allowed;background:var(--n50)}
.form-input[readonly],.form-select[readonly]{background:var(--n50);border-color:var(--n100);color:var(--n500);cursor:default}
.form-textarea{resize:vertical;min-height:100px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-error{font-size:12px;color:var(--err);margin-top:4px;display:flex;align-items:center;gap:4px}
.form-input.has-error,.form-select.has-error,.form-textarea.has-error{border-color:var(--err);box-shadow:0 0 0 3px rgba(239,68,68,.08)}

/* === TABLE === */
.table-w{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;font-weight:600;color:var(--n400);letter-spacing:.04em;padding:12px 16px;border-bottom:1px solid var(--n200);background:var(--n50);white-space:nowrap}
td{padding:14px 16px;border-bottom:1px solid var(--n100);font-size:13px;color:var(--n600)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--transition-fast)}
tbody tr:hover td{background:var(--n50)}

/* === STEPS === */
.steps{display:flex;align-items:center;gap:0;margin-bottom:32px;padding:20px 24px;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--n200);box-shadow:var(--shadow-xs)}
.step{display:flex;align-items:center;gap:10px}
.step-n{width:32px;height:32px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid var(--n300);color:var(--n400);transition:all var(--transition-base)}
.step.active .step-n{background:var(--p500);border-color:var(--p500);color:#fff;box-shadow:0 2px 8px rgba(76,110,245,.3)}
.step.done .step-n{background:var(--ok);border-color:var(--ok);color:#fff}
.step-l{font-size:13px;font-weight:500;color:var(--n400)}
.step.active .step-l{color:var(--n800);font-weight:600}
.step.done .step-l{color:#059669}
.step-line{flex:1;height:2px;background:var(--n200);margin:0 12px;min-width:24px;border-radius:1px;transition:background var(--transition-base)}
.step-line.done{background:var(--ok)}

/* === TIMELINE === */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:16px;position:relative;padding-bottom:24px}
.tl-item:not(:last-child)::after{content:'';position:absolute;left:15px;top:36px;width:2px;height:calc(100% - 30px);background:var(--n200);border-radius:1px}
.tl-dot{width:32px;height:32px;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700;z-index:1;transition:transform var(--transition-fast)}
.tl-item:hover .tl-dot{transform:scale(1.1)}
.tl-dot-p{background:var(--p50);border:2px solid var(--p400);color:var(--p500)}
.tl-dot-ok{background:var(--ok-bg);border:2px solid var(--ok);color:var(--ok)}
.tl-dot-warn{background:var(--warn-bg);border:2px solid var(--warn);color:var(--warn)}
.tl-dot-err{background:var(--err-bg);border:2px solid var(--err);color:var(--err)}
.tl-content{flex:1;padding-top:4px}
.tl-date{font-size:12px;color:var(--n400);margin-bottom:4px;font-weight:500;letter-spacing:.02em}
.tl-title{font-size:14px;font-weight:600;color:var(--n800);margin-bottom:4px}
.tl-desc{font-size:13px;color:var(--n500);line-height:1.6}

/* === RISK INDICATOR === */
.risk{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--radius-lg);margin-bottom:24px}
.risk-high{background:linear-gradient(135deg,rgba(239,68,68,.04),rgba(239,68,68,.1));border:1.5px solid rgba(239,68,68,.15)}
.risk-mid{background:linear-gradient(135deg,rgba(245,158,11,.04),rgba(245,158,11,.1));border:1.5px solid rgba(245,158,11,.15)}
.risk-low{background:linear-gradient(135deg,rgba(16,185,129,.04),rgba(16,185,129,.1));border:1.5px solid rgba(16,185,129,.15)}
.risk-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.risk-icon-high{background:rgba(239,68,68,.1);color:var(--err)}
.risk-icon-mid{background:rgba(245,158,11,.1);color:var(--warn)}
.risk-icon-low{background:rgba(16,185,129,.1);color:var(--ok)}
.risk-level{font-size:20px;font-weight:800;letter-spacing:-.01em}
.risk-level-high{color:var(--err)}.risk-level-mid{color:var(--warn)}.risk-level-low{color:var(--ok)}
.risk-label{font-size:13px;color:var(--n500);margin-top:2px}

/* === REPORT SECTION === */
.rpt-section{margin-bottom:32px}
.rpt-section-title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--n800);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--n100)}
.rpt-section-ico{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.rpt-block{padding:16px 20px;background:#fff;border-radius:var(--radius-md);border:1px solid var(--n100);margin-bottom:12px;box-shadow:var(--shadow-xs)}
.rpt-block h4{font-size:14px;font-weight:700;color:var(--n800);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.rpt-block p{font-size:13px;color:var(--n600);line-height:1.8}
.rpt-list{display:flex;flex-direction:column;gap:8px}
.rpt-list-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--n600);line-height:1.6;padding:10px 14px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--n100);transition:all var(--transition-fast)}
.rpt-list-item:hover{border-color:var(--n200);box-shadow:var(--shadow-xs)}
.rpt-list-ico{flex-shrink:0;margin-top:1px;font-size:13px;font-weight:700}

/* === EMPTY STATE === */
.empty-state{text-align:center;padding:40px 24px}

/* === BOTTOM BAR === */
.bottom-bar{position:sticky;bottom:0;background:#fff;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-top:1px solid var(--n100);box-shadow:0 -2px 8px rgba(0,0,0,.04)}
@media(max-width:768px){.bottom-bar{flex-direction:column;align-items:stretch;gap:12px}.bottom-bar>div:last-child{flex-direction:column}.bottom-bar .btn{width:100%;justify-content:center}}

/* === INFO ROW === */
.info-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--n100)}
.info-row:last-child{border-bottom:none}
.info-row-label{font-size:14px;font-weight:500;color:var(--n700)}

/* === REPORT GRIDS === */
.rpt-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rpt-grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.rpt-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.rpt-col{display:flex;flex-direction:column;gap:24px}
.rpt-flex-center{display:flex;align-items:center;gap:8px}
.rpt-center{text-align:center}
.rpt-title{font-size:22px;font-weight:800;color:var(--n900);letter-spacing:-.01em;display:flex;align-items:center;gap:12px;margin:0 0 16px}
.rpt-risk-headline{font-size:16px;font-weight:700;color:var(--n800);margin-top:4px}
.rpt-risk-desc{font-size:13px;color:var(--n500);margin-top:4px;line-height:1.6}
.rpt-item-title{font-weight:600;color:var(--n800)}
.rpt-item-desc{font-size:13px;color:var(--n500);margin-top:2px;line-height:1.6}
.rpt-item-err{border-left:3px solid var(--err)}
.rpt-bottom-text{font-size:16px;font-weight:700;color:var(--n800)}
.rpt-summary-label{font-size:12px;color:var(--n400);font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.rpt-summary-value{font-size:24px;font-weight:800;color:var(--n800);letter-spacing:-.02em}
.rpt-actions{display:flex;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--n100)}

/* === PERSPECTIVE TOGGLE === */
.perspective-toggle{display:inline-flex;gap:0;border:1px solid var(--n200);border-radius:var(--radius-sm);overflow:hidden}
.perspective-btn{padding:5px 14px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all var(--transition-fast);font-family:var(--ff)}
.perspective-btn.active{background:var(--p500);color:#fff}
.perspective-btn:not(.active){background:#fff;color:var(--n600)}
.perspective-btn:not(.active):hover{background:var(--n50);color:var(--n800)}

/* === TEXT HELPERS === */
.text-err{color:var(--err)!important}.text-info{color:var(--info)!important}.text-warn{color:var(--warn)!important}.text-ok{color:var(--ok)!important}.text-p500{color:var(--p500)!important}

@media(max-width:768px){
  .rpt-grid-2{grid-template-columns:1fr}
  .rpt-grid-3{grid-template-columns:1fr}
}

/* === UPLOAD ZONE === */
.upload-zone{border:2px dashed var(--n300);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;transition:all var(--transition-base);cursor:pointer;background:#fff;position:relative}
.upload-zone:hover{border-color:var(--p400);background:var(--p50)}
.upload-zone.dragover{border-color:var(--p500);background:var(--p100);border-style:solid}
.upload-zone-ico{margin:0 auto 16px;color:var(--n400)}
.upload-zone-t{font-size:16px;font-weight:600;color:var(--n700);margin-bottom:8px}
.upload-zone-d{font-size:13px;color:var(--n400)}
.file-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.file-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--n200);border-radius:var(--radius-sm);transition:all var(--transition-fast)}
.file-item:hover{border-color:var(--p200);box-shadow:var(--shadow-xs)}
.file-ico{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:600;color:var(--n700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.file-meta{font-size:11px;color:var(--n400);margin-top:2px}
.file-rm{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--n400);transition:all var(--transition-fast)}
.file-rm:hover{background:var(--err-bg);color:var(--err)}

/* === PAGE HEADING === */
.page-title{font-size:22px;font-weight:800;color:var(--n900);letter-spacing:-.01em;margin:0 0 4px}
.page-desc{font-size:14px;color:var(--n500);line-height:1.7;margin:0}

/* === STATS === */
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--n200);padding:20px 24px;box-shadow:var(--shadow-xs);transition:all var(--transition-fast)}
.stat-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.stat-card-label{font-size:12px;color:var(--n400);font-weight:600;letter-spacing:.02em;margin-bottom:8px;text-transform:uppercase}
.stat-card-value{font-size:28px;font-weight:800;color:var(--n800);letter-spacing:-.02em}
.stat-card-sub{font-size:12px;color:var(--n400);margin-top:4px}

/* === PRINT === */
@media print{
  .sidebar,.topbar,.steps,.sb-toggle,.skip-link,.rpt-tab-bar,button,.btn{display:none!important}
  .main{margin-left:0!important}
  .main-i{padding:0!important;max-width:100%!important}
  body{background:#fff}
  .card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
  .ptr-issue,.ptr-risk,.ptr-action{break-inside:avoid}
  .rpt-panel{display:block!important}
  .badge{border:1px solid #999;color:#333!important;background:transparent!important}
  h2,h3{page-break-after:avoid}
  *{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:15mm;size:A4}
}

/* === WORKSPACE TAB BAR === */
.ws-breadcrumb{font-size:13px;color:var(--n400);margin-bottom:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ws-breadcrumb a{color:var(--n500);text-decoration:none;transition:color var(--transition-fast)}
.ws-breadcrumb a:hover{color:var(--p600)}
.ws-breadcrumb .sep{color:var(--n300)}
.ws-breadcrumb .current{color:var(--n800);font-weight:600}
.ws-tabs{display:flex;gap:0;border-bottom:2px solid var(--n100);margin-bottom:24px;background:#fff;padding:0 24px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ws-tab{padding:12px 24px;font-size:14px;font-weight:500;color:var(--n400);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap;flex-shrink:0}
.ws-tab:hover{color:var(--p600)}
.ws-tab.active{color:var(--p600);border-bottom-color:var(--p500);font-weight:700}
.ws-tab-dot{display:inline-block;width:6px;height:6px;background:var(--warn);border-radius:50%;margin-left:4px;vertical-align:middle}
.ws-tab-pulse{display:inline-block;width:6px;height:6px;background:var(--p500);border-radius:50%;margin-left:4px;vertical-align:middle;animation:wsPulse 1.5s ease infinite}
@keyframes wsPulse{0%,100%{opacity:1}50%{opacity:.4}}
.ws-header{padding:20px 24px;background:#fff;border-bottom:1px solid var(--n100);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ws-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ws-title{font-size:20px;font-weight:700;color:var(--n800);margin:0}
.ws-quick-stats{display:flex;gap:16px;margin-top:8px;font-size:13px;color:var(--n500)}
@media(max-width:768px){.ws-tabs{padding:0 12px;gap:0;scrollbar-width:none;-ms-overflow-style:none}.ws-tabs::-webkit-scrollbar{display:none}.ws-tab{padding:10px 16px;font-size:13px}.ws-header{padding:16px}.ws-title{font-size:17px}.ws-quick-stats{flex-wrap:wrap;gap:8px}}
@media(max-width:480px){.ws-tab{padding:8px 12px;font-size:12px}.ws-title-row{flex-direction:column;align-items:flex-start;gap:8px}}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn-p:hover{transform:none}
  .stat-card:hover{transform:none}
  .sb-item.active::before{transition:none}
}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-xl)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .form-row{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:40;opacity:0;transition:opacity var(--transition-smooth)}
  .sb-overlay.active{display:block;opacity:1}
}
@media(max-width:768px){
  .main-i{padding:20px 16px}
  .stats-row{grid-template-columns:1fr}
  .steps{flex-wrap:wrap;gap:4px;padding:16px}
  .step-line{min-width:16px}
  .topbar{margin-bottom:20px}
  .btn-lg{padding:10px 20px;font-size:14px;width:100%}
}