:root{--accent:#176b75;--ink:#153c48;--line:#cad9dc;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);background:#f1f5f6}*{box-sizing:border-box}body{margin:0}header{min-height:80px;background:#fff;padding:20px max(24px,calc((100% - 1160px)/2));display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.identity{display:flex;align-items:center;gap:12px}.identity img{width:40px;height:40px;object-fit:contain}.identity b{font-size:19px}button,input,select,a{font:inherit}button,.primary{min-height:44px;padding:10px 18px;border-radius:5px;border:1px solid #9cb6bd;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}button:disabled{opacity:.45;cursor:default}.primary,button.selected{background:var(--accent);border-color:var(--accent);color:white}.subtle{border:0;background:transparent;padding:8px 12px;font-size:14px}#account{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px}main{max-width:1160px;margin:auto;padding:36px 24px}#login{min-height:calc(100vh - 150px);display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:76px;background-position:center;background-size:cover}h1{font-size:32px;line-height:1.35;margin:0 0 12px}h2{font-size:20px;margin-top:0}p{line-height:1.75}.company{color:var(--accent);font-size:16px}.intro h1{font-size:48px;max-width:600px;overflow-wrap:anywhere}.intro{padding:24px;background:rgba(241,245,246,.92)}.areas{display:flex;gap:24px;margin-top:40px;font-size:14px}.areas span{border-top:3px solid var(--accent);padding-top:14px}.login-panel{background:white;padding:30px;border-top:5px solid var(--accent);box-shadow:0 15px 45px #153c4810}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}.tabs button{flex:1;padding:10px 6px;font-size:14px}.login-panel .primary{width:100%;margin-top:14px}label{display:block;font-size:14px;line-height:1.5;margin:16px 0}input:not([type=checkbox]):not([type=color]){display:block;width:100%;border:1px solid #a3bcc3;border-radius:4px;background:white;padding:12px;margin-top:7px;min-height:46px;color:var(--ink)}input[type=color]{display:block;width:85px;height:40px;margin-top:8px}input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.inline{display:flex;align-items:center;gap:8px}.notice{border-left:3px solid var(--accent);padding:12px;background:#edf5f5}.hint{color:#567580;font-size:13px}nav{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:10px 0 22px}.section-head p{font-size:14px;color:#567580;margin-bottom:0}#upload-form{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px dashed #8faeb7;padding:18px;margin:20px 0 30px}.choose{max-width:360px;margin:0}.file-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}.file-info{min-width:0}.file-info strong{font-size:16px;overflow-wrap:anywhere;display:block}.file-info small{display:block;font-size:12px;color:#567580;margin-top:8px}.file-actions{display:flex;gap:8px;flex-shrink:0}.pagination{display:flex;justify-content:space-between;align-items:center;margin:24px 0;font-size:14px}#preview{border-top:3px solid var(--accent);padding-top:22px;margin-top:24px}#preview-image{display:block;max-width:100%;max-height:420px;object-fit:contain;margin-bottom:16px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:26px;background:#fff;margin:24px 0}.admin-grid section+section{border-left:1px solid var(--line);padding-left:40px}.user-row{padding:20px 0;border-bottom:1px solid var(--line)}.user-row summary{cursor:pointer;font-weight:bold;padding:8px 0}.user-options{max-width:560px;padding:12px 0}.user-options label{margin:12px 0}#password-panel{max-width:560px;border-top:3px solid var(--accent);padding-top:24px;margin:30px 0}dialog{max-width:580px;width:calc(100% - 32px);max-height:85vh;overflow:auto;border:0;padding:26px;box-shadow:0 20px 80px #153c4840}dialog::backdrop{background:#102e3980}#status{max-width:1160px;margin:0 auto;padding:0 24px 20px;white-space:pre-wrap;overflow-wrap:anywhere}footer{font-size:12px;color:#567580;max-width:1160px;margin:auto;padding:12px 24px 24px}[hidden]{display:none!important}:focus-visible{outline:3px solid #e8a34a;outline-offset:3px}@media(max-width:760px){header{padding:16px;align-items:flex-start}.identity b{font-size:16px}#account{justify-content:flex-end}main{padding:24px 16px}#login{grid-template-columns:1fr;gap:20px;min-height:0}.intro{padding:10px 0}.intro h1{font-size:34px}.areas{margin-top:24px}.login-panel{padding:22px}.admin-grid{grid-template-columns:1fr;gap:28px;padding:20px}.admin-grid section+section{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}.section-head{align-items:flex-start}h1{font-size:26px}.file-row{align-items:flex-start;flex-direction:column;gap:12px}.file-actions{width:100%;justify-content:flex-end}#upload-form .primary{width:100%}#status{padding:0 16px 20px}dialog{padding:20px}}
.external-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}.external-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding:8px 0}.external-links span{color:#728790;font-size:14px;padding:8px 0}
/* Shared desktop/mobile layout: allow long names and native file controls to shrink. */
.identity,.login-panel,.intro,.admin-grid section,.section-head>div,.choose{min-width:0}
.identity b,#account-name,.user-row summary{overflow-wrap:anywhere}
#login{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.admin-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
input:not([type=checkbox]):not([type=color]){font-size:16px;max-width:100%}
input[type=file]{min-width:0}
.file-actions{flex-wrap:wrap}
#camera-label{display:none}
@media(max-width:760px){
  header{flex-direction:column;gap:10px}
  #account{width:100%;justify-content:flex-start}
  #login,.admin-grid{grid-template-columns:minmax(0,1fr)}
  #camera-label{display:block}
  .choose{width:100%;max-width:none}
  .section-head{flex-wrap:wrap;gap:12px}
  .file-actions button{flex:1}
  .external-links a,.external-links span{min-height:44px;display:inline-flex;align-items:center}
  dialog{max-height:85dvh}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Login: one shared panel, with a centered introduction and a clear identity form. */
body{background:#eef3f4}
header{min-height:76px;padding-top:18px;padding-bottom:18px}
.identity{gap:12px}
.identity b{font-weight:650;letter-spacing:.025em}
#login{max-width:1080px;min-height:540px;margin:52px auto 28px;padding:0;gap:0;align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background-color:#fff;border:1px solid #d8e4e6;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px #153c480a}
#login .intro{padding:56px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(231,241,242,.94);text-align:center}
#login .company{margin:0 0 26px;font-size:14px;font-weight:600;color:#326b75}
#brand-title{white-space:pre-line;text-align:center}
#login #brand-title{width:100%;margin:0;font-size:clamp(32px,3.8vw,48px);line-height:1.42;font-weight:750;letter-spacing:.025em;color:#153c48}
#brand-subtitle{margin:22px 0 0;font-size:15px;color:#42656e}
#login .areas{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:320px;width:100%;margin:38px auto 0;padding-top:22px;border-top:1px solid #c2d7db;color:#42656e}
#login .areas span{border-top:0;padding:0 10px;font-size:13px;line-height:1.7}
#login .areas span+span{border-left:1px solid #c2d7db}
#login .login-panel{padding:42px 40px;background:rgba(255,255,255,.97);border:0;box-shadow:none}
#login .tabs{padding:5px;margin:0 0 30px;gap:4px;border:0;border-radius:9px;background:#eef3f4}
#login .tabs button{border:0;border-radius:6px;background:transparent;color:#526c74;min-height:44px}
#login .tabs button.selected{background:var(--accent);color:#fff;box-shadow:0 2px 5px #153c4812}
#login h2{font-size:23px;line-height:1.5;margin:0 0 8px;font-weight:650}
#login .hint{font-size:13px;line-height:1.8;margin:0 0 22px}
#login label{margin:20px 0;font-weight:500;color:#36545e}
#login input{border-color:#c6d6db;border-radius:7px;padding:13px 14px;min-height:48px}
#login input:focus{border-color:var(--accent)}
#login .primary{min-height:48px;border-radius:7px;font-weight:600;margin-top:8px}
#login .notice{font-size:14px;line-height:1.8;border-radius:0 6px 6px 0}
#login .external-links{margin-top:24px;padding-top:16px;gap:8px 18px;font-size:13px}
#status:empty{padding:0}
footer{text-align:center;color:#6a838b;padding:16px 24px 24px}
@media(max-width:1128px){#login{width:calc(100% - 48px)}}
@media(max-width:760px){
  header{min-height:68px;padding:16px 20px}
  #login{width:calc(100% - 32px);margin:20px auto 12px;min-height:0;grid-template-columns:minmax(0,1fr);border-radius:14px}
  #login .intro{padding:30px 20px 26px}
  #login .company{margin-bottom:16px;font-size:13px}
  #login #brand-title{font-size:clamp(28px,7.6vw,38px);line-height:1.38}
  #brand-subtitle{margin-top:14px;font-size:14px}
  #login .areas{margin-top:22px;padding-top:16px;max-width:300px}
  #login .login-panel{padding:26px 24px 30px}
  #login .tabs{margin-bottom:24px}
  #login h2{font-size:21px}
  footer{padding:12px 16px 20px}
}


#login .external-links #contact-open{padding:8px 0;min-height:44px;border:0;border-bottom:1px solid var(--accent);border-radius:0;background:transparent;color:var(--accent);font-size:inherit}
#contact-dialog{border-radius:12px;color:var(--ink);width:calc(100% - 32px)}
#contact-dialog .section-head h2{margin:0}
#contact-dialog textarea{display:block;width:100%;max-width:100%;margin-top:7px;padding:12px;border:1px solid #a3bcc3;border-radius:7px;font:inherit;font-size:16px;resize:vertical}
#contact-dialog .primary{width:100%}
#contact-status,.contact-request p{white-space:pre-wrap;overflow-wrap:anywhere}
.contact-request{padding:16px 0;border-bottom:1px solid var(--line)}

/* Three equally weighted customer entry points. */
#login .external-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:24px;padding-top:18px}
#login .external-links a,#login .external-links span,#login .external-links #contact-open{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;margin:0;padding:10px 4px;border:0;border-radius:6px;background:#f0f6f6;color:var(--accent);font-size:14px;font-weight:500;line-height:1.5;text-align:center;white-space:nowrap;text-decoration:none}
#login .external-links span[aria-disabled=true]{color:#829398;background:#f4f6f6;cursor:default}
#login .external-links a:hover,#login .external-links #contact-open:hover{background:#e3eeee}

.password-control{display:flex;align-items:stretch;gap:8px;margin-top:7px;min-width:0}
.password-control input:not([type=checkbox]):not([type=color]),#login .password-control input{min-width:0;flex:1;width:0;margin-top:0}
.password-toggle,#login .password-toggle{flex:0 0 58px;padding:8px;min-height:46px;font-size:13px;border-radius:6px;background:#edf4f4;color:var(--accent)}

.folder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0}
#folder-breadcrumbs{margin:0;gap:6px;min-width:0}
#folder-breadcrumbs button{white-space:normal;overflow-wrap:anywhere;border:0;background:transparent;padding:8px;color:var(--accent)}
#folder-breadcrumbs button+button:before{content:'/';color:#829398;margin-right:10px}
.folder-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.folder-open{border:0;padding:6px 0;font-weight:600;text-align:left;overflow-wrap:anywhere;white-space:normal;justify-content:flex-start}
.folder-open:before{content:'';width:22px;height:17px;flex-shrink:0;background:#d9a647;border-radius:3px;margin-right:10px;border-top:4px solid #efc76e}
.danger{color:#a63832;border-color:#dcaaa5}
#folder-dialog,#folder-delete-dialog{border-radius:12px;color:var(--ink)}
#folder-permissions{border:1px solid var(--line);padding:12px 16px;margin:20px 0;border-radius:6px}
#folder-status,#folder-delete-status,#folder-delete-name{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:760px){.folder-row{align-items:flex-start;flex-direction:column}.folder-toolbar{align-items:flex-start;flex-wrap:wrap}.folder-row .file-actions{justify-content:flex-end}}

#upload-form.drag-over{border-color:var(--accent);background:#e7f1f2}