// 內 UCHI — thin single-weight line icons (Lucide register). currentColor.
function Icon({ name, size = 22, stroke = 1.6, style = {}, fill = false }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    home: <><path {...p} d="M3 11l9-7 9 7"/><path {...p} d="M5 10v10h14V10"/></>,
    calendar: <><rect {...p} x="3" y="4.5" width="18" height="16.5" rx="1.5"/><path {...p} d="M3 9h18M8 2.5v4M16 2.5v4"/></>,
    bowl: <><path {...p} d="M3 11h18a9 9 0 0 1-18 0Z"/><path {...p} d="M12 3c-1.5 1.5-1.5 3 0 4.5"/><path {...p} d="M9 11l1.5-9"/></>,
    message: <><path {...p} d="M4 5h16v11H8l-4 4V5Z"/></>,
    user: <><circle {...p} cx="12" cy="8" r="3.6"/><path {...p} d="M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5"/></>,
    chevL: <path {...p} d="M15 4l-8 8 8 8"/>,
    chevR: <path {...p} d="M9 4l8 8-8 8"/>,
    arrowR: <><path {...p} d="M4 12h15"/><path {...p} d="M13 6l6 6-6 6"/></>,
    check: <path {...p} d="M4 12.5l5 5L20 6"/>,
    plus: <path {...p} d="M12 5v14M5 12h14"/>,
    mail: <><rect {...p} x="3" y="5" width="18" height="14" rx="1.5"/><path {...p} d="M3.5 6.5l8.5 6 8.5-6"/></>,
    lock: <><rect {...p} x="4.5" y="10.5" width="15" height="10" rx="1.5"/><path {...p} d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></>,
    shield: <><path {...p} d="M12 3l8 3v5c0 5-3.4 8.5-8 10-4.6-1.5-8-5-8-10V6l8-3Z"/></>,
    clock: <><circle {...p} cx="12" cy="12" r="8.5"/><path {...p} d="M12 7.5V12l3 2"/></>,
    users: <><circle {...p} cx="9" cy="8" r="3.2"/><path {...p} d="M3 19c.7-3 3-4.6 6-4.6s5.3 1.6 6 4.6"/><path {...p} d="M16 5.2A3.2 3.2 0 0 1 18 11M22 19c-.4-1.7-1.4-3-3-3.8"/></>,
    bottle: <><path {...p} d="M10 2h4v3.2c0 .8.3 1.2 1 2 .8.9 1 1.7 1 3V20a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-9.8c0-1.3.2-2.1 1-3 .7-.8 1-1.2 1-2V2Z"/><path {...p} d="M8.5 13h7"/></>,
    spark: <><path {...p} d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z"/></>,
    x: <path {...p} d="M6 6l12 12M18 6L6 18"/>,
    menu: <path {...p} d="M3 7h18M3 12h18M3 17h18"/>,
    logout: <><path {...p} d="M9 4H5v16h4"/><path {...p} d="M14 8l4 4-4 4M18 12H9"/></>,
    settings: <><circle {...p} cx="12" cy="12" r="3"/><path {...p} d="M12 2v3M12 19v3M5 5l2 2M17 17l2 2M2 12h3M19 12h3M5 19l2-2M17 7l2-2"/></>,
    map: <><path {...p} d="M12 21c4.5-4.3 7-7.8 7-11a7 7 0 1 0-14 0c0 3.2 2.5 6.7 7 11Z"/><circle {...p} cx="12" cy="10" r="2.4"/></>,
    card: <><rect {...p} x="3" y="5.5" width="18" height="13" rx="2"/><path {...p} d="M3 9.5h18"/></>,
    flame: <><path {...p} d="M12 3c.5 3-2 4-2 7a2 2 0 0 0 4 0c0-.8-.3-1.4-.3-1.4 1.6 1 2.8 2.8 2.8 5.4a4.5 4.5 0 1 1-9 0C7.5 9.5 11 7.5 12 3Z"/></>,
    star: <path {...(fill ? {...p, fill:"currentColor"} : p)} d="M12 3.5l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.9 6.7 20l1.2-6L3.4 9.8l6-.7L12 3.5Z"/>,
    key: <><circle {...p} cx="8" cy="14" r="4"/><path {...p} d="M11 11l9-9M17 4l2 2M14 7l2 2"/></>,
    bell: <><path {...p} d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z"/><path {...p} d="M10 20a2 2 0 0 0 4 0"/></>,
    qr: <><rect {...p} x="4" y="4" width="6" height="6" rx="1"/><rect {...p} x="14" y="4" width="6" height="6" rx="1"/><rect {...p} x="4" y="14" width="6" height="6" rx="1"/><path {...p} d="M14 14h2v2M20 14v6M14 20h2"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display:"block", flexShrink:0, ...style }}>
      {paths[name] || null}
    </svg>
  );
}

// Brand mark — Google "G", Microsoft squares, Apple — full-color logos for OAuth buttons
function GoogleMark({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" style={{display:"block"}}>
      <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.4 30.2 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.8 6.1C12.3 13.2 17.7 9.5 24 9.5Z"/>
      <path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.5 3-2.2 5.5-4.7 7.2l7.3 5.7c4.3-4 6.8-9.9 6.8-17.4Z"/>
      <path fill="#FBBC05" d="M10.4 28.3a14.5 14.5 0 0 1 0-8.6l-7.8-6.1a24 24 0 0 0 0 20.8l7.8-6.1Z"/>
      <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.3-5.7c-2 1.4-4.7 2.3-8.6 2.3-6.3 0-11.7-3.7-13.6-9.1l-7.8 6.1C6.5 42.6 14.6 48 24 48Z"/>
    </svg>
  );
}
function MicrosoftMark({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 23 23" style={{display:"block"}}>
      <rect x="1" y="1" width="10" height="10" fill="#F25022"/>
      <rect x="12" y="1" width="10" height="10" fill="#7FBA00"/>
      <rect x="1" y="12" width="10" height="10" fill="#00A4EF"/>
      <rect x="12" y="12" width="10" height="10" fill="#FFB900"/>
    </svg>
  );
}

Object.assign(window, { Icon, GoogleMark, MicrosoftMark });