*{box-sizing:border-box}
body{margin:0;background:#f5f7fa;color:#222;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,Arial,sans-serif}
.wrap{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.box{width:min(780px,100%);background:#fff;border-radius:16px;padding:36px;box-shadow:0 12px 40px rgba(0,0,0,.08)}
h1{font-size:28px;margin:0 0 12px}
h2{font-size:19px;margin:0 0 18px}
.lead{line-height:1.8;color:#555;margin:0}
.project-name{margin:16px 0 0;padding:10px 13px;background:#f6f8fa;border-radius:8px;font-size:14px}
.picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0 14px}
.pick-card{display:block;border:2px dashed #b9c1cc;border-radius:12px;padding:28px 18px;text-align:center;cursor:pointer;transition:.2s;background:#fff}
.pick-card:hover{border-color:#1d4e7a;background:#f8fbff}
.pick-card strong{display:block;font-size:18px;margin-bottom:7px}
.pick-card span{display:block;font-size:13px;color:#777}
.pick-card input{position:absolute;left:-9999px}
.note,.notice{font-size:13px;color:#666;line-height:1.7}
.folder-recommend{margin:0 0 16px;padding:11px 13px;border-radius:8px;background:#f3f7fb;color:#4d5f70;font-size:13px;line-height:1.7}
.notice{margin-top:24px;border-top:1px solid #eee;padding-top:16px}
button{border:0;border-radius:9px;padding:13px 18px;font-size:15px;font-weight:700;background:#163d67;color:#fff;cursor:pointer}
#submitBtn,.login-form button,.create-form>button{width:100%;margin-top:18px}
button:hover{opacity:.92}
button:disabled{opacity:.45;cursor:not-allowed}
.alert{padding:14px 16px;border-radius:8px;margin:20px 0}
.success{background:#eef8f1;color:#1d6534}
.error{background:#fff0f0;color:#8c2222}
.selected-area{border:1px solid #d9dee5;border-radius:10px;margin:15px 0 12px;overflow:hidden}
.selected-head{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:#f7f9fb;font-size:14px}
.selected-head span{color:#666}
.selected-list{list-style:none;padding:0;margin:0;max-height:390px;overflow:auto}
.selected-list li{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:10px;align-items:center;padding:11px 14px;border-top:1px solid #edf0f3}
.file-main{min-width:0}
.file-path{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.file-size{display:block;font-size:12px;color:#777;margin-top:3px}
.file-remove{width:28px;height:28px;padding:0;margin:0;border-radius:50%;background:#edf0f3;color:#555;font-size:19px;line-height:28px}
.turnstile-box{margin:20px 0;min-height:65px}
.progress-area{display:grid;grid-template-columns:1fr 48px;gap:10px;align-items:center;margin:18px 0 0}
.progress-track{height:10px;background:#e7ebf0;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:0;background:#163d67;transition:width .15s}
.progress-text{text-align:right;font-size:13px;color:#555}

.admin-wrap{place-items:start center}
.admin-box{width:min(1180px,100%)}
.admin-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.logout{font-size:13px;color:#555;text-decoration:none;padding:8px 12px;border:1px solid #ddd;border-radius:7px;white-space:nowrap}
.login-form{margin-top:28px}
.login-form label,.create-form label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.login-form input,.create-form input,.project-url-row input{width:100%;padding:12px 13px;border:1px solid #cfd5dd;border-radius:8px;font-size:15px;background:#fff}
.admin-section{margin-top:34px;padding-top:30px;border-top:1px solid #e7eaee}
.create-form{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.create-form>button{grid-column:1/-1}
.project-list{display:grid;gap:12px}
.project-card{display:flex;justify-content:space-between;gap:18px;border:1px solid #e1e5ea;border-radius:10px;padding:15px}
.project-card-main{min-width:0;flex:1}
.project-url-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.copy-btn,.sub-button{padding:9px 12px;font-size:13px;white-space:nowrap}
.sub-button{background:#656d78}
.project-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:12px;color:#68707b}
.status-on{color:#18743c;font-weight:700}
.status-off{color:#a13b3b;font-weight:700}
.project-actions{display:flex;align-items:center;gap:7px}
.toggle-form,.delete-project-form{display:flex;align-items:center;margin:0}
.admin-summary{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}
.admin-summary h2{margin:0}
.admin-summary span{font-size:13px;color:#666}
.empty{padding:28px;text-align:center;color:#777;border:1px solid #e4e7eb;border-radius:10px}
.file-table-wrap{overflow:auto;border:1px solid #e1e5ea;border-radius:10px}
.file-table{width:100%;border-collapse:collapse;min-width:950px}
.file-table th,.file-table td{padding:13px 14px;border-bottom:1px solid #edf0f3;text-align:left;font-size:13px;vertical-align:middle}
.file-table th{background:#f7f9fb;font-size:12px;color:#555;white-space:nowrap}
.file-table tr:last-child td{border-bottom:0}
.admin-file-name{max-width:420px;word-break:break-all}
.download-btn{display:inline-block;text-decoration:none;background:#163d67;color:#fff;padding:8px 12px;border-radius:7px;white-space:nowrap;font-weight:700}
.file-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}
.delete-file-form{margin:0}
.delete-btn{background:#a23a3a;padding:8px 12px;border-radius:7px;font-size:13px}

@media(max-width:650px){
  .box{padding:24px 18px}
  h1{font-size:23px}
  .picker-grid,.create-form{grid-template-columns:1fr}
  .create-form>button{grid-column:auto}
  .admin-title,.project-card,.admin-summary{display:block}
  .logout{display:inline-block;margin-top:16px}
  .project-actions{margin-top:12px}
  .toggle-form,.delete-project-form{margin-top:0}
  .admin-summary span{display:block;margin-top:7px}
}


/* Upload UI additions */
.drop-zone{margin:0 0 12px;padding:22px 18px;border:2px dashed #9fb0c2;border-radius:12px;background:#f8fbff;text-align:center;transition:.2s;outline:none}
.drop-zone strong{display:block;font-size:16px;color:#234b70}
.drop-zone span{display:block;margin-top:6px;font-size:12px;color:#718096}
.drop-zone.is-dragover{border-color:#163d67;background:#edf5fd;transform:translateY(-1px)}
.upload-help-row{display:flex;justify-content:flex-end;margin:0 0 10px}
.text-link-button{padding:0;border:0;border-radius:0;background:transparent;color:#1d5f97;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.text-link-button:hover{opacity:.8}
.extension-dialog{width:min(620px,calc(100% - 28px));padding:0;border:0;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.2)}
.extension-dialog::backdrop{background:rgba(25,35,45,.5)}
.extension-dialog-inner{padding:24px}
.extension-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.extension-dialog-head h2{margin:0;font-size:21px}
.dialog-close{width:32px;height:32px;padding:0;border-radius:50%;background:#edf0f3;color:#555;font-size:20px;line-height:32px}
.extension-example{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.ext-ok,.ext-ng{display:inline-block;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:700}
.ext-ok{background:#edf8f0;color:#1e6a39}
.ext-ng{background:#fff0f0;color:#9b2c2c}
.extension-dialog-note{margin:0 0 18px;color:#5f6873;font-size:13px;line-height:1.7}
.extension-groups{display:grid;gap:12px}
.extension-group{padding:12px 14px;border:1px solid #e3e7ec;border-radius:9px;background:#fafbfc}
.extension-group strong{display:block;margin-bottom:5px;font-size:13px;color:#333}
.extension-group p{margin:0;font-size:13px;line-height:1.7;color:#59616b;word-break:break-word}
.dialog-ok{width:100%;margin-top:18px}
@media(max-width:650px){.drop-zone{padding:18px 14px}.upload-help-row{justify-content:flex-start}.extension-dialog-inner{padding:20px 17px}}