@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#EEF1F5; --surface:#FFFFFF; --ink:#1B2430; --muted:#6B7386; --line:#DCE1E8;
  --indigo:#35407A; --indigo-dark:#262E5C;
  --success:#2F7A4F; --success-bg:#E7F3EB;
  --error:#B3392F; --error-bg:#FBEAE8;
  --radius:10px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; }
h1,h2{ font-family:'Space Grotesk',sans-serif; margin:0 0 6px; }

.center-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px; max-width:380px; width:100%; text-align:center; }
.card h1{ font-size:1.6rem; }
.sub{ color:var(--muted); font-size:0.9rem; margin-bottom:26px; }
.fine{ color:var(--muted); font-size:0.78rem; margin-top:20px; line-height:1.5; }

.btn{ display:block; text-decoration:none; font-weight:600; font-size:0.9rem; border-radius:8px; padding:12px 16px; margin-bottom:10px; cursor:pointer; border:none; }
.btn-provider{ color:#fff; }
.btn-google{ background:#4285F4; }
.btn-google:hover{ background:#3367D6; }
.btn-microsoft{ background:#2F2F2F; }
.btn-microsoft:hover{ background:#171717; }
.btn-ghost{ background:transparent; color:var(--indigo); border:1px solid var(--line); display:inline-block; width:auto; }
.btn-ghost:hover{ background:#F5F6F9; }
.btn-primary{ background:var(--indigo); color:#fff; width:auto; display:inline-block; }
.btn-primary:hover{ background:var(--indigo-dark); }

.page{ max-width:720px; margin:0 auto; padding:0 20px 80px; }
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-family:'Space Grotesk',sans-serif; font-weight:700; }
.topbar-right{ display:flex; align-items:center; gap:16px; font-family:'Inter',sans-serif; font-weight:400; font-size:0.9rem; }
.link-muted{ color:var(--muted); text-decoration:underline; }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:16px; }
.muted{ color:var(--muted); font-size:0.9rem; }

.drive-list{ margin-bottom:14px; }
.drive-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.9rem; }
.drive-row:last-child{ border-bottom:none; }

.field-label{ display:block; font-size:0.82rem; color:var(--muted); margin:14px 0 6px; }
select, input[type=text]{ width:100%; font-family:'Inter',sans-serif; font-size:0.9rem; padding:9px 12px; border:1px solid var(--line); border-radius:7px; background:#FCFCFD; color:var(--ink); }

.dropzone{ margin-top:18px; border:1.5px dashed var(--line); border-radius:8px; padding:32px 18px; text-align:center; color:var(--muted); font-size:0.9rem; cursor:pointer; }
.dropzone.drag{ border-color:var(--indigo); background:#F5F6FB; }
.dropzone strong{ color:var(--ink); }

.filelist{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.file-card{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.file-card-top{ display:flex; justify-content:space-between; gap:10px; }
.file-name{ font-weight:600; font-size:0.9rem; word-break:break-all; }
.progress-track{ height:6px; background:#EDEFF3; border-radius:4px; overflow:hidden; margin-top:10px; }
.progress-fill{ height:100%; background:var(--indigo); width:0%; transition:width .2s ease; }
.file-status{ font-size:0.78rem; color:var(--muted); margin-top:8px; }
.file-status.done{ color:var(--success); }
.file-status.error{ color:var(--error); }