:root {
      --ink: #0F1A2A;
      --navy: #172235;
      --slate: #3A4A60;
      --muted: #7A8AA0;
      --line: #E5E9F0;
      --canvas: #F5F7FA;
      --primary: #2E5C8A;
      --primary-hover: #214869;
      --accent: #00C2A8;
      --accent-dark: #009980;
      --soft-accent: #E0F7F3;
    }

    * { font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif; }
    body { background: var(--canvas); color: var(--ink); letter-spacing: 0; }

    /* ── 自定义颜色 CSS 兜底（Tailwind CDN 万一加载失败时生效）── */
    .bg-primary         { background-color: var(--primary) !important; }
    .text-primary       { color: var(--primary) !important; }
    .border-primary     { border-color: var(--primary) !important; }
    .bg-accent          { background-color: var(--accent) !important; }
    .text-accent        { color: var(--accent) !important; }
    .text-white         { color: #ffffff !important; }
    .bg-white           { background-color: #ffffff !important; }
    .rounded-xl         { border-radius: 8px !important; }
    .shadow-sm          { box-shadow: 0 1px 2px rgba(15, 26, 42, .05) !important; }

    .app-header {
      background: var(--ink);
      border-bottom: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 10px 26px rgba(15, 26, 42, .16);
    }
    .brand-mark {
      width: 2.35rem; height: 2.35rem;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(0,194,168,.45);
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, rgba(46,92,138,.95), rgba(0,194,168,.78));
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.16);
    }
    .brand-subtitle { color: #A7B4C8; }
    .company-pill {
      border: 1px solid rgba(255,255,255,.12);
      color: #D8E1EF;
      background: rgba(255,255,255,.05);
      border-radius: 8px;
      padding: .35rem .65rem;
      font-size: .75rem;
    }
    .user-pill {
      color: #D8E1EF;
      font-size: .75rem;
      max-width: 12rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-label { display: none; }
    .auth-card {
      width: 100%;
      max-width: 26rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 12px 30px rgba(15, 26, 42, .08);
      padding: 1.5rem;
    }

    .page { display: none; }
    .page.active { display: block; }
    .auth-page.active { display: flex; }

    /* 进度网格单元格 */
    .grid-cell {
      width: 2.2rem; height: 2.2rem;
      display: flex; align-items: center; justify-content: center;
      border-radius: 4px; font-size: 0.7rem; font-weight: 600;
      cursor: default; transition: all .15s;
    }
    .grid-cell.done   { background:var(--accent); color:#fff; }
    .grid-cell.empty  { background:#eef2f6; color:#a3afbf; }
    .grid-cell.active { background:var(--primary); color:#fff; box-shadow:0 0 0 2px var(--accent); }

    /* 单选按钮组 */
    .radio-group { display:flex; gap:.5rem; flex-wrap:wrap; }
    .radio-btn {
      padding:.35rem .9rem; border-radius:6px; border:1.5px solid #d1d5db;
      cursor:pointer; font-size:.85rem; transition:all .15s; user-select:none;
    }
    .radio-btn:hover  { border-color:var(--primary); color:var(--primary); }
    .radio-btn.sel    { background:var(--primary); border-color:var(--primary); color:#fff; }
    .radio-btn.sel-accent { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }

    /* Toast */
    #toast {
      position:fixed; top:1.2rem; right:1.2rem; z-index:9999;
      padding:.7rem 1.2rem; border-radius:8px; font-size:.9rem;
      opacity:0; transform:translateY(-8px);
      transition:opacity .25s, transform .25s;
      pointer-events:none;
    }
    #toast.show { opacity:1; transform:translateY(0); }

    /* 表单输入 */
    .field { margin-bottom:1rem; }
    .field label { display:block; font-size:.82rem; font-weight:600; color:#374151; margin-bottom:.3rem; }
    .field input[type=text],
    .field input[type=url],
    .field input[type=date],
    .field input[type=number],
    .field textarea,
    .field select {
      width:100%; padding:.55rem .8rem; border:1.5px solid #d1d5db;
      border-radius:7px; font-size:.9rem; outline:none;
      font-family:inherit; transition:border-color .15s;
    }
    .field input:focus,
    .field textarea:focus,
    .field select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(46,92,138,.12); }

    /* 进度条 */
    .progress-bar-bg { background:#e5e7eb; border-radius:999px; height:8px; overflow:hidden; }
    .progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent));
      border-radius:999px; transition:width .4s; }

    /* 徽章 */
    .badge { display:inline-flex; align-items:center; padding:.2rem .6rem;
      border-radius:999px; font-size:.75rem; font-weight:600; }

    /* 折叠区 */
    .collapsible { border:1.5px solid #e5e7eb; border-radius:8px; overflow:hidden; margin-bottom:.75rem; }
    .collapsible-header {
      padding:.65rem 1rem; background:#f9fafb; cursor:pointer;
      display:flex; justify-content:space-between; align-items:center;
      font-size:.85rem; font-weight:600; color:#374151;
      user-select:none;
    }
    .collapsible-header:hover { background:#f3f4f6; }
    .collapsible-body { padding:.75rem 1rem; background:#fff; }

    /* 表格 */
    table { width:100%; border-collapse:collapse; }
    #sessions-table-wrap { overflow-x: auto !important; }
    #sessions-table-wrap table { min-width: 900px; }
    #users-table-wrap { overflow-x: auto !important; }
    #users-table-wrap table { min-width: 780px; }
    #audit-table-wrap { overflow-x: auto !important; }
    #audit-table-wrap table { min-width: 980px; }
    .audit-meta {
      max-height: 16rem;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: .78rem;
      line-height: 1.55;
      color: #334155;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: .75rem;
    }
    .assign-select {
      min-width: 8.5rem;
      padding: .3rem .55rem;
      border: 1.5px solid #d1d5db;
      border-radius: 6px;
      font-size: .78rem;
      outline: none;
      background: #fff;
    }
    .assign-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,92,138,.12); }
    th { background:#eef5f6; color:var(--primary); font-size:.8rem; padding:.55rem .75rem;
      text-align:left; border-bottom:1.5px solid #e5e7eb; }
    td { padding:.55rem .75rem; font-size:.84rem; border-bottom:1px solid #f3f4f6;
      vertical-align:top; }
    tr:hover td { background:#f9fafb; }

    /* 多图上传区 */
    .upload-zone {
      border: 2px dashed #d1d5db; border-radius: 8px; padding: 1.25rem;
      text-align: center; cursor: pointer; color: #9ca3af; font-size: .875rem;
      transition: border-color .15s, background .15s;
    }
    .upload-zone:hover  { border-color: var(--primary); background: #f8fafc; }
    .upload-zone.drag-over { border-color: var(--accent); background: var(--soft-accent); }

    /* 截图缩略图 */
    .sc-thumb {
      position: relative; width: 72px; height: 72px;
      border-radius: 6px; overflow: hidden; border: 1.5px solid #e5e7eb; flex-shrink: 0;
    }
    .sc-thumb img  { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sc-thumb .sc-del {
      position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
      border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 11px; line-height: 1; user-select: none;
    }
    .sc-thumb .sc-del:hover { background: #ef4444; }

    /* 响应式 */
    @media(max-width:640px) {
      .grid-cell { width:1.8rem; height:1.8rem; font-size:.6rem; }
      .brand-subtitle {
        display: block;
        max-width: 13rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .desktop-label { display: none; }
      .mobile-label { display: inline; }
      #page-sessions > .flex { gap: .75rem; }
      #page-sessions > .flex {
        flex-direction: column;
        align-items: stretch;
      }
      #page-sessions > .flex button {
        width: 100%;
        justify-content: center;
      }
      .header-nav-label, .logout-label, .user-pill, .company-pill { display: none !important; }
    }
  

/* Local utility subset for strict CSP */
*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}
body{margin:0}
button,input,optgroup,select,textarea{font:inherit;color:inherit;margin:0}
button{background:transparent;background-image:none;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.65}
img,svg{display:block;vertical-align:middle}
img{max-width:100%;height:auto}
.hidden{display:none!important}
.block{display:block}
.flex{display:flex}
.grid{display:grid}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.flex-shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.text-center{text-align:center}
.text-right{text-align:right}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.025em}
.leading-tight{line-height:1.25}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.break-all{word-break:break-all}
.break-words{overflow-wrap:break-word}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-wrap{white-space:pre-wrap}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.min-w-0{min-width:0}
.min-h-screen{min-height:100vh}
.h-full{height:100%}
.border-separate{border-collapse:separate}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s}
.transition-transform{transition-property:transform;transition-duration:.15s}
.rotate-180{transform:rotate(180deg)}
.p-0{padding:0}
.px-0{padding-left:0;padding-right:0}
.py-0{padding-top:0;padding-bottom:0}
.pt-0{padding-top:0}
.pr-0{padding-right:0}
.pl-0{padding-left:0}
.mt-0{margin-top:0}
.mr-0{margin-right:0}
.mb-0{margin-bottom:0}
.gap-0{gap:0}
.p-1{padding:.25rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.pt-1{padding-top:.25rem}
.pr-1{padding-right:.25rem}
.pl-1{padding-left:.25rem}
.mt-1{margin-top:.25rem}
.mr-1{margin-right:.25rem}
.mb-1{margin-bottom:.25rem}
.gap-1{gap:.25rem}
.p-2{padding:.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.pt-2{padding-top:.5rem}
.pr-2{padding-right:.5rem}
.pl-2{padding-left:.5rem}
.mt-2{margin-top:.5rem}
.mr-2{margin-right:.5rem}
.mb-2{margin-bottom:.5rem}
.gap-2{gap:.5rem}
.p-3{padding:.75rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pt-3{padding-top:.75rem}
.pr-3{padding-right:.75rem}
.pl-3{padding-left:.75rem}
.mt-3{margin-top:.75rem}
.mr-3{margin-right:.75rem}
.mb-3{margin-bottom:.75rem}
.gap-3{gap:.75rem}
.p-4{padding:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.pt-4{padding-top:1rem}
.pr-4{padding-right:1rem}
.pl-4{padding-left:1rem}
.mt-4{margin-top:1rem}
.mr-4{margin-right:1rem}
.mb-4{margin-bottom:1rem}
.gap-4{gap:1rem}
.p-5{padding:1.25rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.pt-5{padding-top:1.25rem}
.pr-5{padding-right:1.25rem}
.pl-5{padding-left:1.25rem}
.mt-5{margin-top:1.25rem}
.mr-5{margin-right:1.25rem}
.mb-5{margin-bottom:1.25rem}
.gap-5{gap:1.25rem}
.p-6{padding:1.5rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pt-6{padding-top:1.5rem}
.pr-6{padding-right:1.5rem}
.pl-6{padding-left:1.5rem}
.mt-6{margin-top:1.5rem}
.mr-6{margin-right:1.5rem}
.mb-6{margin-bottom:1.5rem}
.gap-6{gap:1.5rem}
.p-10{padding:2.5rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.pt-10{padding-top:2.5rem}
.pr-10{padding-right:2.5rem}
.pl-10{padding-left:2.5rem}
.mt-10{margin-top:2.5rem}
.mr-10{margin-right:2.5rem}
.mb-10{margin-bottom:2.5rem}
.gap-10{gap:2.5rem}
.p-12{padding:3rem}
.px-12{padding-left:3rem;padding-right:3rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.pt-12{padding-top:3rem}
.pr-12{padding-right:3rem}
.pl-12{padding-left:3rem}
.mt-12{margin-top:3rem}
.mr-12{margin-right:3rem}
.mb-12{margin-bottom:3rem}
.gap-12{gap:3rem}
.p-16{padding:4rem}
.px-16{padding-left:4rem;padding-right:4rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-16{padding-top:4rem}
.pr-16{padding-right:4rem}
.pl-16{padding-left:4rem}
.mt-16{margin-top:4rem}
.mr-16{margin-right:4rem}
.mb-16{margin-bottom:4rem}
.gap-16{gap:4rem}
.p-0\.5{padding:.125rem}
.px-0\.5{padding-left:.125rem;padding-right:.125rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.pt-0\.5{padding-top:.125rem}
.pr-0\.5{padding-right:.125rem}
.pl-0\.5{padding-left:.125rem}
.mt-0\.5{margin-top:.125rem}
.mr-0\.5{margin-right:.125rem}
.mb-0\.5{margin-bottom:.125rem}
.gap-0\.5{gap:.125rem}
.p-1\.5{padding:.375rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.pt-1\.5{padding-top:.375rem}
.pr-1\.5{padding-right:.375rem}
.pl-1\.5{padding-left:.375rem}
.mt-1\.5{margin-top:.375rem}
.mr-1\.5{margin-right:.375rem}
.mb-1\.5{margin-bottom:.375rem}
.gap-1\.5{gap:.375rem}
.p-2\.5{padding:.625rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.pt-2\.5{padding-top:.625rem}
.pr-2\.5{padding-right:.625rem}
.pl-2\.5{padding-left:.625rem}
.mt-2\.5{margin-top:.625rem}
.mr-2\.5{margin-right:.625rem}
.mb-2\.5{margin-bottom:.625rem}
.gap-2\.5{gap:.625rem}
.mx-auto{margin-left:auto;margin-right:auto}
.gap-x-4{column-gap:1rem}
.space-y-0>:not([hidden])~:not([hidden]){margin-top:0;margin-bottom:0}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-white{color:#fff}
.text-primary{color:var(--primary)}
.text-accent{color:var(--accent)}
.text-gray-300{color:#d1d5db}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-gray-800{color:#1f2937}
.text-red-400{color:#f87171}
.text-red-600{color:#dc2626}
.text-green-700{color:#15803d}
.text-blue-700{color:#1d4ed8}
.text-yellow-700{color:#a16207}
.text-yellow-800{color:#854d0e}
.bg-white{background-color:#fff}
.bg-primary{background-color:var(--primary)}
.bg-accent{background-color:var(--accent)}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-200{background-color:#e5e7eb}
.bg-green-100{background-color:#dcfce7}
.bg-blue-50{background-color:#eff6ff}
.bg-blue-100{background-color:#dbeafe}
.bg-yellow-50{background-color:#fefce8}
.bg-yellow-100{background-color:#fef3c7}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.bg-white\/30{background-color:rgba(255,255,255,.3)}
.border{border-width:1px}
.border-t{border-top-width:1px}
.border-b{border-bottom-width:1px}
.border-primary{border-color:var(--primary)}
.border-gray-50{border-color:#f9fafb}
.border-gray-100{border-color:#f3f4f6}
.border-gray-300{border-color:#d1d5db}
.border-blue-100{border-color:#dbeafe}
.border-red-200{border-color:#fecaca}
.border-yellow-100{border-color:#fef3c7}
.border-spacing-1{border-spacing:.25rem}
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:8px}
.rounded-full{border-radius:9999px}
.rounded-\[6px\]{border-radius:6px}
.rounded-\[8px\]{border-radius:8px}
.shadow-sm{box-shadow:0 1px 2px rgba(15,26,42,.05)}
.shadow{box-shadow:0 1px 3px rgba(15,26,42,.12),0 1px 2px rgba(15,26,42,.08)}
.w-full{width:100%}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-9{width:2.25rem}
.w-20{width:5rem}
.w-32{width:8rem}
.h-1\.5{height:.375rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.max-w-3xl{max-width:48rem}
.max-w-5xl{max-width:64rem}
.max-w-\[12rem\]{max-width:12rem}
.min-w-\[12rem\]{min-width:12rem}
.max-h-20{max-height:5rem}
.max-h-40{max-height:10rem}
.min-h-\[calc\(100vh-64px\)\]{min-height:calc(100vh - 64px)}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.last\:border-0:last-child{border-width:0}
.hover\:bg-\[\#214869\]:hover{background-color:#214869}
.hover\:bg-\[\#EEF5F6\]:hover{background-color:#EEF5F6}
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.hover\:bg-red-50:hover{background-color:#fef2f2}
.hover\:bg-white\/30:hover{background-color:rgba(255,255,255,.3)}
.hover\:text-primary:hover{color:var(--primary)}
@media (min-width:640px){.sm\:block{display:block}.sm\:flex-row{flex-direction:row}.sm\:w-32{width:8rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:col-span-2{grid-column:span 2 / span 2}}
.app-header button{color:#fff}.app-header button:hover{color:#A7B4C8}[data-min-height="button"],.btn-min-h{min-height:42px}.field-hint{color:#999;font-size:12px;margin-top:4px}.upload-hint{font-size:.75rem;color:#9ca3af;margin-top:.2rem}.screenshot-counter{font-size:.78rem;color:#6b7280;margin-top:.4rem}.screenshot-previews{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.progress-bar-fill{width:0%}.toast-success{background:#00C2A8;color:#fff}.toast-error{background:#ef4444;color:#fff}.toast-info{background:#2E5C8A;color:#fff}