/* A-type web adaptation: shared tokens; existing functionality stays in app.js. */
:root {
  --green: #159b65; --green-dark: #064e3b; --green-hover: #118a59;
  --green-soft: #eaf6f0; --ink: #1f2933; --muted: #66756e;
  --line: #dce5e1; --bg: #f4f7f6; --red: #e5484d; --radius: 6px;
  --input-line: #a8d5c0; --brand-edge: #3fa66d; --sidebar-width: 184px;
  --surface-alt: #f1f5f3; --success: #1fa463; --warning: #99630b;
}
body { font-family: "Microsoft YaHei", "Segoe UI", sans-serif; font-size:14px; line-height:1.5; }
button,.button { min-height:34px; padding:5px 14px; border-radius:4px; border-color:var(--input-line); color:var(--green-hover); font-size:14px; font-weight:400; }
button:hover,.button:hover { background:var(--green-soft); border-color:var(--green); }
button:active,.button:active { background:#d9eee3; }
button:disabled { opacity:.4; cursor:not-allowed; }
.primary,.primary:hover,.primary:active { color:white; font-weight:600; border-color:transparent; }
.primary { background:var(--green); padding-inline:22px; }
.primary:hover { background:var(--green-hover); }
.primary:active { background:var(--green-dark); }
.subtle { background:transparent; border-color:transparent; }
.danger,.file-actions .danger { color:#bf3038; }
input,select { min-height:30px; height:32px; border:1px solid var(--input-line); border-radius:4px; padding:3px 9px; font-size:14px; color:var(--ink); }
input::placeholder { color:#949e99; opacity:1; }
input:focus,select:focus { outline:2px solid var(--green); outline-offset:1px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
input:disabled,select:disabled { cursor:not-allowed; }
label { font-size:14px; color:var(--muted); margin:12px 0; gap:6px; }
h1,h2 { font-weight:600; letter-spacing:0; }
.section-label { font-size:15px; font-weight:600; color:var(--ink); gap:9px; line-height:24px; }
.section-label::before,.page-heading h1::before { content:""; width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:var(--green); }
.app-shell { min-height:100dvh; }
.topbar { position:fixed; inset:0 0 auto; z-index:10; height:54px; padding:0 16px; background:var(--green-dark); border:0; color:white; }
.brand { padding:0; font-size:16px; gap:12px; min-width:0; white-space:nowrap; }
.brand-icon { width:34px; height:34px; border-radius:5px; background:transparent; color:white; border:1px solid #ffffff65; font:600 22px "Microsoft YaHei",sans-serif; }
.account { font-size:13px; gap:10px; }
.account small { font-size:11px; color:#c1ded0; }
.account .avatar { background:#ffffff1a; color:white; border-radius:4px; width:30px; height:30px; }
.account button { color:white; font-size:13px; min-height:32px; }
.account button:hover { background:#ffffff15; border-color:#ffffff50; }
.topbar :focus-visible { outline-color:white; }
.sidebar { top:54px; bottom:33px; width:var(--sidebar-width); padding:16px 10px; background:linear-gradient(180deg,#064e3b 0%,#087a57 52%,#0b9365 100%); overflow-y:auto; }
.sidebar-label { color:#c3e1d3; font-size:12px; letter-spacing:0; padding:0 12px; margin-bottom:10px; }
nav { gap:5px; }
nav a { min-height:38px; padding:8px 12px; gap:10px; border-radius:4px; color:#e2f1e9; font-size:14px; }
nav a:hover { background:#ffffff18; }
nav a.active,nav a.active:hover { background:var(--green); color:white; font-weight:600; }
nav a:focus-visible { outline-color:white; outline-offset:1px; }
.nav-icon { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-bottom { padding:20px 12px 0; font-size:12px; color:#e4f3eb; }
.sidebar-bottom p { color:#d3eadf; font-size:12px; margin:6px 0 0; }
.workspace { margin-left:var(--sidebar-width); padding-top:54px; padding-bottom:33px; width:calc(100% - var(--sidebar-width)); border-inline:1px solid #91e6ba; }
main#main { max-width:none; padding:16px; margin:0; }
.page-heading { margin-bottom:14px; gap:12px; }
.page-heading h1 { display:flex; align-items:center; gap:9px; font-size:16px; margin-bottom:5px; }
.page-heading p { font-size:13px; color:var(--muted); }
.host-tag { border-radius:4px; padding:5px 10px; color:var(--muted); font-size:12px; }
.page-context { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; }
.page-context #current-section { border-right:1px solid var(--line); padding-right:10px; }
.panel { box-shadow:none; border-radius:6px; }
.file-summary { margin-bottom:12px; }
.file-summary>div:first-child { gap:14px; flex-wrap:wrap; }
.file-summary strong,.summary-note { font-size:12px; color:var(--muted); }
.file-toolbar,.file-layout .file-toolbar { padding:12px; gap:10px; }
.toolbar-group { gap:8px; }
.toolbar-group button,.toolbar-group input,.toolbar-group select { font-size:13px; }
.path-bar { padding:7px 12px; background:var(--surface-alt); border-bottom-color:var(--line); }
#breadcrumbs button,.path-bar>button { font-size:13px; }
.file-content { min-height:260px; }
.data-table,.data-table thead { font-size:13px; color:var(--ink); }
.data-table th { height:42px; font-weight:600; background:var(--surface-alt); }
.data-table td { height:40px; }
.data-table th,.data-table td,.file-layout .data-table th,.file-layout .data-table td { padding:5px 8px; text-align:center; vertical-align:middle; border-bottom:1px solid #e1e7e4; border-right:1px solid #e8edea; }
.data-table tr>:last-child { border-right:0; }
.data-table tbody tr:nth-child(even) { background:#f7faf8; }
.data-table tbody tr:hover { background:var(--green-soft); }
.data-table .file-name { gap:9px; }
.file-name button { font-size:13px; font-weight:400; color:var(--ink); }
.file-icon { width:28px; height:28px; border-radius:4px; color:var(--muted); background:var(--surface-alt); }
.file-icon.folder,.file-icon.image,.file-icon.video,.file-icon.audio { color:var(--green-hover); background:var(--green-soft); }
.file-actions,.file-layout .file-actions { justify-content:center; gap:4px; }
.file-actions button,.file-actions a { font-size:12px; color:var(--green-hover); padding:3px 6px; min-height:28px; }
.size-cell,.date-cell { color:var(--muted); }
.grid { padding:12px; gap:12px; }
.tile { border-radius:6px; border-color:var(--line); }
.tile-open { background:var(--surface-alt); }
.tile-info { font-size:13px; }
.tile-info small { color:var(--muted); font-size:12px; }
.pagination { padding:10px 12px; font-size:12px; color:var(--muted); gap:8px; }
.pagination button { font-size:12px; }
.footnote,.tree-hint { color:var(--muted); font-size:12px; line-height:1.6; }
.empty { min-height:240px; color:var(--muted); }
.empty strong { color:var(--ink); }
.section-toolbar { margin-bottom:12px; }
.section-toolbar p { font-size:13px; }
.alert { background:var(--green-soft); border-color:var(--input-line); color:#32634c; padding:10px 12px; font-size:13px; line-height:1.6; border-radius:4px; margin-bottom:12px; }
.alert.danger { color:#b02d35; background:#fff3f3; border-color:#efc0c4; }
.badge { font-size:12px; color:#187342; background:#eaf6ef; }
.badge.off { color:#b02d35; background:#fff0f1; }
.metrics { gap:12px; margin-bottom:12px; }
.metric,.service-card,.guide { padding:16px; }
.metric .label { font-size:13px; color:var(--muted); }
.metric .value { font-size:25px; margin:8px 0; letter-spacing:0; }
.metric .detail { font-size:12px; color:var(--muted); }
.overview-grid,.connect-grid { gap:14px; }
.service-line { padding:10px 0; font-size:14px; }
.service-line small { color:var(--muted); font-size:12px; }
.guide h2 { font-size:16px; margin:14px 0; overflow-wrap:anywhere; }
.guide dl { font-size:14px; gap:10px; margin-bottom:16px; }
.guide dt,.guide ol { color:var(--muted); }
.guide ol { font-size:13px; line-height:1.7; }
.guide li { margin-bottom:9px; }
.workspace>footer { position:fixed; inset:auto 0 0; z-index:12; min-height:33px; padding:5px 16px; border-bottom:5px solid var(--brand-edge); background:white; color:var(--muted); font-size:12px; gap:12px; }
.file-layout { grid-template-columns:210px minmax(0,1fr); gap:12px; }
.directory-tree-panel { top:70px; min-height:330px; }
.tree-heading { min-height:48px; padding:8px 12px; }
.directory-tree { max-height:60vh; }
.tree-row { border-radius:4px; }
.tree-row button { font-size:13px; color:var(--ink); }
.tree-row:hover { background:var(--green-soft); }
.tree-row.selected,.tree-row.selected:hover { background:var(--green); }
.tree-row.selected button,.tree-row.selected .tree-root-icon { color:white; }
.tree-row.selected button:hover { background:#ffffff18; }
.tree-empty,.tree-more { font-size:12px!important; color:var(--muted); }
.settings-account { padding:12px 16px; margin-bottom:12px; gap:12px; }
.settings-account p { font-size:12px; }
.settings-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:14px; }
.settings-card { padding:16px; margin-bottom:12px; }
.settings-card label { font-size:14px; margin:12px 0; }
.settings-card input,.settings-card select { font-size:14px; }
.settings-card input[readonly] { color:var(--muted); background:var(--surface-alt); }
.settings-card input:disabled,.settings-card select:disabled { color:var(--muted); background:var(--surface-alt); opacity:.65; }
.settings-pair { gap:12px; }
.settings-card .check-label { margin:12px 0; }
.type-checks .check-label { margin:0 0 8px; }
.field-help,.settings-card .alert { font-size:12px; line-height:1.65; color:var(--muted); }
.settings-card .alert { color:#32634c; }
.subsection-title { color:var(--ink); font-size:14px; padding-top:12px; margin-top:14px; margin-bottom:10px; }
.settings-preview { top:70px; }
.settings-mapping { font-size:14px; grid-template-columns:112px minmax(0,1fr); gap:0; margin:14px 0; }
.settings-mapping dt,.settings-mapping dd { padding:8px 0; border-bottom:1px solid var(--line); }
.settings-mapping dt { color:var(--muted); padding-right:10px; }
.directory-preview { font-size:13px; background:var(--surface-alt); color:var(--green-dark); border-color:var(--line); border-radius:4px; padding:12px; }
.handoff-actions button,#settings-open-directory,#settings-use-example { font-size:13px; }
.settings-save { padding:0 0 12px; gap:10px; }
.settings-save>span { font-size:12px; color:var(--muted); }
.upload-status { padding:10px 12px; font-size:13px; }
.upload-status progress { min-width:80px; }
.toast { bottom:48px; border-radius:6px; background:#116a53; }
.toast.error { background:#b02d35; }
dialog { padding:0 16px 16px; border:1px solid var(--input-line); border-bottom:5px solid var(--brand-edge); border-radius:6px; max-height:calc(100dvh - 32px); overflow:auto; }
dialog::backdrop { background:#102b2266; backdrop-filter:none; }
.modal-heading { background:#116a53; color:white; min-height:54px; margin:0 -16px 16px; padding:0 0 0 16px; gap:10px; }
.modal-heading h2 { font-size:15px; font-weight:600; padding-block:10px; min-width:0; }
.modal-heading button { color:white; width:52px; min-height:54px; flex:0 0 52px; border:0; border-radius:0; }
.modal-heading button:hover { background:transparent; opacity:.78; }
.modal-heading button:focus-visible { outline-color:white; outline-offset:-5px; }
.modal-actions { gap:8px; padding-top:12px; margin-top:16px; }
.modal-actions button { min-width:76px; }
#modal-body p { color:var(--muted); font-size:14px; }
#preview-body img,#preview-body video { border-radius:4px; }
.login-page { padding:20px; background:var(--bg); }
.login-shell { display:block; width:min(500px,100%); min-height:0; border-radius:6px; border:1px solid var(--line); border-bottom:5px solid var(--brand-edge); box-shadow:0 10px 32px #064e3b10; }
.login-titlebar { display:flex; align-items:center; gap:12px; background:var(--green-dark); color:white; min-height:54px; padding:10px 16px; }
.login-titlebar h1 { font-size:16px; margin:0; }
.login-card { padding:20px 24px; }
.login-card>.muted { font-size:13px; margin:10px 0 18px; }
.login-card form label { margin:14px 0; }
.login-card input { height:34px; }
.full { height:36px; margin-top:6px; justify-content:center; }
.login-note { margin-top:18px; padding-top:14px; font-size:12px; line-height:1.7; color:var(--muted); border-color:var(--line); }
.login-endpoint { font-size:12px; display:flex; justify-content:space-between; gap:10px; padding:10px 24px; border-top:1px solid var(--line); color:var(--muted); background:var(--surface-alt); }
.error-card { min-width:0; width:min(500px,100%); border-radius:6px; padding:24px; border-top:6px solid var(--green-dark); border-bottom:5px solid var(--brand-edge); }
.error-card h1 { font-size:32px; margin:16px 0; }
.skip-link { position:fixed; top:-60px; left:16px; z-index:100; padding:10px 14px; background:white; }
.skip-link:focus { top:8px; }
@media(max-width:1250px) {
  :root { --sidebar-width:164px; }
  .file-layout { grid-template-columns:185px minmax(0,1fr); }
  .settings-mapping { grid-template-columns:100px minmax(0,1fr); }
  .settings-preview { position:static; }
}
@media(max-width:1050px) {
  .settings-grid { grid-template-columns:1fr; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-grid,.connect-grid { grid-template-columns:1fr; }
  .page-context #current-section { display:none; }
}
@media(max-width:800px) {
  :root { --sidebar-width:140px; }
  .sidebar { padding:12px 8px; }
  nav a { font-size:13px; padding:8px; gap:8px; }
  .brand { font-size:14px; gap:8px; }
  .brand-icon { width:28px; height:28px; font-size:18px; }
  .topbar { padding:0 12px; }
  .account { gap:5px; margin-left:0; }
  .account button { font-size:12px; padding:4px 6px; }
  .account>span:nth-child(2) { margin-right:0; }
  main#main { padding:12px; }
  .page-heading h1 { font-size:16px; }
  .page-heading p { font-size:12px; }
  .file-layout { grid-template-columns:1fr; }
  .directory-tree-panel { position:static; min-height:0; }
  .directory-tree { max-height:180px; }
  .tree-hint { display:none; }
  .settings-card { padding:14px; }
  .settings-pair { grid-template-columns:1fr 1fr; }
  .settings-account select { width:auto; }
  .data-table .date-col { display:table-cell; }
  .file-layout .date-col { display:none; }
  .data-table { min-width:540px; }
  .file-layout .data-table { min-width:420px; }
  .account .avatar { display:none; }
}
@media(max-width:560px) {
  :root { --sidebar-width:0px; }
  .topbar { position:static; height:auto; min-height:54px; flex-wrap:wrap; gap:8px; padding:10px 12px; }
  .app-shell { display:flex; flex-direction:column; }
  .sidebar { position:static; width:100%; padding:8px; flex:0 0 auto; background:var(--green-dark); }
  .sidebar-label,.sidebar-bottom { display:none; }
  nav { flex-direction:row; overflow-x:auto; gap:5px; }
  nav a { flex:0 0 auto; white-space:nowrap; font-size:13px; min-height:36px; }
  .nav-icon { display:none; }
  .workspace { width:100%; padding-top:0; }
  .workspace>footer { font-size:11px; padding-inline:12px; }
  .workspace>footer span:last-child { display:none; }
  .workspace>footer span:first-child { display:block; }
  .settings-pair { grid-template-columns:1fr; gap:0; }
  .settings-account { align-items:stretch; }
  .settings-account select { width:100%; }
  .settings-mapping { font-size:13px; }
  .settings-save { align-items:stretch; flex-direction:column; }
  .page-context { display:none; }
  .file-summary>div:first-child { gap:6px 12px; }
  .metric { padding:12px; }
  .metric .value { font-size:22px; }
  .pagination { flex-wrap:wrap; }
  .login-card { padding:18px; }
  .login-endpoint { padding:10px 18px; flex-wrap:wrap; }
  .login-page { padding:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }