/* -------------------------------------------------------------
       CSS RESET & GEIFU EMERALD THEME (给福翡翠绿主题)
    ------------------------------------------------------------- */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg: #030605;
      --card-bg: rgba(10, 18, 14, 0.82);
      --card-inner: rgba(14, 26, 20, 0.65);
      --border: rgba(255, 255, 255, 0.08);
      --border-emerald: rgba(0, 224, 150, 0.35);
      --border-emerald-glow: rgba(0, 224, 150, 0.55);
      --text: #f7f9f8;
      --muted: #8ca398;
      --muted-dark: #4d6358;
      --emerald: #00d084;
      --emerald-dark: #00965e;
      --emerald-light: #5df2b6;
      --emerald-glow: rgba(0, 208, 132, 0.4);
      --btn-grad: linear-gradient(135deg, #00e096 0%, #00b578 50%, #00875a 100%);
      --btn-grad-hover: linear-gradient(135deg, #10f0a5 0%, #05c986 50%, #029966 100%);
      --gold: #fbbf24;
      --red: #f43f5e;
      --blue: #38bdf8;
    }

    html, body {
      width: 100%;
      height: 100%;
      background-color: var(--bg);
      color: var(--text);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Ambient starfield background with subtle emerald backlight */
    #sky-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background: radial-gradient(circle at 50% 0%, rgba(0, 224, 150, 0.16) 0%, rgba(4, 30, 20, 0.12) 40%, #030605 80%);
    }

    #stars-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Full-screen Admin Console Layout */
    .app-root {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      z-index: 10;
      padding: 12px 16px 16px 16px;
    }

    /* Main Console Window Shell */
    .console-shell {
      position: relative;
      width: 100%;
      height: 100%;
      background: var(--card-bg);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid var(--border-emerald);
      border-radius: 14px;
      box-shadow: 0 0 45px rgba(0, 0, 0, 0.95), 0 -2px 30px rgba(0, 208, 132, 0.28);
      display: grid;
      grid-template-columns: 230px 1fr;
      overflow: hidden;
    }

    /* Glowing Emerald Light Line across the top edge */
    .console-shell::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 2%, #00e096 20%, #a7f3d0 50%, #00b578 80%, transparent 98%);
      box-shadow: 0 0 16px #00e096, 0 0 32px #00b578;
      z-index: 50;
      pointer-events: none;
    }

    /* Top glow light strip */
    .top-glow-image {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 60px;
      pointer-events: none;
      mix-blend-mode: screen;
      background: radial-gradient(ellipse at 50% 0%, rgba(0, 224, 150, 0.4) 0%, transparent 70%);
      opacity: 0.95;
      z-index: 45;
    }

    /* -------------------------------------------------------------
       SIDEBAR NAVIGATION (侧边栏)
    ------------------------------------------------------------- */
    .sidebar {
      background: rgba(6, 12, 9, 0.82);
      border-right: 1px solid var(--border);
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      user-select: none;
      z-index: 20;
    }

    .brand-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6px 16px 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .brand-title {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 9px;
      letter-spacing: -0.01em;
    }

    .brand-logo-img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 0 14px rgba(0, 208, 132, 0.5);
    }

    .brand-tag {
      font-size: 10px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(0, 208, 132, 0.15);
      border: 1px solid rgba(0, 208, 132, 0.3);
      color: var(--emerald-light);
      margin-left: 4px;
    }

    .gear-btn {
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: color 0.15s;
    }
    .gear-btn:hover { color: #fff; }

    .nav-list {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s ease;
      text-decoration: none;
    }

    .nav-item-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-item svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
    }

    .nav-item:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
    }

    .nav-item.active {
      background: rgba(0, 208, 132, 0.2);
      border: 1px solid rgba(0, 208, 132, 0.45);
      color: #fff;
      box-shadow: 0 0 18px rgba(0, 208, 132, 0.25);
    }

    .nav-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
    }
    .nav-badge.amber {
      background: rgba(245, 158, 11, 0.2);
      color: #fcd34d;
      border: 1px solid rgba(245, 158, 11, 0.35);
    }
    .nav-badge.green {
      background: rgba(0, 208, 132, 0.2);
      color: #6ee7b7;
      border: 1px solid rgba(0, 208, 132, 0.35);
    }

    .nav-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      margin: 10px 6px;
    }

    /* Bottom Info Card in Sidebar */
    .sidebar-footer-card {
      background: linear-gradient(135deg, rgba(0, 208, 132, 0.14) 0%, rgba(10, 30, 20, 0.7) 100%);
      border: 1px solid rgba(0, 208, 132, 0.3);
      border-radius: 11px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sidebar-footer-title {
      font-size: 12px;
      font-weight: 700;
      color: #a7f3d0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .sidebar-footer-desc {
      font-size: 11px;
      color: #8ca398;
      line-height: 1.4;
    }

    .sidebar-footer-btn {
      align-self: flex-start;
      margin-top: 4px;
      background: var(--btn-grad);
      color: #032114;
      font-size: 11px;
      font-weight: 700;
      padding: 5px 14px;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      box-shadow: 0 0 12px rgba(0, 208, 132, 0.4);
      transition: all 0.2s;
    }
    .sidebar-footer-btn:hover {
      box-shadow: 0 0 20px rgba(0, 208, 132, 0.7);
      transform: translateY(-1px);
    }

    /* -------------------------------------------------------------
       MAIN WORKSPACE
    ------------------------------------------------------------- */
    .main-workspace {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      background: rgba(4, 9, 7, 0.65);
    }

    /* Top Navigation Bar */
    .topbar {
      height: 58px;
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      shrink-0: 0;
      background: rgba(8, 16, 12, 0.45);
      z-index: 10;
    }

    .topbar-search-box {
      display: flex;
      align-items: center;
      gap: 9px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 7px 14px;
      width: 320px;
      transition: all 0.15s;
    }

    .topbar-search-box:focus-within {
      border-color: rgba(0, 208, 132, 0.6);
      background: rgba(255, 255, 255, 0.06);
      box-shadow: 0 0 12px rgba(0, 208, 132, 0.25);
    }

    .topbar-search-box svg {
      width: 14px;
      height: 14px;
      stroke: var(--muted);
      fill: none;
    }

    .topbar-search-input {
      background: transparent;
      border: none;
      outline: none;
      font-size: 12.5px;
      color: var(--text);
      width: 100%;
    }
    .topbar-search-input::placeholder { color: var(--muted-dark); }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    /* Live Clocks Pill */
    .live-clock-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.03);
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .live-clock-pill span.highlight {
      color: #a7f3d0;
      font-weight: 600;
    }

    .icon-action-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      cursor: pointer;
      position: relative;
      transition: all 0.15s;
    }
    .icon-action-btn:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.05);
    }
    .icon-action-btn.spinning svg {
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      100% { transform: rotate(360deg); }
    }
    .notify-unread-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f43f5e;
      box-shadow: 0 0 6px #f43f5e;
    }

    .user-pill {
      display: flex;
      align-items: center;
      gap: 9px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 9999px;
      padding: 5px 14px 5px 6px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .user-pill:hover {
      border-color: rgba(0, 208, 132, 0.4);
      background: rgba(255, 255, 255, 0.06);
    }

    .user-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--btn-grad);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: #032114;
      box-shadow: 0 0 8px rgba(0, 208, 132, 0.5);
    }

    .user-name {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text);
    }

    .user-role-tag {
      font-size: 10px;
      font-weight: 700;
      color: var(--emerald-light);
      background: rgba(0, 208, 132, 0.15);
      padding: 1px 6px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
    }

    /* -------------------------------------------------------------
       CONTENT BODY VIEWS (多页面视图容器)
    ------------------------------------------------------------- */
    .content-body {
      flex: 1;
      padding: 20px 24px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .content-body::-webkit-scrollbar {
      width: 6px;
    }
    .content-body::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
    }

    /* View Panes */
    .view-pane {
      display: none;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }
    .view-pane.active {
      display: flex;
    }

    /* Row 1: KPI Stats Grid */
    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 14px;
    }

    .kpi-card {
      background: rgba(12, 22, 17, 0.65);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.2s ease;
    }
    .kpi-card:hover {
      border-color: rgba(0, 208, 132, 0.35);
      transform: translateY(-1px);
    }

    .kpi-title {
      font-size: 12px;
      color: var(--muted);
      font-weight: 500;
    }

    .kpi-val-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-top: 8px;
    }

    .kpi-number {
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.03em;
      font-family: 'JetBrains Mono', monospace;
      font-variant-numeric: tabular-nums;
    }

    .kpi-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .kpi-badge.green {
      background: rgba(0, 208, 132, 0.15);
      color: var(--emerald);
      border: 1px solid rgba(0, 208, 132, 0.3);
    }
    .kpi-badge.red {
      background: rgba(244, 63, 94, 0.15);
      color: var(--red);
      border: 1px solid rgba(244, 63, 94, 0.3);
    }
    .kpi-badge.amber {
      background: rgba(251, 191, 36, 0.15);
      color: var(--gold);
      border: 1px solid rgba(251, 191, 36, 0.3);
    }

    /* Charts Row */
    .charts-row {
      display: grid;
      grid-template-columns: 1.45fr 1fr;
      gap: 14px;
      min-height: 240px;
    }

    .chart-panel {
      background: rgba(12, 22, 17, 0.65);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .chart-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .chart-heading {
      font-size: 13.5px;
      font-weight: 600;
      color: #fff;
    }

    .chart-pills {
      display: flex;
      gap: 4px;
    }

    .chart-pill {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 5px;
      color: var(--muted);
      cursor: pointer;
      font-weight: 500;
      transition: all 0.15s;
    }
    .chart-pill:hover { color: #fff; }
    .chart-pill.active {
      background: rgba(0, 208, 132, 0.25);
      border: 1px solid rgba(0, 208, 132, 0.45);
      color: #fff;
      font-weight: 600;
    }

    .chart-svg-box {
      width: 100%;
      height: 160px;
      position: relative;
    }
    .chart-svg-box svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Calendar Overview Card */
    .calendar-panel {
      background: rgba(12, 22, 17, 0.65);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .cal-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cal-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }

    .cal-status-tag {
      font-size: 10px;
      font-weight: 700;
      color: var(--emerald-light);
      background: rgba(0, 208, 132, 0.15);
      border: 1px solid rgba(0, 208, 132, 0.3);
      padding: 2px 7px;
      border-radius: 4px;
      letter-spacing: 0.05em;
    }

    .cal-subtitle {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
      margin-bottom: 12px;
    }

    .metric-lines-box {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .metric-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12.5px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    .metric-line:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .metric-lbl {
      color: var(--muted);
    }

    .metric-val {
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'JetBrains Mono', monospace;
    }

    .app-tag-pills {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .app-tag {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 4px;
      background: rgba(0, 208, 132, 0.15);
      border: 1px solid rgba(0, 208, 132, 0.3);
      color: var(--emerald-light);
      font-weight: 600;
    }

    /* Generic Table Panel */
    .table-panel {
      background: rgba(12, 22, 17, 0.65);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .table-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .table-title {
      font-size: 13.5px;
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .table-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .table-filter-btn {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 11.5px;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s;
    }
    .table-filter-btn.active, .table-filter-btn:hover {
      color: #fff;
      background: rgba(0, 208, 132, 0.22);
      border-color: rgba(0, 208, 132, 0.45);
    }

    .table-container {
      width: 100%;
      overflow-x: auto;
    }

    table.admin-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 12px;
      font-family: 'JetBrains Mono', monospace;
    }

    table.admin-table th {
      padding: 10px 12px;
      font-weight: 600;
      color: var(--muted);
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(255, 255, 255, 0.02);
      text-transform: uppercase;
      font-size: 10.5px;
      letter-spacing: 0.04em;
    }

    table.admin-table td {
      padding: 11px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.035);
      color: #e2e8f0;
      vertical-align: middle;
    }

    table.admin-table tr:hover td {
      background: rgba(0, 208, 132, 0.06);
    }

    .status-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-right: 6px;
    }
    .status-dot.green { background: #00d084; box-shadow: 0 0 8px #00d084; }
    .status-dot.amber { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
    .status-dot.red { background: #f43f5e; box-shadow: 0 0 8px #f43f5e; }

    .route-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .btn-action-small {
      background: rgba(0, 208, 132, 0.18);
      border: 1px solid rgba(0, 208, 132, 0.4);
      color: #a7f3d0;
      padding: 4px 10px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      transition: all 0.15s;
    }
    .btn-action-small:hover {
      background: var(--btn-grad);
      color: #032114;
      box-shadow: 0 0 10px rgba(0, 208, 132, 0.5);
    }

    /* -------------------------------------------------------------
       BILATERAL FINANCIAL VOUCHER MODAL (双边金融核验单弹窗)
    ------------------------------------------------------------- */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.82);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 24px;
    }
    .modal-overlay.open {
      display: flex;
    }

    .modal-box {
      width: 900px;
      max-width: 95vw;
      max-height: 90vh;
      background: #08110c;
      border: 1px solid var(--border-emerald-glow);
      border-radius: 16px;
      box-shadow: 0 0 55px rgba(0, 208, 132, 0.35);
      padding: 24px 28px;
      position: relative;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .modal-close-btn {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
    }
    .modal-close-btn:hover {
      color: #fff;
      background: rgba(244, 63, 94, 0.2);
      border-color: rgba(244, 63, 94, 0.4);
    }

    /* Toast Notification */
    .toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 200;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none;
    }
    .toast-item {
      pointer-events: auto;
      background: #091710;
      border: 1px solid var(--border-emerald);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 208, 132, 0.3);
      padding: 12px 18px;
      border-radius: 8px;
      font-size: 13px;
      color: #f7f9f8;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
  
/* Layout only. Palette, canvas, shell, glow, inputs and button come from zapline. */
.login-app{align-items:center;justify-content:center;padding:32px 20px;overflow:auto}
.login-window{width:100%;max-width:420px;height:auto;min-height:0;display:block;flex-shrink:0}
.login-content{height:auto;padding:30px 32px 34px;overflow:visible}
.login-content .brand-header{padding:0 0 20px;margin-bottom:26px}
.login-caption{font-size:11px;color:var(--muted)}
.login-content h1{font-size:26px;font-weight:600;line-height:1.4;letter-spacing:-.5px;margin-bottom:25px}
.login-content label{display:block;color:var(--text);font-size:12px;font-weight:500;margin-bottom:9px}
.login-field{width:100%;height:46px;margin-bottom:20px}
.login-field .topbar-search-input{font-family:inherit;font-size:14px;height:100%;min-width:0}
.password-field{position:relative;margin-bottom:0;padding-right:44px}
.password-toggle{position:absolute;right:4px;top:4px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}
.password-toggle:hover{color:var(--emerald-light);background:rgba(0,208,132,.08)}
.submit{width:100%;height:46px;font-size:14px;margin-top:28px;border-radius:8px}
.submit:disabled{opacity:.6;cursor:wait;transform:none}
.submit:focus-visible,.password-toggle:focus-visible{outline:2px solid var(--emerald-light);outline-offset:3px}
.form-error{padding:10px 12px;margin:0 0 20px;font-size:12px;line-height:1.6;color:#fda4af;background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.25);border-radius:8px}
#otp{width:100%;height:44px;background:var(--card-inner);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:0 12px}label[for=otp]{margin-top:20px}
@media(max-width:480px){.login-content{padding:26px 24px 30px}.login-app{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){.login-app *{transition:none!important}}