/* components.css — 通用组件：弹窗、Toast、按钮、表单、表格、色板 */
  .modal-mask{
    position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;
    opacity:0;visibility:hidden;
    /* 显示时 visibility 立即生效（否则打开瞬间无法 focus），隐藏时等淡出结束再隐藏 */
    transition:opacity .25s ease, visibility 0s linear .25s;
  }
  .modal-mask.show{
    opacity:1;visibility:visible;
    transition:opacity .25s ease, visibility 0s;
  }
  .modal{
    background:#fff;border-radius:24px;padding:34px 30px 28px;max-width:410px;width:100%;
    text-align:center;position:relative;transform:translateY(16px) scale(.97);
    transition:.28s cubic-bezier(.2,.9,.3,1.2);
  }
  .modal-mask.show .modal{transform:translateY(0) scale(1)}
  .modal-close{
    position:absolute;right:16px;top:14px;width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;color:#64748b;cursor:pointer;font-size:15px;transition:.2s;
    background:none;border:none;
  }
  .modal-close:hover{background:#f1f5f9;color:#334155}
  .modal-icon{
    width:66px;height:66px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
    font-size:30px;background:linear-gradient(135deg,#fef3c7,#fde68a);
  }
  .modal h3{font-size:18px;font-weight:800}
  .modal-sub{font-size:13px;color:#64748b;margin-top:8px;line-height:1.7}
  .benefits{
    list-style:none;text-align:left;margin:18px 0;display:grid;gap:10px;
    background:#f8fafc;border-radius:14px;padding:16px 18px;
  }
  .benefits li{font-size:13px;color:#475569;display:flex;gap:9px;align-items:center}
  .price-row{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:18px}
  .price-row b{font-size:30px;font-weight:800;color:#f59e0b}
  .price-row span{font-size:13px;color:#64748b}
  .price-row em{
    font-style:normal;font-size:12px;font-weight:700;color:#dc2626;background:#fee2e2;
    padding:2px 8px;border-radius:999px;margin-left:6px;
  }
  .modal-actions{display:flex;gap:12px}
  .btn-ghost{
    flex:1;padding:12px;border-radius:13px;border:1px solid #e2e8f0;background:#fff;
    color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;
  }
  .btn-ghost:hover{background:#f8fafc}
  .btn-primary{
    flex:1.4;padding:12px;border-radius:13px;border:none;cursor:pointer;
    color:#fff;font-size:14px;font-weight:700;transition:.2s;
    background:linear-gradient(135deg,#f59e0b,#f97316);
    box-shadow:0 10px 22px -12px rgba(249,115,22,.95);
  }
  .btn-primary:hover{transform:translateY(-1px)}

  .toast{
    position:fixed;left:50%;bottom:44px;transform:translate(-50%,20px);
    background:rgba(15,23,42,.92);color:#fff;font-size:13.5px;padding:12px 22px;border-radius:12px;
    opacity:0;visibility:hidden;transition:.3s;z-index:200;
    max-width:min(90vw,420px);text-align:center;word-break:break-word;line-height:1.5;
    box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  }
  .toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

  .footer{text-align:center;color:#64748b;font-size:12.5px;padding:10px 20px 40px}
  .latest-tools{display:flex;align-items:center;gap:8px}
  .latest-nav{display:flex;gap:6px}
  .ln-btn{
    width:28px;height:28px;border-radius:9px;border:1px solid #e2e8f0;background:#fff;
    color:#64748b;font-size:17px;line-height:1;cursor:pointer;transition:.18s;
    display:grid;place-items:center;
  }
  .ln-btn:hover{border-color:#93c5fd;color:#2563eb;background:#f8fbff}
  .demo-note{
    font-size:12px;color:#64748b;background:#f8fafc;border-radius:10px;
    padding:8px 10px;margin:-4px 0 16px;line-height:1.6;
  }
  .page-head{margin-bottom:18px}
  .page-head h1{font-size:22px;font-weight:800;letter-spacing:.3px}
  .page-head p{font-size:13.5px;color:#64748b;margin-top:6px;line-height:1.7}
  .page-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
  .page-head-row .page-head{margin-bottom:0}
  .btn-main{
    padding:10px 18px;border:none;border-radius:11px;cursor:pointer;font-size:13.5px;font-weight:700;
    color:#fff;background:linear-gradient(135deg,#2563eb,#3b82f6);white-space:nowrap;transition:.2s;
  }
  .btn-main:hover{transform:translateY(-1px)}
  .btn-soft{
    padding:9px 16px;border:1px solid #dbeafe;border-radius:10px;cursor:pointer;font-size:13px;
    font-weight:600;color:#2563eb;background:#f8fbff;white-space:nowrap;transition:.2s;
  }
  .btn-soft:hover{background:#2563eb;color:#fff;border-color:#2563eb}

  /* 登录 / 注册 */
  .auth-wrap{max-width:440px;margin:18px auto}
  .auth-card{
    background:#fff;border:1px solid #e9eef6;border-radius:22px;padding:28px;
    box-shadow:0 18px 40px -30px rgba(15,23,42,.4);
  }
  .auth-tabs{display:flex;gap:6px;background:#f1f5fb;padding:5px;border-radius:12px;margin-bottom:22px}
  .auth-tab{
    flex:1;padding:9px;border:none;border-radius:9px;background:transparent;
    font-size:14px;font-weight:700;color:#64748b;cursor:pointer;transition:.18s;
  }
  .auth-tab.active{background:#fff;color:#2563eb;box-shadow:0 3px 10px -5px rgba(15,23,42,.35)}
  .field{margin-bottom:15px}
  .field label{display:block;font-size:13px;font-weight:700;color:#334155;margin-bottom:7px}
  .input{
    width:100%;height:44px;padding:0 14px;border:1px solid #e2e8f0;border-radius:11px;
    font-size:14px;font-family:inherit;background:#fff;color:#0f172a;outline:none;transition:.18s;
  }
  .input:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
  .input::placeholder{color:#94a3b8}
  .form-error{font-size:12.5px;color:#dc2626;min-height:18px;margin:2px 0 8px}
  .btn-block{
    width:100%;padding:12px;border:none;border-radius:12px;font-size:14.5px;font-weight:700;
    color:#fff;cursor:pointer;transition:.2s;background:linear-gradient(135deg,#2563eb,#3b82f6);
    box-shadow:0 12px 24px -14px rgba(37,99,235,.95);
  }
  .btn-block:hover{transform:translateY(-1px)}
  .demo-account{
    margin-top:18px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;
    padding:12px 14px;font-size:12.5px;color:#475569;line-height:1.8;
  }
  .demo-account b{color:#0f172a}
  .link-btn{background:none;border:none;color:#2563eb;font-size:12.5px;font-weight:700;cursor:pointer;padding:0}
  .link-btn:hover{text-decoration:underline}

  .color-picker{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
  .color-dot{
    width:30px;height:30px;border-radius:50%;border:3px solid transparent;
    cursor:pointer;transition:.18s;padding:0;
  }
  .color-dot.sel{border-color:#0f172a;transform:scale(1.08)}
  .modal .field{text-align:left}
  .modal .input{height:42px}
  .modal .form-error{text-align:left}