:root { --ink: #1a1a1a; --paper: #f5f0e8; --accent: #c8a96e; --muted: #7a7060; --border: #d4c8b0; --red: #c0392b; --white: #ffffff; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--paper); font-family: 'Noto Sans SC', sans-serif; color: var(--ink); line-height: 1.6; }
  #auth-overlay { position: fixed; inset: 0; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; }
  .spinner { width: 30px; height: 30px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .page-wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px; display: none; }
  .card { background: var(--white); border: 1px solid var(--border); padding: 30px; margin-bottom: 20px; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
  .card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent); }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
  label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 5px; }
  input, select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--border); font-size: 14px; outline: none; background: #fafafa; }
  input:focus { border-color: var(--accent); background: #fff; }
  .btn-submit { width: 100%; padding: 15px; background: var(--ink); color: var(--accent); border: none; font-weight: 700; cursor: pointer; transition: 0.3s; }
  #toast { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: var(--accent); padding: 10px 20px; opacity: 0; transition: 0.4s; pointer-events: none; }
  #toast.show { opacity: 1; }
  @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }