:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    body { margin: 0; color: #263241; background: #f6f8fb; }
    header { height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 22px; color: #fff; background: #28323d; }
    .brand { color: #fff; text-decoration: none; font-size: 20px; font-weight: 650; letter-spacing: .2px; white-space: nowrap; }
    .account-link { color: #fff; font-size: 14px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; }
    .gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 16px; margin: 20px 0; }
    .image-card { min-width: 0; padding: 12px; border: 1px solid #dce3ec; border-radius: 5px; }
    .image-card img { display: block; width: 100%; height: 160px; object-fit: contain; margin: 10px 0; }
    .image-card .link-field { margin-bottom: 0; }
    .account-form { max-width: 440px; }
    .account-form input { height: 40px; padding: 0 10px; margin-bottom: 14px; }
    details { border-top: 1px solid #dce3ec; padding-top: 16px; margin-top: 22px; }
    summary { cursor: pointer; margin-bottom: 16px; }
    .lookup { display: flex; min-width: 0; max-width: 520px; flex: 1; }
    .lookup span { display: flex; align-items: center; padding: 0 12px; color: #627083; background: #eef1f5; border-radius: 4px 0 0 4px; font-size: 14px; white-space: nowrap; }
    .lookup input { min-width: 0; flex: 1; height: 38px; border: 0; border-left: 1px solid #d9dee6; padding: 0 12px; font-size: 15px; outline: 0; }
    button { border: 0; border-radius: 4px; background: #087ff5; color: #fff; cursor: pointer; font-size: 15px; padding: 9px 16px; }
    button:hover { background: #066dcc; }
    button:disabled { opacity: .6; cursor: wait; }
    .tabs { display: flex; gap: 8px; margin-bottom: 22px; }
    .tabs button { color: #526275; background: #eef1f5; }
    .tabs button[aria-pressed="true"] { color: #fff; background: #087ff5; }
    .file-picker { padding: 24px; border: 1px dashed #9aacc2; border-radius: 5px; background: #f7f9fc; }
    input[type="file"] { display: block; width: 100%; margin: 12px 0; font: inherit; }
    progress { width: 100%; height: 16px; margin: 12px 0 5px; }
    .file-name { overflow-wrap: anywhere; }
    .download-button { display: inline-block; margin-top: 10px; }
    .image-preview { display: block; max-width: 100%; max-height: 65vh; margin: 18px auto; border-radius: 5px; object-fit: contain; }
    .link-field { display: flex; gap: 8px; margin-bottom: 14px; }
    .link-field input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; }
    .link-field button { flex-shrink: 0; margin-left: 0; }
    .danger { background: #bd3d35; }
    .danger:hover { background: #9e2f28; }
    main { width: min(1100px, calc(100% - 32px)); margin: 28px auto 48px; }
    .panel { padding: 24px; border: 1px solid #dce3ec; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(31,48,70,.04); }
    .row { display: flex; gap: 12px; margin-bottom: 16px; }
    .field { flex: 1; min-width: 0; }
    label { display: block; margin-bottom: 7px; color: #526275; font-size: 14px; }
    select, input[type="text"], input[type="password"], input[type="number"], textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #263241; font: inherit; outline: 0; }
    select, input[type="password"], input[type="number"] { height: 40px; padding: 0 10px; }
    select:focus, input:focus, textarea:focus { border-color: #1786f5; box-shadow: 0 0 0 2px rgba(23,134,245,.12); }
    textarea { min-height: 320px; resize: vertical; padding: 13px; line-height: 1.55; }
    .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
    .toggle { display: inline-flex; align-items: center; gap: 7px; color: #4e5c6d; font-size: 14px; cursor: pointer; }
    .toggle input { width: 17px; height: 17px; accent-color: #087ff5; }
    .expire { display: inline-flex; align-items: center; gap: 8px; color: #526275; font-size: 14px; }
    .expire input { width: 90px; }
    .muted { color: #7a8796; font-size: 13px; }
    .notice { margin-top: 14px; color: #bd3d35; font-size: 14px; white-space: pre-wrap; }
    .success { margin-top: 18px; padding: 16px; border: 1px solid #b9e0c4; border-radius: 5px; color: #226b36; background: #f0fbf3; }
    .success a { color: #1769aa; word-break: break-all; }
    .success button { margin-left: 8px; padding: 5px 10px; font-size: 13px; }
    .viewer { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; min-height: 260px; padding: 18px; border-radius: 4px; background: #f7f9fc; color: #202b38; font: 14px/1.6 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
    .viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; color: #607083; font-size: 14px; }
    .viewer-head button { padding: 6px 11px; font-size: 13px; }
    .back { display: inline-block; margin-bottom: 14px; color: #1769aa; text-decoration: none; font-size: 14px; }
    @media (max-width: 640px) {
      header { height: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px 12px; }
      .brand { font-size: 17px; }
      .account-link { max-width: 150px; }
      .lookup { grid-column: 1 / -1; order: 3; max-width: none; }
      .lookup button { flex-shrink: 0; white-space: nowrap; }
      .lookup span { display: none; }
      .lookup input { border-radius: 4px 0 0 4px; }
      main { width: min(100% - 20px, 1100px); margin-top: 16px; }
      .panel { padding: 16px; }
      .viewer-head { flex-wrap: wrap; }
      .viewer-head > div { overflow-wrap: anywhere; }
      .row { flex-direction: column; gap: 12px; }
      textarea { min-height: 260px; }
      .expire { width: 100%; }
    }