* { box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f1115; color: #e6e6e6; margin: 0; padding: 40px 20px; }
  .container { max-width: 1140px; margin: 0 auto; }

  .login-screen { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; }
  .login-card {
    width: 100%; max-width: 380px; text-align: center;
    background: radial-gradient(circle at 50% 0%, #1e2230 0%, #171a22 60%);
    border: 1px solid #2a2e38; border-radius: 16px; padding: 40px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  }
  .login-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: #1a2740; border: 1px solid #2a3d63; display: flex; align-items: center; justify-content: center; color: #4f7cff; }
  .login-icon svg { width: 26px; height: 26px; }
  .login-card h1 { font-size: 19px; margin: 0 0 4px; }
  .login-card .sub { margin-bottom: 26px; }
  .login-card form { display: flex; flex-direction: column; gap: 12px; }
  .login-card button { width: 100%; padding: 12px; font-size: 15px; }
  .login-card .error { margin-top: 16px; }
  h1 { font-size: 22px; margin-bottom: 4px; }
  .sub { color: #888; font-size: 14px; margin-bottom: 24px; }
  .card { background: #1a1d24; border: 1px solid #2a2e38; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
  input[type=password], input[type=text], input[type=file] { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid #333; background: #0f1115; color: #fff; font-size: 15px; }
  button { background: #4f7cff; color: #fff; border: none; padding: 10px 18px; border-radius: 6px; font-size: 14px; cursor: pointer; }
  button:hover { background: #3d68e6; }
  button:disabled { background: #333; cursor: not-allowed; }
  button.secondary { background: #2a2e38; }
  button.secondary:hover { background: #363b48; }
  button.danger { background: #3a2222; color: #ff8a8a; padding: 6px 10px; font-size: 12px; }
  button.danger:hover { background: #4a2a2a; }
  .row { display: flex; gap: 10px; }
  .row > * { flex: 1; }
  .error { color: #ff6b6b; font-size: 14px; margin-top: 10px; }
  .logout { float: right; font-size: 13px; color: #888; text-decoration: none; }
  .breadcrumb { font-size: 13px; color: #888; margin-bottom: 16px; }
  .breadcrumb a { color: #4f7cff; text-decoration: none; }
  .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .folder-item { position: relative; background: #0f1115; border: 1px solid #2a2e38; border-radius: 8px; }
  .folder-item:hover { border-color: #4f7cff; }
  .folder-link { display: block; padding: 14px; padding-right: 40px; text-decoration: none; color: #e6e6e6; }
  .folder-icon { width: 20px; height: 20px; color: #4f7cff; margin-bottom: 6px; }
  .folder-item .fname { font-weight: 600; font-size: 14px; margin-bottom: 4px; word-break: break-word; }
  .folder-item .fmeta { font-size: 12px; color: #888; }
  .delete-folder-btn { position: absolute; top: 10px; right: 10px; padding: 6px; line-height: 0; }
  .delete-folder-btn svg { width: 15px; height: 15px; display: block; }
  .progress-wrap { background: #0f1115; border-radius: 6px; height: 22px; margin-top: 16px; overflow: hidden; display: none; }
  .progress-bar { background: #4f7cff; height: 100%; width: 0%; transition: width 0.2s; text-align: center; font-size: 12px; line-height: 22px; color: #fff; }
  .status { font-size: 13px; color: #aaa; margin-top: 8px; word-break: break-all; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #2a2e38; vertical-align: middle; }
  th { color: #888; font-weight: normal; font-size: 11px; text-transform: uppercase; }
  .link-box { font-size: 12px; color: #4f7cff; word-break: break-all; cursor: pointer; }
  .copy-btn { display: inline-flex; align-items: center; gap: 6px; background: #1a2740; color: #7ea3ff; border: 1px solid #2a3d63; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }
  .copy-btn:hover { background: #22335a; }
  .copy-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
  .actions { display: flex; gap: 6px; white-space: nowrap; }
  .file-cell { display: flex; align-items: center; gap: 10px; }
  .file-icon { flex-shrink: 0; width: 22px; height: 22px; color: #4f7cff; }
  .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
  .pagination a, .pagination span { padding: 6px 12px; border-radius: 6px; font-size: 13px; text-decoration: none; color: #ccc; background: #0f1115; border: 1px solid #2a2e38; }
  .pagination a:hover { border-color: #4f7cff; color: #fff; }
  .pagination .active { background: #4f7cff; color: #fff; border-color: #4f7cff; }
  .pagination .disabled { opacity: 0.35; pointer-events: none; }
  .converting-row { background: rgba(79,124,255,0.06); }
  .conversion-label { color: #7ea3ff; font-size: 13px; }
  .conversion-error { color: #ff8a8a; font-size: 13px; }

  @media (max-width: 700px) {
    body { padding: 20px 12px; }
    .card { padding: 16px; }
    table, tbody, th, td, tr { display: block; }
    thead { display: none; }
    #filesTable tr { border: 1px solid #2a2e38; border-radius: 8px; margin-bottom: 12px; padding: 12px; }
    #filesTable td { border: none; padding: 6px 0; }
    #filesTable td[data-label]:before { content: attr(data-label); display: block; color: #888; font-size: 10px; text-transform: uppercase; margin-bottom: 2px; }
    #filesTable td.fname-cell:before { content: none; }
    #filesTable .actions { display: flex; gap: 8px; margin-top: 8px; }
    #filesTable .actions button { flex: 1; }
  }