:root { --ink:#172033; --muted:#63708a; --line:#dce3ed; --brand:#2b59ff; --brand-dark:#1d43d2; --button-bg:#2b59ff; --page-bg:#f7f9fc; --card-bg:#ffffff; --soft:#f4f7ff; --danger:#b42318; --success:#067647; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--page-bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:var(--page-bg); } .shell { width:min(100% - 32px, 680px); margin:0 auto; padding:42px 0 30px; } .brand { display:flex; gap:10px; align-items:center; font-size:20px; letter-spacing:-.4px; margin:0 4px 34px; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; color:white; background:var(--button-bg); border-radius:10px; font-size:22px; font-weight:700; overflow:hidden; } .brand-mark.has-logo { background:transparent; } .brand-mark img { width:100%; height:100%; object-fit:contain; } .card { min-height:420px; padding:44px; background:var(--card-bg); border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 35px rgba(33,52,87,.07); } .eyebrow { margin:0 0 8px; color:var(--brand); text-transform:uppercase; letter-spacing:.09em; font-size:12px; font-weight:750; } h1 { margin:0; letter-spacing:-.8px; font-size:32px; } .lede { color:var(--muted); line-height:1.55; margin:12px 0 24px; } .rules { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 26px; } .rules div { padding:13px; border-radius:11px; background:var(--soft); } dt { color:var(--muted); font-size:12px; } dd { margin:4px 0 0; font-size:13px; font-weight:650; overflow-wrap:anywhere; } .dropzone { min-height:142px; display:flex; align-items:center; justify-content:center; gap:14px; padding:22px; cursor:pointer; color:var(--muted); text-align:center; border:1.5px dashed #aebddd; border-radius:14px; background:#fbfcff; transition:.2s; } .dropzone:hover, .dropzone:focus-within { border-color:var(--brand); background:var(--soft); } .dropzone input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .dropzone strong, .dropzone small { display:block; } .dropzone strong { color:var(--brand); font-size:15px; } .dropzone small { margin-top:4px; font-size:13px; } .upload-icon { display:grid; place-items:center; width:36px; height:36px; color:var(--brand); background:#e8eeff; border-radius:50%; font-size:24px; } .file-list { display:grid; gap:8px; padding:0; margin:16px 0; list-style:none; } .file-list li { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; font-size:13px; border:1px solid var(--line); border-radius:9px; } .file-list span { color:var(--muted); white-space:nowrap; } button { width:100%; border:0; border-radius:10px; padding:13px 18px; cursor:pointer; background:var(--button-bg); color:white; font:inherit; font-weight:700; transition:.2s; } button:hover:not(:disabled) { background:var(--brand-dark); } button:disabled { cursor:not-allowed; opacity:.45; } .message { min-height:24px; margin:16px 0 0; color:var(--success); font-size:14px; } .message.error { color:var(--danger); } .centered { min-height:330px; display:grid; align-content:center; justify-items:center; text-align:center; } .spinner { width:29px; height:29px; border:3px solid #dce5ff; border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; } .error-icon { display:grid; place-items:center; width:42px; height:42px; margin:0 0 13px; border-radius:50%; color:var(--danger); background:#fef3f2; font-weight:800; } footer { padding:24px 0 0; color:var(--muted); text-align:center; font-size:12px; } @keyframes spin { to { transform:rotate(360deg); } } @media (max-width:560px) { .shell { width:min(100% - 20px, 680px); padding-top:20px; } .card { padding:28px 20px; border-radius:15px; } h1 { font-size:27px; } .rules { grid-template-columns:1fr; } .rules div { display:flex; justify-content:space-between; gap:12px; } dd { margin:0; text-align:right; } }.admin-shell { width:min(100% - 32px, 880px); } .admin-card { min-height:0; } .admin-form { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .admin-form label { display:grid; gap:7px; color:var(--ink); font-size:13px; font-weight:650; } .admin-form input { width:100%; border:1px solid var(--line); border-radius:9px; padding:11px; color:var(--ink); background:white; font:inherit; } .admin-form button { grid-column:1 / -1; } .optional { color:var(--muted); font-weight:400; } .created-link { display:grid; gap:5px; margin-top:16px; padding:14px; border-radius:10px; background:#ecfdf3; color:var(--success); } .created-link a { overflow-wrap:anywhere; color:#075f39; } .transfer-card { min-height:0; margin-top:20px; } h2 { margin:0; font-size:21px; letter-spacing:-.4px; } .section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; } .section-heading .eyebrow { margin-bottom:4px; } .secondary-button { width:auto; padding:9px 12px; color:var(--brand); background:var(--soft); } .secondary-button:hover:not(:disabled) { background:#e5ebff; } .transfer-list { display:grid; gap:9px; margin-top:22px; color:var(--muted); } .transfer-item { display:grid; gap:4px; padding:13px; border:1px solid var(--line); border-radius:10px; } .transfer-item strong { color:var(--ink); overflow-wrap:anywhere; } .transfer-item span { font-size:13px; } @media (max-width:560px) { .admin-form { grid-template-columns:1fr; } .section-heading { align-items:flex-start; flex-direction:column; } }
.admin-dashboard { width:min(100% - 32px, 1180px); }
.admin-panel { min-height:0; }
.admin-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.tabs { display:flex; gap:8px; border-bottom:1px solid var(--line); margin:0 0 22px; }
.tab-button { width:auto; padding:10px 14px; color:var(--muted); background:transparent; border-radius:8px 8px 0 0; }
.tab-button:hover:not(:disabled), .tab-button.active { color:var(--brand); background:var(--soft); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.compact-form { grid-template-columns:1.1fr .7fr 1fr auto; align-items:end; }
.compact-form button { grid-column:auto; white-space:nowrap; }
.filter-bar { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:22px 0 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fbfcff; }
.filter-bar label, .configuration-form label, .transfer-edit-form label { display:grid; gap:7px; color:var(--ink); font-size:12px; font-weight:650; }
.filter-bar input, .filter-bar select, .configuration-form input, .transfer-edit-form input { width:100%; border:1px solid var(--line); border-radius:9px; padding:10px; color:var(--ink); background:white; font:inherit; }
.admin-transfer-list { margin-top:16px; }
.admin-transfer-item { gap:13px; }
.transfer-main { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.transfer-link { color:var(--brand); font-weight:750; overflow-wrap:anywhere; }
.transfer-meta { margin-top:5px; color:var(--muted); font-size:13px; }
.status-pill { flex:0 0 auto; padding:5px 9px; border-radius:999px; color:var(--muted); background:#f1f5f9; font-size:12px; font-weight:750; }
.status-pill.created, .status-pill.inprogress { color:#1d43d2; background:#e8eeff; }
.status-pill.completed { color:var(--success); background:#ecfdf3; }
.status-pill.expired, .status-pill.cancelled { color:var(--danger); background:#fef3f2; }
.transfer-edit-form { display:grid; grid-template-columns:1fr .7fr 1fr; gap:10px; }
.transfer-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.transfer-actions .secondary-button { padding:9px 11px; }
.file-details { color:var(--muted); font-size:13px; }
.file-details summary { cursor:pointer; color:var(--ink); font-weight:650; }
.file-details ul { display:grid; gap:6px; padding-left:18px; }
.file-details span { color:var(--muted); }
.configuration-form { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.configuration-form button { grid-column:1 / -1; }
@media (max-width:900px) { .compact-form, .filter-bar, .transfer-edit-form, .configuration-form { grid-template-columns:1fr 1fr; } .compact-form button { grid-column:1 / -1; } }
@media (max-width:560px) { .admin-dashboard { width:min(100% - 20px, 1180px); } .admin-header, .transfer-main { flex-direction:column; } .filter-bar, .transfer-edit-form, .configuration-form { grid-template-columns:1fr; } }
.create-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.create-section { padding:18px; border:1px solid var(--line); border-radius:10px; background:#fbfcff; }
.create-section h2 { margin:0 0 14px; }
.stacked-form { grid-template-columns:1fr; }
.stacked-form button { grid-column:auto; }
.download-button { width:auto; padding:8px 11px; text-decoration:none; }
@media (max-width:760px) { .create-grid { grid-template-columns:1fr; } }
[hidden] { display:none !important; }
.transfer-compact { display:grid; grid-template-columns:minmax(180px,1.7fr) .55fr .7fr 1fr auto; gap:10px; align-items:center; }
.more-menu { justify-self:end; }
.more-menu summary { cursor:pointer; color:var(--brand); font-weight:750; }
.more-panel { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fbfcff; }
.danger-button { color:var(--danger); background:#fef3f2; }
.danger-button:hover:not(:disabled) { background:#fee4e2; }
.rules dd .info-icon { position:relative; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; color:var(--brand); background:#e8eeff; font-size:12px; font-weight:800; cursor:help; } .rules dd .info-icon:hover::after, .rules dd .info-icon:focus::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); z-index:20; width:max-content; max-width:240px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; box-shadow:0 12px 30px rgba(23,32,51,.16); font-size:12px; font-weight:650; line-height:1.35; white-space:normal; } .rules dd .info-icon:hover::before, .rules dd .info-icon:focus::before { content:""; position:absolute; left:50%; bottom:calc(100% + 3px); transform:translateX(-50%) rotate(45deg); z-index:21; width:9px; height:9px; background:white; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.file-list a.secondary-button { color:var(--brand); background:var(--soft); text-decoration:none; }
@media (max-width:760px) { .transfer-compact { grid-template-columns:1fr; } .more-menu { justify-self:start; } }
.dropzone.drag-active { border-color:var(--brand); background:var(--soft); }
.transfer-summary-row { display:grid; grid-template-columns:minmax(180px,1.8fr) .65fr .85fr 1.1fr auto; gap:12px; align-items:center; }
.transfer-detail-panel { margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fbfcff; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.detail-grid div { padding:10px; border:1px solid var(--line); border-radius:9px; background:white; }
.detail-grid span { display:block; margin-bottom:4px; color:var(--muted); font-size:12px; }
.detail-grid strong { color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
@media (max-width:900px) { .transfer-summary-row, .detail-grid { grid-template-columns:1fr; } }

.message.status-info { min-height:auto; margin-top:14px; color:#a8b0bf; font-size:6pt; line-height:1.2; }
.message.status-info.error { color:#a8b0bf; }
.file-list a[aria-disabled='true'] { pointer-events:none; opacity:.45; cursor:not-allowed; }

.file-list li { gap:24px; align-items:center; }
.file-list li > div { display:grid; gap:6px; min-width:0; }
.file-list strong { overflow-wrap:anywhere; }
.file-details li { display:grid; gap:6px; }

.file-details ul { padding-left:0; list-style:none; }
.file-details li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; padding:8px 0; }
.admin-file-info { display:grid; gap:7px; min-width:0; }
.admin-file-info strong { overflow-wrap:anywhere; }
.file-download-button { width:auto; padding:6px 9px; font-size:12px; text-decoration:none; white-space:nowrap; }
@media (max-width:560px) { .file-details li { grid-template-columns:1fr; align-items:start; } }
.transfer-filter-bar { grid-template-columns:1fr; align-items:stretch; gap:12px; }
.filter-main-row { display:grid; grid-template-columns:minmax(260px,2fr) minmax(130px,.7fr) minmax(140px,.8fr); gap:10px; }
.filter-date-row { display:grid; grid-template-columns:100px minmax(150px,1fr) minmax(145px,.9fr) minmax(90px,.55fr); gap:10px; align-items:end; }
.filter-group-title { align-self:center; color:var(--muted); font-size:12px; font-weight:750; }
.transfer-table { display:grid; gap:0; margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; font-size:12px; }
.transfer-table-row { display:grid; grid-template-columns:minmax(220px,1.55fr) 78px 136px 136px 106px 62px; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line); }
.transfer-table-row > div { min-width:0; white-space:nowrap; }
.transfer-table-item:last-child .transfer-table-row, .transfer-table > .transfer-table-row:last-child { border-bottom:0; }
.transfer-table-head { color:var(--muted); background:#fbfcff; font-size:11px; font-weight:750; }
.table-sort { width:auto; padding:0; color:inherit; background:transparent; border:0; text-align:left; font:inherit; font-weight:750; cursor:pointer; }
.table-sort:hover:not(:disabled) { color:var(--brand); background:transparent; }
.transfer-table .transfer-link { display:block; width:100%; padding:0; overflow:hidden; color:var(--brand); background:transparent; text-align:left; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; font:inherit; font-weight:750; } .transfer-table .transfer-link:hover:not(:disabled) { color:var(--brand-dark); background:transparent; }
.transfer-table .status-pill { padding:4px 8px; font-size:11px; }
.transfer-table .more-toggle, .transfer-table .transfer-open-link { padding:7px 9px; font-size:12px; text-decoration:none; white-space:nowrap; }
.transfer-table-item { display:block; padding:0; border:0; border-radius:0; }
.transfer-table-item .transfer-detail-panel { width:min(100% - 48px, 880px); max-height:calc(100vh - 64px); overflow-y:auto; overflow-x:hidden; position:fixed; inset:32px auto auto 50%; transform:translateX(-50%); z-index:40; margin:0; padding:22px; border:1px solid rgba(220,227,237,.95); border-radius:20px; background:#ffffff; box-shadow:0 28px 80px rgba(23,32,51,.22); }

.modal-backdrop { position:fixed; inset:0; z-index:35; background:rgba(23,32,51,.24); backdrop-filter:blur(2px); }
body.modal-open { overflow:hidden; }
.transfer-detail-panel h3 { margin:0 44px 16px 0; font-size:18px; letter-spacing:-.3px; color:var(--ink); }
.modal-close { position:absolute; top:14px; right:14px; width:36px; height:36px; padding:0; color:var(--muted); background:#f8fafc; border:1px solid var(--line); border-radius:50%; font-size:22px; line-height:1; }
.modal-close:hover:not(:disabled) { color:var(--ink); background:#eef2f7; }
@media (max-width:1050px) { .filter-main-row { grid-template-columns:1fr 1fr 1fr; } .filter-date-row { grid-template-columns:1fr 1fr 1fr 1fr; } .transfer-table-row { grid-template-columns:minmax(180px,1.3fr) 76px 132px 132px 100px 62px; } }
@media (max-width:760px) { .filter-main-row, .filter-date-row, .transfer-table-row { grid-template-columns:1fr; } .transfer-table-head { display:none; } .transfer-table-row { gap:7px; white-space:normal; } .transfer-table-row > div { white-space:normal; } .transfer-table-item .transfer-detail-panel { inset:12px auto auto 50%; width:min(100% - 24px, 760px); max-height:calc(100vh - 24px); padding:18px; } }
.upload-progress-item { align-items:center; }
.upload-progress-item > div { width:100%; }
.upload-progress-item progress { width:100%; height:8px; margin-top:8px; overflow:hidden; border:0; border-radius:999px; background:#e8eeff; }
.upload-progress-item progress::-webkit-progress-bar { background:#e8eeff; border-radius:999px; }
.upload-progress-item progress::-webkit-progress-value { background:var(--button-bg); border-radius:999px; }
.upload-progress-item progress::-moz-progress-bar { background:var(--button-bg); border-radius:999px; }
.eyebrow[hidden] { display:none; }

.system-heading { margin-top:6px; }
.system-log { margin-top:16px; color:var(--muted); }
.system-log-table { display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; font-size:12px; }
.system-log-row { display:grid; grid-template-columns:140px 82px 150px minmax(120px,1fr) minmax(120px,1fr) 110px minmax(140px,1.2fr); gap:10px; align-items:center; padding:9px 11px; border-bottom:1px solid var(--line); }
.system-log-row:last-child { border-bottom:0; }
.system-log-head { color:var(--muted); background:#fbfcff; font-size:11px; font-weight:750; }
.system-log-row > div { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:980px) { .system-log-row { grid-template-columns:1fr; gap:5px; } .system-log-head { display:none; } .system-log-row > div { white-space:normal; } }
.system-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .system-log-pagination { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; color:var(--muted); font-size:12px; } .system-log-pagination .secondary-button { width:auto; padding:7px 10px; }
.remove-selected-file { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; color:var(--danger); background:#fef3f2; font-size:20px; line-height:1; } .remove-selected-file:hover:not(:disabled) { background:#fee4e2; } #upload-button[hidden] { display:none; }
.selected-download-files { margin:0; }
.selected-download-files:empty { display:none; }
.file-list li.invalid-file { border-color:#fda29b; background:#fff5f5; }
.download-file-meta { color:var(--muted); font-size:12px; }
.file-warning { color:var(--danger); font-size:12px; font-weight:700; }
.design-list { display:grid; gap:10px; margin:16px 0 20px; } .design-item { display:grid; grid-template-columns:54px minmax(160px,1fr) minmax(120px,.7fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fbfcff; } .design-item span { display:block; color:var(--muted); font-size:12px; } .design-swatch { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--design-text); background:linear-gradient(135deg,var(--design-background),var(--design-secondary) 48%,var(--design-button)); border:1px solid color-mix(in srgb, var(--design-text), transparent 82%); overflow:hidden; } .design-swatch img { max-width:100%; max-height:100%; object-fit:contain; } .design-actions { display:flex; gap:8px; justify-content:flex-end; } .design-editor { margin-top:18px; } @media (max-width:760px) { .design-item { grid-template-columns:1fr; } .design-actions { justify-content:flex-start; } }
.design-modal { position:fixed; inset:32px auto auto 50%; transform:translateX(-50%); z-index:40; width:min(100% - 48px, 620px); max-height:calc(100vh - 64px); overflow:auto; margin:0; padding:22px; border-radius:20px; background:#ffffff; box-shadow:0 28px 80px rgba(23,32,51,.22); }
.design-modal h2 { margin-right:44px; }
.design-modal .stacked-form { margin-top:16px; }
@media (max-width:760px) { .design-modal { inset:12px auto auto 50%; width:min(100% - 24px, 620px); max-height:calc(100vh - 24px); padding:18px; } }
.user-editor { margin:16px 0; }
.user-list { margin-top:16px; color:var(--muted); }
.user-table { display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; font-size:12px; }
.user-table-row { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(160px,1fr) 130px 110px; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); }
.user-table-row:last-child { border-bottom:0; }
.user-table-head { color:var(--muted); background:#fbfcff; font-size:11px; font-weight:750; }
.user-table-row > div { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px) { .user-table-row { grid-template-columns:1fr; gap:5px; } .user-table-head { display:none; } .user-table-row > div { white-space:normal; } }
.user-modal { position:fixed; inset:32px auto auto 50%; transform:translateX(-50%); z-index:40; width:min(100% - 48px, 560px); max-height:calc(100vh - 64px); overflow:auto; margin:0; padding:22px; border-radius:20px; background:#ffffff; box-shadow:0 28px 80px rgba(23,32,51,.22); }
.user-modal h2 { margin-right:44px; }
.user-modal .stacked-form { margin-top:16px; }
@media (max-width:760px) { .user-modal { inset:12px auto auto 50%; width:min(100% - 24px, 560px); max-height:calc(100vh - 24px); padding:18px; } }
.session-box { display:flex; align-items:center; justify-content:flex-end; gap:10px; color:var(--muted); font-size:12px; text-align:right; }
.session-box span { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session-box .secondary-button { padding:8px 11px; }
@media (max-width:760px) { .session-box { justify-content:flex-start; width:100%; text-align:left; } }

.login-card { width:min(100%, 520px); min-height:0; margin:0 auto; padding:38px; }
.login-form { margin-top:22px; }
.login-card .lede { margin-bottom:0; }
@media (max-width:560px) { .login-card { padding:28px 20px; } }

.brand span:last-child { display:grid; gap:1px; line-height:1.1; }
.brand span:last-child small { display:block; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:0; }
.color-field input[type='color'] { width:auto; min-height:0; padding:0; }
.color-control { display:flex; align-items:center; gap:10px; padding:7px 9px; border:1px solid var(--line); border-radius:10px; background:white; }
.color-control input[type='color'] { width:46px; height:34px; min-height:34px; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
.color-control input[type='color']::-webkit-color-swatch-wrapper { padding:0; }
.color-control input[type='color']::-webkit-color-swatch { border:1px solid var(--line); border-radius:8px; }
.color-value { color:var(--muted); font-size:12px; font-weight:700; }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
.brand-mark.has-logo { width:auto; height:auto; min-width:0; min-height:0; overflow:visible; border-radius:0; background:transparent; }
.brand-mark.has-logo img { display:block; width:auto; height:auto; max-width:var(--logo-width, 220px); max-height:var(--logo-height, 120px); object-fit:contain; }

.brand span:last-child { gap:5px; font-size:24px; font-weight:800; letter-spacing:-.55px; }
.brand span:last-child small { padding-top:2px; font-size:12px; font-weight:500; letter-spacing:0; }
.brand { width:100%; justify-content:space-between; gap:24px; }
.brand span:last-child { order:1; text-align:left; }
.brand-mark { order:2; flex:0 0 auto; }
@media (max-width:560px) { .brand { gap:16px; align-items:flex-start; } .brand span:last-child { min-width:0; } }
footer a { color:inherit; font-weight:650; text-decoration:none; }
footer a:hover { color:var(--brand); text-decoration:underline; }