:root { color-scheme: light; --forest-950:#052e16; --forest-900:#14532d; --forest-800:#166534; --emerald:#059669; --mint:#ecfdf5; --mint-strong:#d1fae5; --ink:#17251d; --muted:#68786e; --line:#d8e7dc; font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { background:#eff9f2; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(145deg,#f7fcf8,#eaf8ef 52%,#f8fbf8); }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.hidden { display:none !important; }
.form-ambient { position:fixed; border-radius:50%; pointer-events:none; filter:blur(10px); opacity:.6; }
.form-ambient-one { width:340px; height:340px; left:-150px; top:-110px; background:radial-gradient(circle,#86efac,transparent 70%); }
.form-ambient-two { width:420px; height:420px; right:-200px; bottom:-190px; background:radial-gradient(circle,#a7f3d0,transparent 70%); }
.auth-loading { min-height:100svh; display:grid; place-items:center; align-content:center; gap:14px; color:var(--forest-800); }
.auth-loading p { margin:0; font-weight:800; }
.spinner { width:34px; height:34px; border:4px solid #d8efe0; border-top-color:var(--emerald); border-radius:50%; animation:spin .85s linear infinite; }
.spinner.large { width:48px; height:48px; border-width:5px; }
@keyframes spin { to { transform:rotate(360deg); } }
.task-shell { width:min(820px,100%); margin:0 auto; padding:18px 20px 48px; position:relative; }
.task-topbar { min-height:64px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:13px; padding:4px 0 16px; }
.back-link { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:13px; color:var(--forest-800); background:rgba(255,255,255,.9); font-size:28px; text-decoration:none; }
.task-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; color:white; background:linear-gradient(145deg,var(--forest-800),var(--emerald)); box-shadow:0 10px 24px rgba(5,150,105,.2); font-size:20px; font-weight:900; }
.task-brand strong,.task-brand span { display:block; }
.task-brand strong { font-size:18px; }
.task-brand span { margin-top:2px; color:var(--muted); font-size:11px; }
.signed-user { text-align:right; }
.signed-user span,.signed-user strong { display:block; }
.signed-user span { color:var(--muted); font-size:10px; }
.signed-user strong { max-width:110px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.task-hero { padding:34px 38px 62px; border-radius:27px 27px 0 0; color:white; background:radial-gradient(circle at 88% 10%,rgba(52,211,153,.45),transparent 32%),linear-gradient(135deg,#0b3b22,#166534 66%,#047857); }
.task-hero p { margin:0 0 9px; color:#9ce8bc; font-size:11px; font-weight:900; letter-spacing:.16em; }
.task-hero h1 { margin:0 0 8px; font-size:clamp(31px,7vw,46px); letter-spacing:-.04em; }
.task-hero span { color:#d2eddb; font-size:13px; }
.task-form { margin-top:-32px; padding:28px 34px 34px; border:1px solid rgba(255,255,255,.9); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 24px 65px rgba(6,78,45,.14); position:relative; }
.form-section + .form-section { margin-top:30px; padding-top:28px; border-top:1px solid #e5eee8; }
.section-title { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.section-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:var(--forest-800); background:var(--mint-strong); font-size:22px; font-weight:900; }
.section-icon.secondary { background:#eaf5ed; }
.section-title p,.section-title h2 { margin:0; }
.section-title p { color:var(--emerald); font-size:9px; font-weight:900; letter-spacing:.15em; }
.section-title h2 { margin-top:2px; font-size:22px; }
.field { min-width:0; margin-top:18px; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.field label { display:block; margin:0 0 8px; font-size:14px; font-weight:900; }
.field label em { color:#dc4c4c; font-style:normal; }
.field label small { color:#8b9890; font-size:11px; font-weight:700; }
.control,.date-control { width:100%; max-width:100%; min-width:0; min-height:54px; border:1px solid #cddcd2; border-radius:15px; color:var(--ink); background:#fbfefc; font-size:16px; box-shadow:0 3px 10px rgba(20,83,45,.035); outline:none; transition:border-color .18s,box-shadow .18s,background .18s; }
.control { padding:13px 15px; }
textarea.control { min-height:100px; resize:vertical; }
.control:focus,.date-control:focus-within { border-color:var(--emerald); background:white; box-shadow:0 0 0 4px rgba(5,150,105,.11); }
.muted-control { color:#78877e; background:#f1f6f3; opacity:1; }
.date-control { display:grid; grid-template-columns:1fr auto; align-items:center; padding:0 14px; overflow:hidden; position:relative; }
.date-display { width:100%; min-width:0; border:0; color:var(--ink); background:transparent; font-size:16px; pointer-events:none; }
.native-date { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.suggestion-field { position:relative; }
.suggestions { position:absolute; z-index:20; top:calc(100% + 7px); left:0; right:0; max-height:230px; padding:6px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:0 18px 38px rgba(6,78,45,.16); overflow-y:auto; }
.suggestion-item { width:100%; padding:12px; border:0; border-radius:10px; color:var(--ink); background:white; text-align:left; cursor:pointer; }
.suggestion-item:hover,.suggestion-item:focus { background:var(--mint); outline:none; }
.submit-button { width:100%; min-height:58px; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:30px; border:0; border-radius:16px; color:white; background:linear-gradient(135deg,var(--forest-800),var(--emerald)); box-shadow:0 14px 30px rgba(5,150,105,.24); font-size:16px; font-weight:900; cursor:pointer; }
.submit-button:disabled { cursor:wait; opacity:.65; }
.message-box { margin-top:18px; padding:18px; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.7; }
.message-box.success { border:1px solid #a7e9c2; color:var(--forest-900); background:#effcf4; }
.message-box.error { border:1px solid #fecaca; color:#991b1b; background:#fff5f5; }
.backup-card { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; padding:16px; border:1px dashed #b9d6c2; border-radius:15px; background:#f7fbf8; }
.backup-card strong,.backup-card span { display:block; }
.backup-card strong { font-size:13px; }
.backup-card span { margin-top:3px; color:var(--muted); font-size:11px; }
.backup-card a { flex:0 0 auto; color:var(--forest-700); font-size:12px; font-weight:900; text-decoration:none; }
.loading-overlay { position:absolute; inset:0; z-index:40; min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:17px; padding-top:160px; border-radius:28px; color:var(--forest-800); background:rgba(250,254,251,.95); backdrop-filter:blur(5px); text-align:center; white-space:pre-line; }
.loading-overlay strong { line-height:1.65; }
@media (max-width:700px) {
  .task-shell { padding:0 0 34px; }
  .task-topbar { padding:11px 14px; background:rgba(255,255,255,.92); }
  .task-brand span,.signed-user span { display:none; }
  .brand-mark { width:40px; height:40px; border-radius:13px; font-size:18px; }
  .task-brand strong { font-size:15px; }
  .signed-user strong { max-width:72px; font-size:12px; }
  .task-hero { padding:29px 22px 57px; border-radius:0; }
  .task-form { width:calc(100% - 16px); margin:-31px 8px 0; padding:24px 14px 28px; border-radius:24px; }
  .field-grid { grid-template-columns:1fr; gap:0; }
  .control,.date-control { min-height:56px; }
  .backup-card { align-items:flex-start; flex-direction:column; gap:12px; }
  .backup-card a { min-height:40px; display:flex; align-items:center; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; scroll-behavior:auto !important; } }