:root{
      --bg:#f3f6f7;
      --panel:#ffffff;
      --text:#18222c;
      --muted:#73808a;
      --line:#e5ecef;
      --primary:#078b79;
      --primary-2:#12a88f;
      --primary-soft:#eaf8f5;
      --navy:#0b2459;
      --blue-soft:#eef6ff;
      --warning:#ef9d2f;
      --danger:#db5e64;
      --success:#0a8e74;
      --shadow:0 14px 38px rgba(20,47,63,.07);
      --radius:16px;
    }

    *{box-sizing:border-box}
    html,body{
      margin:0;
      min-height:100%;
      font-family:"PingFang SC","Microsoft YaHei",Inter,system-ui,-apple-system,sans-serif;
      color:var(--text);
      background:var(--bg);
    }
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}

    body{
      background:
        radial-gradient(circle at 8% 0%,rgba(7,139,121,.06),transparent 20%),
        linear-gradient(180deg,#fbfdfd 0,#f3f6f7 280px);
    }

    .app{
      min-height:100vh;
      display:grid;
      grid-template-columns:224px minmax(0,1fr);
    }

    .sidebar{
      position:sticky;
      top:0;
      height:100vh;
      background:rgba(255,255,255,.93);
      backdrop-filter:blur(14px);
      border-right:1px solid var(--line);
      display:flex;
      flex-direction:column;
      padding:20px 14px 16px;
      z-index:30;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:11px;
      padding:0 10px 24px;
      font-size:17px;
      font-weight:780;
    }

    .brand-mark{
      width:36px;
      height:36px;
      display:grid;
      place-items:center;
      color:#fff;
      border-radius:11px;
      background:linear-gradient(145deg,var(--primary),#18b69e);
      box-shadow:0 8px 18px rgba(7,139,121,.22);
    }

    .nav-label{
      padding:0 11px;
      margin:8px 0 7px;
      font-size:11px;
      color:#a0a9b0;
      letter-spacing:.08em;
    }

    .nav-item{
      width:100%;
      border:0;
      background:transparent;
      border-radius:10px;
      padding:11px 12px;
      display:flex;
      align-items:center;
      gap:10px;
      color:#58656f;
      font-size:14px;
      text-align:left;
      transition:.18s;
    }

    .nav-item:hover{background:#f5f8f9;color:#26343d}
    .nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:700}
    .nav-icon{width:20px;display:grid;place-items:center}
    .nav-count{
      margin-left:auto;
      min-width:23px;
      height:20px;
      padding:0 6px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:#eef2f3;
      color:#7c8890;
      font-size:11px;
    }
    .nav-item.active .nav-count{background:#d8f1eb;color:var(--primary)}

    .sidebar-user{
      margin-top:auto;
      border-top:1px solid var(--line);
      padding:16px 8px 0;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .sidebar-user-meta{min-width:0;flex:1}
    .sidebar-logout{
      flex:none;height:30px;padding:0 12px;border-radius:8px;
      border:1px solid var(--line);background:#fff;color:#5b6a74;
      font-size:12px;font-weight:700;cursor:pointer;
      transition:border-color .15s,color .15s,background .15s;
    }
    .sidebar-logout:hover{
      border-color:#e0b4b7;color:#b0454a;background:#fdf6f6;
    }

    .avatar{
      width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
      background:#ddf3ef;color:var(--primary);font-weight:760;flex:none;
    }

    .user-name{font-size:13px;font-weight:700}
    .user-role{font-size:11px;color:#89949c;margin-top:2px}

    .main{
      min-width:0;
      padding-bottom:38px;
    }

    .topbar{
      height:68px;
      padding:0 30px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.82);
      backdrop-filter:blur(14px);
      position:sticky;
      top:0;
      z-index:25;
    }

    .top-title{font-size:14px;color:#78858e}
    .top-actions{display:flex;align-items:center;gap:10px}

    .shell{
      max-width:1780px;
      margin:0 auto;
      padding:25px 30px 0;
    }

    .view{display:none}
    .view.active{display:block}

    .page-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:24px;
      margin-bottom:18px;
    }

    .page-head h1{
      margin:0;
      font-size:26px;
      line-height:1.35;
      letter-spacing:-.5px;
    }

    .page-desc{
      margin-top:8px;
      font-size:13px;
      color:var(--muted);
    }

    .btn{
      min-height:39px;
      border:1px solid var(--line);
      border-radius:9px;
      background:#fff;
      color:#4b5963;
      padding:9px 14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      font-size:13px;
      font-weight:680;
      transition:.18s;
      box-shadow:0 2px 4px rgba(19,41,54,.02);
    }

    .btn:hover{transform:translateY(-1px);border-color:#cbd8dc}
    .btn.primary{
      color:#fff;
      border-color:transparent;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      box-shadow:0 8px 18px rgba(7,139,121,.18);
    }
    .btn.soft{background:var(--primary-soft);border-color:#caeae3;color:var(--primary)}
    .btn.navy{background:linear-gradient(135deg,#0d2a64,#123779);color:#fff;border-color:transparent}
    .btn.danger{
      color:#fff;border-color:transparent;
      background:linear-gradient(135deg,#c8474c,#a9393e);
      box-shadow:0 8px 18px rgba(180,60,68,.20);
    }

    .metrics{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
      margin-bottom:17px;
    }

    .metric{
      background:rgba(255,255,255,.95);
      border:1px solid var(--line);
      border-radius:14px;
      padding:17px 18px;
      box-shadow:var(--shadow);
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:104px;
    }

    .metric-label{font-size:12px;color:#7b8790}
    .metric-value{font-size:29px;font-weight:780;margin-top:6px;letter-spacing:-1px}
    .metric-foot{font-size:11px;color:#9aa4ab;margin-top:5px}
    .metric-icon{
      width:45px;height:45px;border-radius:13px;display:grid;place-items:center;
      background:var(--primary-soft);color:var(--primary);
    }
    .metric:nth-child(2) .metric-icon{background:#eef5ff;color:#3c72d9}
    .metric:nth-child(3) .metric-icon{background:#fff5e7;color:#d88b20}
    .metric:nth-child(4) .metric-icon{background:#f1efff;color:#7561ce}

    .panel{
      background:rgba(255,255,255,.97);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .filters{
      padding:16px 18px;
      display:grid;
      grid-template-columns:minmax(280px,1.4fr) 170px 150px 185px auto;
      gap:10px;
      border-bottom:1px solid var(--line);
      align-items:center;
    }

    .control{
      width:100%;
      height:40px;
      border:1px solid #dfe7ea;
      border-radius:9px;
      background:#fbfcfd;
      padding:0 12px;
      color:#34434d;
      outline:none;
      transition:.18s;
    }

    .control:focus{
      background:#fff;
      border-color:#81cabc;
      box-shadow:0 0 0 3px rgba(7,139,121,.07);
    }

    .search-wrap{position:relative}
    .search-wrap .control{padding-left:38px}
    .search-icon{
      position:absolute;left:13px;top:50%;transform:translateY(-50%);
      color:#98a3aa;font-size:15px;
    }

    .table-wrap{overflow:auto}
    table{width:100%;border-collapse:collapse;min-width:1180px}
    th,td{padding:15px 16px;border-bottom:1px solid #edf1f3;text-align:left}
    th{
      font-size:12px;
      color:#7b8790;
      font-weight:650;
      background:#fbfcfc;
      white-space:nowrap;
    }
    td{font-size:13px;color:#31404a;vertical-align:middle}
    tbody tr{transition:.16s}
    tbody tr:hover{background:#fbfdfd}
    tbody tr:last-child td{border-bottom:0}

    .company-cell{min-width:265px}
    .company-name{font-weight:730;color:#1f2d36}
    .company-sub{font-size:11px;color:#929da5;margin-top:5px}
    .user-cell{display:flex;align-items:center;gap:9px}
    .mini-avatar{
      width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
      background:#e7f5f2;color:var(--primary);font-size:11px;font-weight:730;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:5px 9px;
      font-size:11px;
      font-weight:680;
      white-space:nowrap;
    }
    .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
    .badge.published{background:#e8f7f2;color:#078b79}
    .badge.editing{background:#fff4df;color:#d88919}
    .badge.draft{background:#eef4ff;color:#4774cc}
    .badge.failed{background:#fdeced;color:#cc565d}

    .change-count{
      display:inline-flex;
      align-items:center;
      gap:5px;
      color:#2f6e92;
      font-weight:700;
      cursor:pointer;
    }

    .row-actions{display:flex;gap:7px;align-items:center}
    .link-btn{
      border:0;background:transparent;color:#60717b;
      padding:5px 4px;font-size:12px;font-weight:650;
    }
    .link-btn:hover{color:var(--primary)}
    .link-btn.danger{color:#b0454a}
    .link-btn.danger:hover{color:#8a2f33}
    .more-btn{
      width:31px;height:31px;border:1px solid var(--line);border-radius:8px;
      background:#fff;color:#71808a;
    }

    .pagination{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:15px 18px;
      border-top:1px solid var(--line);
      color:#7e8991;
      font-size:12px;
    }

    .pages{display:flex;gap:7px;align-items:center}
    .page-btn{
      width:31px;height:31px;border:1px solid var(--line);border-radius:8px;
      background:#fff;color:#687680;
    }
    .page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

    .capture-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr);
      gap:18px;
      align-items:start;
    }

    .capture-panel{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:22px;
    }

    .capture-title{font-size:17px;font-weight:760}
    .capture-sub{font-size:12px;color:var(--muted);margin-top:6px}
    .url-box{
      margin-top:20px;
      border:1px solid #dfe7ea;
      border-radius:13px;
      padding:13px;
      background:#fbfcfd;
      display:flex;
      gap:10px;
    }
    .url-box input{
      flex:1;
      border:0;
      background:transparent;
      outline:none;
      color:#33424c;
    }

    .recent-card{
      margin-top:18px;
      border:1px solid var(--line);
      border-radius:13px;
      overflow:hidden;
    }
    .recent-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:14px 16px;
      background:#fbfcfc;
      border-bottom:1px solid var(--line);
    }
    .recent-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      padding:14px 16px;
      align-items:center;
      border-bottom:1px solid #edf1f3;
    }
    .recent-row:last-child{border-bottom:0}
    .recent-actions{
      display:flex;align-items:center;gap:10px;flex-shrink:0;
    }
    .recent-actions .badge{
      min-width:72px;justify-content:center;
      padding:6px 12px;font-size:12px;font-weight:700;
      border:1px solid transparent;
    }
    .recent-actions .badge.published{border-color:#cfece4}
    .recent-actions .badge.editing{border-color:#f0dfb8}
    .recent-view-btn{
      height:32px;padding:0 14px;border-radius:8px;
      border:1px solid #c5e4dd;background:#f3fbf8;color:var(--primary);
      font-size:12px;font-weight:700;cursor:pointer;
      transition:background .15s,border-color .15s,color .15s;
    }
    .recent-view-btn:hover{
      background:var(--primary);border-color:var(--primary);color:#fff;
    }

    .tip-card{
      background:linear-gradient(145deg,#0b255c,#102f72);
      color:#fff;
      border-radius:var(--radius);
      padding:22px;
      box-shadow:0 18px 44px rgba(10,37,91,.18);
      position:sticky;
      top:92px;
      overflow:hidden;
    }
    .tip-card::after{
      content:"";
      position:absolute;
      width:130px;height:130px;border-radius:50%;
      right:-35px;top:-35px;background:rgba(255,255,255,.08);
    }
    .tip-title{font-size:17px;font-weight:760;position:relative;z-index:1}
    .tip-list{margin:18px 0 0;padding:0;list-style:none;position:relative;z-index:1}
    .tip-list li{display:flex;gap:10px;font-size:13px;line-height:1.7;margin:10px 0;color:rgba(255,255,255,.85)}
    .tip-num{
      width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
      background:rgba(255,255,255,.14);flex:none;font-size:11px;
    }

    .drawer-mask,.modal-mask{
      position:fixed;inset:0;background:rgba(8,22,32,.46);backdrop-filter:blur(6px);
      z-index:100;display:none;
    }
    .drawer-mask.show,.modal-mask.show{display:block}

    .drawer{
      position:absolute;
      right:0;top:0;bottom:0;
      width:min(560px,92vw);
      background:#fff;
      box-shadow:-20px 0 60px rgba(12,32,45,.18);
      display:flex;
      flex-direction:column;
    }

    .drawer-head{
      min-height:68px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;
      border-bottom:1px solid var(--line);
    }
    .drawer-title{font-size:17px;font-weight:760}
    .close-btn{
      width:34px;height:34px;border:0;border-radius:9px;background:#f1f4f5;color:#61717b;font-size:20px;
    }
    .drawer-body{padding:20px;overflow:auto}

    .history-summary{
      background:#f8fbfb;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:17px;
    }
    .history-summary h3{font-size:14px;margin:0 0 7px}
    .history-summary p{font-size:12px;color:var(--muted);margin:0}

    .timeline{position:relative;padding-left:20px}
    .timeline::before{
      content:"";position:absolute;left:5px;top:7px;bottom:10px;width:1px;background:#dbe5e8;
    }
    .timeline-item{position:relative;padding:0 0 22px 17px}
    .timeline-item::before{
      content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;border-radius:50%;
      background:var(--primary);box-shadow:0 0 0 4px #e7f6f2;
    }
    .timeline-meta{font-size:11px;color:#8c979f;margin-bottom:8px}
    .timeline-user{font-size:13px;font-weight:730;margin-bottom:9px}
    .diff{
      border:1px solid var(--line);border-radius:10px;overflow:hidden;
    }
    .diff-row{
      display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 12px;font-size:12px;
      border-bottom:1px solid #edf1f3;
    }
    .diff-row:last-child{border-bottom:0}
    .diff-key{color:#77848d}
    .old{color:#b05c61;text-decoration:line-through;background:#fff3f3;padding:2px 5px;border-radius:4px}
    .new{color:#087b69;background:#ecf8f4;padding:2px 5px;border-radius:4px;margin-left:6px}

    .modal{
      max-width:980px;
      margin:5vh auto;
      background:#fff;
      border-radius:18px;
      box-shadow:0 26px 90px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .modal-head{
      height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;
      border-bottom:1px solid var(--line);
    }
    .modal-body{padding:22px;max-height:76vh;overflow:auto}
    .report-preview{
      border:1px solid var(--line);border-radius:14px;overflow:hidden;
    }
    .report-hero{
      height:130px;background:linear-gradient(112deg,#08154d,#0b2764 55%,#07142e);
      position:relative;overflow:hidden;
    }
    .report-hero::after{
      content:"";position:absolute;width:90px;height:90px;border-radius:50%;
      right:70px;top:22px;background:rgba(255,255,255,.18);
    }
    .report-title{text-align:center;font-size:22px;font-weight:780;padding:22px}
    .report-tabs{
      display:grid;grid-template-columns:repeat(4,1fr);height:48px;border-bottom:1px solid var(--line)
    }
    .report-tab{display:grid;place-items:center;font-size:12px;color:#5e6b75;position:relative}
    .report-tab.active{font-weight:700;color:#27343d}
    .report-tab.active::after{content:"";position:absolute;left:24%;right:24%;bottom:-1px;height:2px;background:#ef8e97}
    .report-body{padding:22px 34px}
    .report-row{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:9px 0;font-size:13px}
    .report-key{color:#74818a}

    .loading{
      position:fixed;inset:0;z-index:120;background:rgba(245,248,249,.84);backdrop-filter:blur(8px);
      display:none;align-items:center;justify-content:center;
    }
    .loading.show{display:flex}
    .loading-card{
      width:390px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center;
      box-shadow:0 22px 70px rgba(22,47,64,.16);
    }
    .spinner{
      width:46px;height:46px;border-radius:50%;border:4px solid #d9eeea;border-top-color:var(--primary);
      margin:0 auto 18px;animation:spin .8s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}

    .toast{
      position:fixed;right:26px;top:82px;z-index:140;background:#16262e;color:#fff;
      padding:13px 17px;border-radius:11px;font-size:13px;box-shadow:0 15px 38px rgba(9,25,34,.22);
      opacity:0;transform:translateY(-10px);transition:.23s;pointer-events:none;
    }
    .toast.show{opacity:1;transform:translateY(0)}
    .toast.busy{display:flex;align-items:center;gap:10px}
    .toast .toast-spin{
      width:16px;height:16px;flex:0 0 auto;border-radius:50%;
      border:2px solid rgba(255,255,255,.28);border-top-color:#fff;
      animation:spin .7s linear infinite
    }

    @media(max-width:1250px){
      .metrics{grid-template-columns:repeat(2,1fr)}
      .filters{grid-template-columns:1fr 160px 150px}
      .filters .date-filter{display:none}
      .capture-layout{grid-template-columns:1fr}
      .tip-card{position:relative;top:auto}
    }

    @media(max-width:900px){
      .app{grid-template-columns:78px minmax(0,1fr)}
      .brand span,.nav-item span:not(.nav-icon):not(.nav-count),.nav-label,.sidebar-user-meta{display:none}
      .brand{justify-content:center;padding-left:0;padding-right:0}
      .nav-item{justify-content:center}
      .nav-count{display:none}
      .sidebar-user{flex-direction:column;gap:8px;padding-top:12px}
      .sidebar-logout{padding:0 8px;font-size:11px}
      .shell{padding:18px 14px 0}
      .topbar{padding:0 16px}
    }

    @media(max-width:680px){
      .metrics{grid-template-columns:1fr}
      .filters{grid-template-columns:1fr}
      .filters select{display:none}
      .page-head{display:block}
      .page-head .btn{margin-top:14px}
      .recent-row{grid-template-columns:1fr}
      .recent-actions{width:100%;justify-content:flex-start}
      .modal{margin:0;border-radius:0;min-height:100vh}
    }

    .data-table{width:100%;border-collapse:collapse;min-width:auto}
    .data-table th{background:#fbfcfc;font-size:12px}
    .data-table td{vertical-align:middle}
    .form-row{margin-bottom:14px}
    .form-row label{display:block;font-size:13px;font-weight:650;margin-bottom:6px;color:#3a4751}
    .form-row input,.form-row select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--text);background:#fff}
    .form-row input:focus,.form-row select:focus{outline:none;border-color:var(--primary)}
    .form-hint{font-size:12px;color:#8a949b;margin-top:5px}
    .form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
    .setting-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
    .setting-row:last-child{border-bottom:0}
    .setting-label{font-size:14px;font-weight:650;color:#26343d}
    .setting-desc{font-size:12.5px;color:#87939c;margin-top:4px;line-height:1.5}
    .setting-desc code{background:#f1f4f5;padding:1px 6px;border-radius:4px;font-size:11.5px;color:#46545e}
    .setting-value{font-size:13px;color:var(--primary);font-weight:650;flex-shrink:0;margin-left:20px}
    .setting-section{font-size:12px;font-weight:700;color:#a0a9b0;letter-spacing:.06em;text-transform:uppercase;padding-bottom:4px;margin-bottom:6px}
    .setting-control{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:20px}
    .setting-control .control{width:auto;height:38px}
    .badge.enabled{background:#e8f7f2;color:#078b79}
    .badge.disabled{background:#f1f4f5;color:#87939c}
    .switch{position:relative;display:inline-block;width:38px;height:21px;cursor:pointer}
    .switch input{opacity:0;width:0;height:0}
    .switch span{position:absolute;inset:0;background:#cdd5d9;border-radius:999px;transition:.2s}
    .switch span::before{content:"";position:absolute;width:17px;height:17px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
    .switch input:checked + span{background:var(--primary)}
    .switch input:checked + span::before{transform:translateX(17px)}