:root {
      --bg: #f6f7f9;
      --panel: #ffffff;
      --panel-soft: #eef4f7;
      --ink: #172026;
      --muted: #6b7680;
      --line: #dce2e6;
      --accent: #0f766e;
      --accent-strong: #0a5c55;
      --warn: #b45309;
      --danger: #b91c1c;
      --good: #15803d;
      --blue: #2563eb;
      --shadow: 0 12px 30px rgba(23, 32, 38, 0.08);
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 14px;
      line-height: 1.45;
      letter-spacing: 0;
    }

    button, input, select, textarea {
      font: inherit;
      color: inherit;
    }

    button {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 7px;
      min-height: 36px;
      padding: 0 12px;
      cursor: pointer;
      white-space: nowrap;
    }

    button:hover { border-color: #aab5bc; }
    button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    button.primary:hover { background: var(--accent-strong); }
    button.danger { color: var(--danger); border-color: #efc8c8; }
    button.ghost { background: transparent; }
    button:disabled {
      opacity: 0.58;
      cursor: wait;
    }

    input, select, textarea {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      padding: 8px 10px;
      outline: none;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .login-gate {
      min-height: 100vh;
      height: auto;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      padding: clamp(22px, 3vw, 48px);
      background: linear-gradient(135deg, #0a0e27, #1a1f4e, #0f1340);
      background-size: 400% 400%;
      color: rgba(255, 255, 255, 0.92);
      animation: splashGradient 15s ease infinite;
      isolation: isolate;
    }

    .login-gate.hidden {
      display: none;
    }

    .hidden {
      display: none !important;
    }

    .login-gate::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at center, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.48) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.18));
      z-index: 3;
    }

    .splash-particles {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0.88;
    }

    .splash-orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(80px);
      opacity: 0.3;
      pointer-events: none;
      z-index: 0;
      animation: orbFloat 20s ease-in-out infinite alternate;
    }

    .splash-orb.purple-lg {
      width: 500px;
      height: 500px;
      left: -150px;
      top: -170px;
      background: #6366f1;
    }

    .splash-orb.gold {
      width: 400px;
      height: 400px;
      right: -120px;
      bottom: -120px;
      background: #c9a961;
      animation-delay: -6s;
    }

    .splash-orb.purple-sm {
      width: 300px;
      height: 300px;
      right: 18%;
      top: 34%;
      background: #7c3aed;
      animation-delay: -12s;
    }

    .splash-scanline {
      position: absolute;
      left: 0;
      right: 0;
      top: -2px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.82), transparent);
      box-shadow: 0 0 18px rgba(201, 169, 97, 0.75);
      opacity: 0.75;
      z-index: 2;
      animation: scanDown 8s linear infinite;
    }

    .login-shell {
      position: relative;
      z-index: 4;
      width: min(1180px, 100%);
      min-height: calc(100vh - clamp(22px, 3vw, 48px) * 2);
      margin: 0 auto;
      display: grid;
      grid-template-rows: auto auto auto;
      align-content: space-between;
      row-gap: clamp(22px, 3vh, 38px);
    }

    .login-hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 0;
      padding: clamp(28px, 5vh, 64px) 0 clamp(18px, 3vh, 34px);
    }

    .login-logo {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 16px;
      color: rgba(255, 255, 255, 0.94);
      font-weight: 800;
      font-size: 28px;
      line-height: 1.25;
      opacity: 0;
      transform: translateY(-18px);
      animation: fadeDown 0.8s ease 0.3s forwards;
      justify-self: start;
    }

    .login-logo-mark {
      width: 72px;
      height: 72px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #d9bd73;
      border: 3px solid #d9bd73;
      background: rgba(255, 255, 255, 0.03);
      font-weight: 900;
      font-size: 34px;
      box-shadow: 0 0 26px rgba(201, 169, 97, 0.22);
      flex: 0 0 auto;
    }

    .login-logo-text {
      display: grid;
      gap: 4px;
    }

    .login-logo-text small {
      color: rgba(255, 255, 255, 0.55);
      font-size: 16px;
      font-weight: 650;
      letter-spacing: 2px;
    }

    .login-title {
      position: relative;
      text-align: center;
      margin: 0 auto;
      width: min(920px, 100%);
    }

    .login-title h1 {
      margin: 0;
      font-size: clamp(38px, 4.45vw, 64px);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: 8px;
      color: transparent;
      background: linear-gradient(110deg, #fff 0%, #f3e7b3 35%, #c9a961 50%, #fff 65%, #fff 100%);
      background-size: 250% auto;
      -webkit-background-clip: text;
      background-clip: text;
      animation: titleRise 0.9s ease 0.5s both, shimmer 4s linear infinite;
      text-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    }

    .login-title p {
      margin: 26px 0 0;
      color: rgba(255, 255, 255, 0.52);
      font-size: 20px;
      line-height: 1.7;
      letter-spacing: 6px;
      opacity: 0;
      transform: translateY(18px);
      animation: fadeUp 0.8s ease 0.8s forwards;
    }

    .login-title p span {
      color: #d9bd73;
      margin: 0 16px;
    }

    .splash-divider {
      width: 60px;
      height: 2px;
      margin: 0 auto 34px;
      background: linear-gradient(90deg, transparent, #d9bd73, transparent);
      opacity: 0;
      animation: dividerIn 0.7s ease 1s forwards;
    }

    .splash-divider.bottom {
      margin: 26px auto 22px;
    }

    .splash-login-card {
      width: min(560px, 100%);
      margin: 20px auto 18px;
      padding: 14px;
      border: 1px solid rgba(201, 169, 97, 0.34);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(16px);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18), 0 0 26px rgba(201, 169, 97, 0.12);
      opacity: 0;
      transform: translateY(18px);
      animation: fadeUp 0.8s ease 1.05s forwards;
    }

    .splash-login-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.78);
      font-weight: 800;
      letter-spacing: 2px;
      font-size: 13px;
    }

    .splash-login-title span:last-child {
      color: rgba(201, 169, 97, 0.8);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 1px;
    }

    .platform-board {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(12px, 1.3vw, 16px);
      width: min(780px, 100%);
      margin: 0 auto;
      animation: fadeUp 0.8s ease 1.1s both;
    }

    .platform-chip {
      min-height: clamp(88px, 8.8vh, 108px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(12px);
      padding: 18px;
      display: grid;
      place-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, 0.88);
      opacity: 0;
      transform: translateY(18px);
      animation: cardIn 0.7s ease forwards;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .platform-chip:hover {
      transform: translateY(-4px);
      border-color: rgba(201, 169, 97, 0.7);
      box-shadow: 0 14px 34px rgba(201, 169, 97, 0.15);
    }

    .platform-chip:nth-child(1) { animation-delay: 1.3s; }
    .platform-chip:nth-child(2) { animation-delay: 1.4s; }
    .platform-chip:nth-child(3) { animation-delay: 1.5s; }
    .platform-chip:nth-child(4) { animation-delay: 1.6s; }
    .platform-chip:nth-child(5) { animation-delay: 1.7s; }
    .platform-chip:nth-child(6) { animation-delay: 1.8s; }
    .platform-chip:nth-child(7) { animation-delay: 1.9s; }
    .platform-chip:nth-child(8) { animation-delay: 2.0s; }
    .platform-chip:nth-child(9) { animation-delay: 2.1s; }

    .platform-chip .chip-icon {
      font-size: 25px;
      line-height: 1;
    }

    .platform-chip strong {
      font-size: 17px;
      line-height: 1.1;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 1px;
    }

    .platform-chip span {
      color: rgba(255, 255, 255, 0.46);
      font-size: 12px;
    }

    .partner-section {
      display: grid;
      place-items: center;
      gap: clamp(10px, 1.4vh, 18px);
      opacity: 0;
      transform: translateY(18px);
      animation: fadeUp 0.8s ease 2.3s forwards;
    }

    .partner-title {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      color: rgba(255, 255, 255, 0.5);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: 4px;
    }

    .partner-title::before,
    .partner-title::after {
      content: "";
      width: 30px;
      height: 1px;
      background: rgba(255, 255, 255, 0.26);
    }

    .partner-logos {
      display: grid;
      grid-template-columns: repeat(9, auto);
      gap: clamp(14px, 1.5vw, 20px);
      justify-content: center;
    }

    .partner-logo {
      display: grid;
      justify-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, 0.44);
      font-size: 11px;
      transition: transform 0.2s ease;
    }

    .partner-logo:hover {
      transform: translateY(-3px) scale(1.08);
    }

    .partner-logo i {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      font-style: normal;
      font-size: 15px;
      font-weight: 900;
      overflow: hidden;
    }

    .partner-logo i::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 52%);
    }

    .partner-logo.douyin i { background: linear-gradient(135deg, #1a1a2e, #000); }
    .partner-logo.xhs i { background: linear-gradient(135deg, #ff4757, #ff6b81); }
    .partner-logo.shipinhao i { background: linear-gradient(135deg, #07c160, #2dc84d); }
    .partner-logo.kuaishou i { background: linear-gradient(135deg, #ff4906, #ff6b35); }
    .partner-logo.meituan i { background: linear-gradient(135deg, #ffc107, #ffb300); }
    .partner-logo.ele i { background: linear-gradient(135deg, #009de6, #00b4f0); }
    .partner-logo.jd i { background: linear-gradient(135deg, #e4393c, #f56c6c); }
    .partner-logo.pdd i { background: linear-gradient(135deg, #e02e24, #f44336); }
    .partner-logo.taobao i { background: linear-gradient(135deg, #ff6a00, #ff8f00); }

    .splash-footer {
      display: grid;
      place-items: center;
      gap: clamp(8px, 1.1vh, 12px);
      padding-bottom: 4px;
      opacity: 0;
      transform: translateY(12px);
      animation: fadeUp 0.8s ease 2.6s forwards;
    }

    .splash-slogan {
      margin: 0;
      color: #c9a961;
      font-size: 14px;
      font-weight: 750;
      letter-spacing: 4px;
    }

    .splash-contact {
      color: rgba(255, 255, 255, 0.2);
      font-size: 11px;
      letter-spacing: 5px;
    }

    .login-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 132px;
      gap: 10px;
      align-items: end;
    }

    .splash-login-card .field {
      display: grid;
      gap: 5px;
    }

    .splash-login-card label {
      color: rgba(255, 255, 255, 0.56);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .splash-login-card input {
      min-height: 40px;
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(8, 12, 34, 0.62);
      color: rgba(255, 255, 255, 0.92);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .splash-login-card input::placeholder {
      color: rgba(255, 255, 255, 0.28);
    }

    .splash-login-card input:focus {
      border-color: rgba(201, 169, 97, 0.78);
      box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14);
    }

    .login-form button {
      min-height: 40px;
      border: 0;
      background: linear-gradient(135deg, #d9bd73, #9b7b2f);
      color: #111827;
      font-weight: 900;
      letter-spacing: 1px;
      box-shadow: 0 10px 24px rgba(201, 169, 97, 0.22);
    }

    .login-form button:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    .login-status {
      grid-column: 1 / -1;
      min-height: 16px;
      color: rgba(255, 255, 255, 0.42);
      font-size: 11px;
    }

    .login-status.error {
      color: #fca5a5;
    }

    @keyframes splashGradient {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    @keyframes orbFloat {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to { transform: translate3d(44px, 34px, 0) scale(1.08); }
    }

    @keyframes scanDown {
      from { transform: translateY(-2px); }
      to { transform: translateY(100vh); }
    }

    @keyframes fadeDown {
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes titleRise {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes shimmer {
      to { background-position: -250% center; }
    }

    @keyframes dividerIn {
      from { opacity: 0; transform: scaleX(0.2); }
      to { opacity: 1; transform: scaleX(1); }
    }

    @keyframes cardIn {
      to { opacity: 1; transform: translateY(0); }
    }

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

    .app-shell.auth-locked {
      display: none;
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      background: #192326;
      color: #edf4f3;
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
    }

    .brand {
      padding: 8px 8px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .brand h1 {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 750;
    }

    .brand p {
      margin: 8px 0 0;
      color: #afc1bf;
      font-size: 12px;
    }

    .nav {
      display: grid;
      gap: 6px;
      padding-bottom: 18px;
    }

    .nav-group {
      display: grid;
      gap: 6px;
    }

    .nav button {
      width: 100%;
      justify-content: flex-start;
      text-align: left;
      border: 0;
      color: #dbe8e6;
      background: transparent;
      padding: 0 10px;
    }

    .nav-primary {
      min-height: 48px;
      font-size: 16px;
      font-weight: 800;
    }

    .nav-primary::before,
    .agency-team-toggle::before {
      content: "›";
      display: inline-block;
      width: 14px;
      margin-right: 4px;
      transition: transform 160ms ease;
    }

    .nav-primary.nav-open::before,
    .agency-team-toggle.nav-open::before {
      transform: rotate(90deg);
    }

    .nav-subnav {
      display: none;
      gap: 4px;
      padding-left: 12px;
      border-left: 1px solid rgba(255,255,255,0.16);
      margin: 2px 0 8px 8px;
    }

    .nav-subnav.open {
      display: grid;
    }

    .agency-team-menu {
      display: none;
      gap: 4px;
      margin: 0 0 8px 12px;
    }

    .agency-team-menu.open {
      display: grid;
    }

    .nav-section-label {
      min-height: 28px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      color: #eef8f6;
      font-size: 14px;
      font-weight: 800;
    }

    .agency-team-toggle {
      min-height: 36px;
      color: #eef8f6;
      font-size: 14px;
      font-weight: 800;
      padding-left: 10px;
    }

    .nav-subnav.hidden,
    .team-only.hidden,
    .permission-hidden {
      display: none;
    }

    .nav-subnav button {
      min-height: 38px;
      color: #b9cbc8;
      font-size: 13px;
      font-weight: 650;
      padding-left: 22px;
    }

    .nav button.active,
    .nav button.parent-active {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }

    .nav button.parent-active {
      box-shadow: inset 3px 0 0 var(--accent);
    }

    main {
      min-width: 0;
      padding: 24px;
    }

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

    .topbar h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
    }

    .topbar p {
      margin: 6px 0 0;
      color: var(--muted);
    }

    .actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .toolbar {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
    }

    .cloud-panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      margin-bottom: 16px;
      box-shadow: var(--shadow);
      display: grid;
      gap: 10px;
    }

    .cloud-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cloud-status {
      color: var(--muted);
      font-size: 12px;
    }

    .auth-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .auth-row.hidden {
      display: none;
    }

    .toolbar-row {
      display: grid;
      grid-template-columns: minmax(250px, 1.35fr) repeat(6, minmax(116px, 1fr));
      gap: 10px;
      align-items: end;
    }

    .field {
      display: grid;
      gap: 5px;
    }

    .field label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 650;
    }

    .field.hidden {
      display: none;
    }

    .check-group {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      padding: 7px 9px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .check-group label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
    }

    .check-group input {
      width: auto;
      min-height: auto;
      margin: 0;
    }

    .module-panel {
      grid-column: 1 / -1;
      display: grid;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f9fbfb;
      padding: 12px;
    }

    .module-panel.hidden { display: none; }

    .module-title {
      margin: 0;
      font-size: 14px;
      font-weight: 750;
    }

    .shoot-assignment-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 8px;
    }

    .shoot-session-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .shoot-session-item {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
    }

    .shoot-session-item strong {
      font-size: 13px;
      white-space: nowrap;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      color: var(--ink);
    }

    .shoot-session-item .check-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .shoot-session-item .check-group label {
      margin: 0;
      border-radius: 999px;
      background: #fff;
    }

    .shoot-assignment-item {
      display: grid;
      grid-template-columns: 72px minmax(120px, 1fr) minmax(150px, 1fr);
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
    }

    .shoot-assignment-item strong {
      font-size: 13px;
      white-space: nowrap;
    }

    .module-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .edit-lines {
      display: grid;
      gap: 8px;
    }

    .edit-line {
      display: grid;
      grid-template-columns: 88px repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: end;
    }

    .edit-line.third-party {
      grid-template-columns: 88px repeat(2, minmax(0, 1fr)) minmax(0, 1fr);
    }

    .edit-line.final-payment-line {
      grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    }

    .edit-name {
      min-height: 38px;
      display: flex;
      align-items: center;
      font-weight: 700;
      color: var(--ink);
    }

    .segmented {
      display: inline-flex;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 7px;
      overflow: hidden;
      min-height: 36px;
      width: 100%;
    }

    .segmented button {
      border: 0;
      border-radius: 0;
      min-height: 34px;
      min-width: 0;
      flex: 1 1 0;
      padding: 0 8px;
      font-size: 12px;
      white-space: nowrap;
      background: transparent;
    }

    .segmented button.active {
      background: var(--ink);
      color: #fff;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .person-card, .summary-card, .form-panel, .table-panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .person-card {
      padding: 16px;
      display: grid;
      gap: 13px;
    }

    .person-card h3, .panel-title {
      margin: 0;
      font-size: 16px;
      line-height: 1.25;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .metric-grid.status-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .metric {
      background: var(--panel-soft);
      border: 1px solid #d8e4e7;
      border-radius: 7px;
      padding: 9px;
      min-height: 68px;
      display: grid;
      align-content: start;
      gap: 4px;
    }

    .metric.clickable {
      cursor: pointer;
      transition: transform 120ms ease, border-color 120ms ease;
    }

    .metric.clickable:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
    }

    .metric span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .metric strong {
      font-size: 18px;
      line-height: 1.2;
      word-break: break-word;
    }

    .status-grid .metric {
      min-height: 64px;
      padding: 8px;
    }

    .status-grid .metric span {
      font-size: 11px;
    }

    .status-grid .metric strong {
      font-size: 17px;
    }

    .metric.money strong { color: var(--accent-strong); }
    .metric.warn strong { color: var(--warn); }
    .metric.good strong { color: var(--good); }
    .metric.blue strong { color: var(--blue); }
    .metric.risk strong,
    .summary-card.risk strong,
    .risk-text {
      color: #b91c1c;
      font-weight: 900;
    }

    .section {
      margin-top: 18px;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .summary-card {
      padding: 14px;
    }

    .summary-card span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 8px;
    }

    .summary-card strong {
      font-size: 22px;
      line-height: 1.2;
    }

    .summary-card.money strong { color: var(--accent-strong); }
    .summary-card.warn strong { color: var(--warn); }
    .summary-card.good strong { color: var(--good); }
    .summary-card.blue strong { color: var(--blue); }
    .summary-card.clickable-card {
      cursor: pointer;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .summary-card.clickable-card:hover {
      transform: translateY(-1px);
      border-color: rgba(15, 118, 110, .42);
      box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    }

    .form-panel {
      padding: 16px;
      margin-bottom: 16px;
      display: none;
    }

    .form-panel.open { display: block; }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .form-grid .wide { grid-column: span 2; }
    .form-grid .full { grid-column: 1 / -1; }

    .form-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
    }

    .role-save-status {
      display: none;
      margin: 10px 0;
      padding: 9px 11px;
      border: 1px solid #b6e3d7;
      border-radius: 7px;
      background: #ecfdf5;
      color: #0f766e;
      font-size: 13px;
      font-weight: 750;
    }

    .role-save-status:not(:empty) {
      display: block;
    }

    .role-save-status.pending {
      border-color: #fde68a;
      background: #fffbeb;
      color: #92400e;
    }

    .role-save-status.error {
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }

    .table-panel {
      overflow: hidden;
    }

    .table-wrap {
      overflow: auto;
      max-height: min(72vh, 760px);
      scrollbar-gutter: stable;
    }

    .table-load-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 12px;
      border-top: 1px solid var(--line);
      background: #f8fafc;
      color: var(--muted);
      font-size: 12px;
    }

    .table-load-more button {
      min-height: 30px;
      border-radius: 999px;
      padding: 0 14px;
      background: #fff;
      color: var(--ink);
      font-weight: 650;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1120px;
      background: #fff;
    }

    th, td {
      padding: 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
      white-space: nowrap;
    }

    th {
      background: #f1f5f7;
      color: #44515a;
      font-size: 12px;
      font-weight: 750;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    tbody tr.row-settled td { background: #ecfdf3; }
    tbody tr.row-unassigned td { background: #fee2e2; color: #7f1d1d; }
    tbody tr.row-not-started td { background: #fff1f2; }
    tbody tr.row-working td { background: #fffbeb; }
    tbody tr.row-risk td { background: #fecaca; color: #7f1d1d; }
    tbody tr.row-payment-unconfirmed td { background: #fee2e2; color: #7f1d1d; }
    tbody tr.row-shared-pending td { background: #fff7ed; }
    tbody tr.row-settled:hover td { background: #dcfce7; }
    tbody tr.row-unassigned:hover td { background: #fecaca; }
    tbody tr.row-not-started:hover td { background: #ffe4e6; }
    tbody tr.row-working:hover td { background: #fef3c7; }
    tbody tr.row-risk:hover td { background: #fca5a5; }
    tbody tr.row-payment-unconfirmed:hover td { background: #fecaca; }
    tbody tr.row-shared-pending:hover td { background: #ffedd5; }
    tr:hover td { background: #fbfcfd; }

    .status {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 650;
      background: #edf2f7;
    }

    .status.done { background: #dcfce7; color: #166534; }
    .status.unassigned { background: #dc2626; color: #fff; }
    .status.working { background: #fef3c7; color: #92400e; }
    .status.pending { background: #e5e7eb; color: #374151; }
    .status.not-started { background: #ffe4e6; color: #be123c; }
    .status.no { background: #fee2e2; color: #991b1b; }

    .payment-cell {
      display: grid;
      gap: 6px;
      min-width: 150px;
    }

    .proof-link {
      color: var(--blue);
      font-size: 12px;
      font-weight: 650;
      text-decoration: none;
      width: fit-content;
      min-height: 0;
      border: 0;
      background: transparent;
      padding: 0;
    }

    .proof-link:hover { text-decoration: underline; }

    .confirm-note {
      color: var(--danger);
      font-size: 12px;
      font-weight: 650;
    }

    .chart-panel {
      display: grid;
      gap: 10px;
      min-height: 220px;
      align-items: end;
      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .chart-bar {
      display: grid;
      gap: 7px;
      align-items: end;
      min-height: 180px;
    }

    .chart-bar-stack {
      display: grid;
      align-items: end;
      gap: 4px;
      height: 128px;
    }

    .chart-bar-fill {
      min-height: 4px;
      border-radius: 5px 5px 0 0;
      background: var(--accent);
    }

    .chart-bar-fill.money { background: var(--blue); }
    .chart-bar-fill.commission { background: var(--good); }

    .chart-bar small {
      color: var(--muted);
      font-size: 11px;
      text-align: center;
      white-space: nowrap;
    }

    .chart-bar strong {
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
    }

    .row-actions {
      display: flex;
      gap: 6px;
    }

    .row-actions button {
      min-height: 30px;
      padding: 0 8px;
      font-size: 12px;
    }

    .reimburse-grid {
      display: grid;
      gap: 8px;
    }

    .reimburse-line {
      display: grid;
      grid-template-columns: minmax(110px, 0.8fr) minmax(92px, 0.55fr) minmax(110px, 0.65fr) minmax(130px, 1fr) auto;
      gap: 8px;
      align-items: end;
    }

    .participant-line {
      display: grid;
      grid-template-columns: minmax(110px, 1fr) minmax(110px, 0.8fr) minmax(130px, 1fr);
      gap: 8px;
      align-items: end;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbfd;
    }

    .participant-line .mini-check {
      min-height: 38px;
      margin: 0;
    }

    .hq-delivery-line {
      display: grid;
      grid-template-columns: 150px minmax(110px, 0.7fr) minmax(90px, 0.5fr) minmax(130px, 1fr);
      gap: 8px;
      align-items: end;
    }

    .hq-delivery-line.contract-line {
      grid-template-columns: 150px minmax(110px, 0.7fr) minmax(90px, 0.5fr);
    }

    .delivery-items-grid {
      display: grid;
      gap: 10px;
    }

    .reimburse-line .edit-name {
      font-size: 13px;
    }

    .mini-value {
      min-height: 38px;
      display: flex;
      align-items: center;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }

    .mini-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 2px 6px 2px 0;
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
      min-height: 32px;
      padding: 5px 9px;
      border: 1px solid #cfd8df;
      border-radius: 7px;
      background: #fff;
      color: #334155;
    }

    .mini-check input {
      appearance: none;
      min-height: auto;
      width: 15px;
      height: 15px;
      margin: 0;
      border: 1.5px solid #94a3b8;
      border-radius: 4px;
      background: #fff;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .mini-check input:checked {
      border-color: var(--good);
      background: var(--good);
    }

    .mini-check input:checked::after {
      content: "";
      width: 7px;
      height: 4px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-45deg);
      margin-top: -1px;
    }

    .mini-check:has(input:checked) {
      border-color: #86efac;
      background: #ecfdf3;
      color: #166534;
    }

    [data-task-row] textarea {
      min-width: 180px;
      min-height: 56px;
    }

    .split-detail {
      display: grid;
      gap: 4px;
      color: #475569;
      font-size: 12px;
      line-height: 1.35;
      white-space: nowrap;
    }

    .task-table {
      min-width: 1960px;
    }

    .task-table th,
    .task-table td {
      vertical-align: middle;
    }

    .task-date-cell { min-width: 104px; }
    .task-merchant-cell { min-width: 132px; white-space: normal; font-weight: 750; }
    .task-source-cell { min-width: 94px; }
    .task-people-cell { min-width: 220px; white-space: normal; font-weight: 750; }
    .task-type-cell { min-width: 76px; }
    .task-content-cell { min-width: 260px; white-space: normal; line-height: 1.45; }
    .task-status-cell { min-width: 112px; }
    .task-check-cell { min-width: 210px; white-space: normal; }
    .task-complete-cell { min-width: 128px; }
    .task-finish-cell { min-width: 230px; white-space: normal; }
    .task-drive-cell { min-width: 300px; white-space: normal; }
    .task-travel-cell { min-width: 260px; }
    .task-note-cell { min-width: 190px; }
    .task-action-cell { min-width: 92px; }

    .task-action-stack {
      display: grid;
      gap: 6px;
      justify-items: start;
    }

    .task-action-stack button {
      min-height: 30px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 750;
    }

    .task-status-select {
      min-width: 96px;
      width: 96px;
      padding-right: 28px;
      font-weight: 750;
    }

    .task-complete-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .task-complete-inline input {
      width: 66px;
      min-width: 66px;
      text-align: center;
      font-weight: 750;
    }

    .task-travel-inline {
      display: grid;
      grid-template-columns: 78px 88px;
      gap: 6px;
      align-items: center;
    }

    .task-travel-inline input,
    .task-travel-inline select {
      min-width: 0;
      font-size: 12px;
      font-weight: 750;
    }

    .task-checks {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .task-session-stack {
      display: grid;
      gap: 8px;
      min-width: 210px;
    }

    .task-session-line {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 7px 8px;
      border: 1px solid #dbe3e8;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.82);
    }

    .task-session-line.single {
      grid-template-columns: minmax(0, 1fr);
    }

    .task-session-line strong {
      font-size: 12px;
      color: var(--ink);
      min-width: 0;
      white-space: nowrap;
    }

    .task-session-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      min-width: 0;
    }

    .task-session-line input[type="number"] {
      width: 74px;
      min-width: 74px;
      text-align: center;
      font-weight: 750;
    }

    .task-session-line select {
      width: 86px;
      min-width: 86px;
      font-size: 12px;
      font-weight: 750;
    }

    .session-display {
      display: grid;
      gap: 6px;
      min-width: 160px;
    }

    .session-display.single {
      min-width: 0;
    }

    .session-display-line {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border: 1px solid #dbe3e8;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.74);
    }

    .session-display-line strong {
      font-size: 12px;
      color: #334155;
      white-space: nowrap;
    }

    .person-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      min-width: 0;
    }

    .person-chip {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #0f172a;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .split-detail strong {
      color: var(--ink);
    }

    .empty {
      background: #fff;
      border: 1px dashed #b9c4ca;
      border-radius: var(--radius);
      padding: 28px;
      color: var(--muted);
      text-align: center;
    }

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

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      background: #172026;
      color: #fff;
      padding: 11px 14px;
      border-radius: 7px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 160ms ease, transform 160ms ease;
      pointer-events: none;
      z-index: 20;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .saving-overlay {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(15, 23, 42, 0.18);
      backdrop-filter: blur(2px);
    }

    .saving-overlay.hidden {
      display: none;
    }

    .saving-card {
      min-width: 220px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 18px 22px;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.96);
      color: #0f172a;
      box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
      font-weight: 850;
    }

    .saving-spinner {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 3px solid #d9e2e7;
      border-top-color: var(--accent);
      animation: spin 780ms linear infinite;
      flex: 0 0 auto;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .proof-modal {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(15, 23, 42, 0.62);
    }

    .proof-modal.hidden { display: none; }

    .proof-modal-panel {
      width: min(920px, 100%);
      max-height: 88vh;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .proof-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }

    .proof-modal-head strong { font-size: 16px; }

    .proof-modal-body {
      min-height: 240px;
      overflow: auto;
      padding: 16px;
      background: #f8fafc;
    }

    .proof-modal-body img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      border-radius: 6px;
      background: #fff;
    }

    .password-modal-panel {
      width: min(460px, 100%);
      display: grid;
      grid-template-rows: auto 1fr;
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .password-form {
      padding: 16px;
      display: grid;
      gap: 12px;
    }

    .password-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      padding-top: 4px;
    }

    .import-input {
      display: none;
    }

    @media (max-width: 1100px) {
      .login-gate { height: auto; min-height: 100vh; overflow-y: auto; }
      .login-shell { min-height: calc(100vh - 44px); gap: 24px; }
      .login-logo-mark { width: 58px; height: 58px; font-size: 28px; }
      .login-logo { font-size: 24px; }
      .login-logo-text small { font-size: 14px; }
      .login-title h1 { font-size: 50px; }
      .platform-board { width: min(720px, 100%); }
      .partner-logos { grid-template-columns: repeat(5, auto); row-gap: 14px; }
      .app-shell { grid-template-columns: 1fr; }
      .sidebar {
        position: static;
        height: auto;
      }
      .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .toolbar-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .auth-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-3 { grid-template-columns: 1fr; }
      .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .module-grid { grid-template-columns: 1fr; }
    }

    @media (max-height: 900px) and (min-width: 681px) {
      .login-gate { padding-top: 28px; padding-bottom: 28px; }
      .login-shell { row-gap: 18px; }
      .login-logo-mark { width: 58px; height: 58px; font-size: 28px; }
      .login-logo { font-size: 24px; }
      .login-logo-text small { font-size: 13px; }
      .login-hero { padding: 34px 0 18px; }
      .splash-divider { margin-bottom: 20px; }
      .splash-divider.bottom { margin: 14px auto 16px; }
      .login-title h1 { font-size: clamp(36px, 4vw, 54px); }
      .login-title p { margin-top: 14px; font-size: 17px; }
      .splash-login-card { margin: 14px auto 12px; }
      .platform-chip { min-height: 82px; padding: 12px; }
      .platform-chip .chip-icon { font-size: 21px; }
      .platform-chip strong { font-size: 15px; }
      .partner-logo i { width: 38px; height: 38px; font-size: 13px; border-radius: 10px; }
      .partner-logo { gap: 5px; }
      .splash-slogan { font-size: 12px; }
    }

    @media (max-height: 760px) and (min-width: 681px) {
      .login-gate { overflow-y: auto; }
      .login-shell { align-content: start; }
      .login-hero { padding-top: 24px; }
      .platform-board { width: min(700px, 100%); }
      .platform-chip { min-height: 74px; }
      .partner-section { margin-top: 6px; }
    }

    @media (max-width: 680px) {
      .login-gate { padding: 14px; }
      .login-shell { min-height: calc(100vh - 28px); gap: 18px; }
      .login-logo {
        gap: 10px;
        font-size: 20px;
        align-items: center;
      }
      .login-logo-mark {
        width: 50px;
        height: 50px;
        font-size: 24px;
        border-radius: 12px;
      }
      .login-logo-text small {
        font-size: 12px;
        letter-spacing: 1px;
      }
      .login-hero { padding: 10px 0; }
      .login-title h1 {
        font-size: 34px;
        letter-spacing: 3px;
      }
      .login-title p {
        font-size: 14px;
        letter-spacing: 2px;
        margin-top: 14px;
      }
      .splash-divider { margin-bottom: 18px; }
      .splash-divider.bottom { margin: 16px auto 16px; }
      .splash-login-card {
        margin: 14px auto 12px;
        padding: 12px;
      }
      .login-form { grid-template-columns: 1fr; }
      .platform-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
      }
      .platform-chip {
        min-height: 78px;
        padding: 10px 6px;
      }
      .platform-chip .chip-icon { font-size: 20px; }
      .platform-chip strong { font-size: 13px; }
      .partner-section { gap: 12px; }
      .partner-title { font-size: 12px; }
      .partner-logos {
        grid-template-columns: repeat(3, auto);
        gap: 12px 16px;
      }
      .partner-logo i {
        width: 38px;
        height: 38px;
        font-size: 13px;
        border-radius: 10px;
      }
      .splash-slogan {
        font-size: 12px;
        letter-spacing: 2px;
      }
      .splash-contact { letter-spacing: 2px; }
      main { padding: 16px; }
      .topbar { display: grid; }
      .actions { justify-content: flex-start; }
      .toolbar-row, .grid-4, .form-grid { grid-template-columns: 1fr; }
      .auth-row { grid-template-columns: 1fr; }
      .form-grid .wide { grid-column: auto; }
      .nav { grid-template-columns: 1fr; }
      .metric-grid { grid-template-columns: 1fr; }
      .summary-card strong { font-size: 18px; }
      .edit-line,
      .edit-line.third-party,
      .reimburse-line,
      .hq-delivery-line,
      .hq-delivery-line.contract-line,
      .shoot-assignment-grid,
      .shoot-assignment-item {
        grid-template-columns: 1fr;
      }
      .edit-name { min-height: auto; }
    }