/* ============================================================
   Fly 文件分享平台 - style.css
   由单文件 index.html 拆分而来 (2026-09-18)
   块1: 主页面样式 | 块2: 登录页水墨中国风样式
   ============================================================ */

/* ---------- 块1: 主页面样式 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }



    :root {

      --ink-dark: #1a1a2e;

      --ink-blue: #16213e;

      --ink-gray: #4a4a6a;

      --ink-light: #8b8ba7;

      --spring-pink: #ff8a9b;

      --spring-green: #7ec8a3;

      --spring-blue: #6bc5d2;

      --radius: 16px;

    }



    body {

      font-family: 'ZCOOL XiaoWei', serif;

      background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);

      color: #e8e8f0;

      min-height: 100vh;

      position: relative;

    }



    /* 水墨背景 */

    body::before {

      content: '';

      position: fixed;

      top: 0; left: 0; width: 100%; height: 100%;

      background: 

        radial-gradient(ellipse at 20% 30%, rgba(30, 30, 60, 0.5) 0%, transparent 50%),

        radial-gradient(ellipse at 80% 70%, rgba(40, 40, 80, 0.4) 0%, transparent 40%);

      z-index: -1;

    }



    .topbar {

      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));

      padding: 0 24px;

      height: 60px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

      border-bottom: 1px solid rgba(107, 197, 210, 0.2);

    }

    .topbar-logo {

      color: #fff;

      font-size: 20px;

      font-weight: 700;

      display: flex;

      align-items: center;

      gap: 8px;

    }

    .topbar-logo span { font-size: 24px; }

    .tab-switch {

      display: flex;

      background: rgba(255, 255, 255, 0.05);

      border-radius: 12px;

      padding: 4px;

      gap: 4px;

      border: 1px solid rgba(107, 197, 210, 0.2);

    }

    .tab-btn {

      padding: 8px 20px;

      border: none;

      background: transparent;

      color: var(--ink-light);

      border-radius: 10px;

      cursor: pointer;

      font-size: 14px;

      font-family: inherit;

      transition: all 0.3s;

      letter-spacing: 1px;

    }

    .tab-btn.active {

      background: linear-gradient(135deg, var(--spring-blue) 0%, #4fa8b1 100%);

      color: #fff;

      box-shadow: 0 4px 15px rgba(107, 197, 210, 0.3);

    }

    .tab-btn:hover:not(.active) {

      color: #fff;

      background: rgba(107, 197, 210, 0.1);

    }



    .main { max-width: 820px; margin: 40px auto; padding: 0 16px; }



    .card {

      background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95));

      border-radius: 20px;

      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);

      border: 1px solid rgba(107, 197, 210, 0.2);

      padding: 32px;

      margin-bottom: 20px;

      backdrop-filter: blur(10px);

    }

    .card-title {

      font-size: 18px;

      font-weight: 700;

      margin-bottom: 20px;

      display: flex;

      align-items: center;

      gap: 8px;

      color: #fff;

    }



    .page { display: none; }

    .page.active { display: block; }



    .form-group { margin-bottom: 16px; }

    .form-label {

      display: block;

      font-size: 13px;

      font-weight: 600;

      color: var(--ink-light);

      margin-bottom: 6px;

      text-transform: uppercase;

      letter-spacing: 0.5px;

    }

    .form-input {

      width: 100%;

      padding: 11px 14px;

      border: 1.5px solid rgba(107, 197, 210, 0.3);

      border-radius: 10px;

      font-size: 15px;

      color: #fff;

      background: rgba(255, 255, 255, 0.05);

      transition: all 0.3s;

      outline: none;

    }

    .form-input::placeholder { color: var(--ink-gray); }

    .form-input:focus {

      border-color: var(--spring-blue);

      box-shadow: 0 0 20px rgba(107, 197, 210, 0.2), inset 0 0 10px rgba(107, 197, 210, 0.05);

      background: rgba(107, 197, 210, 0.1);

    }

    /* 下拉框选项样式 */

    select.form-input option {

      color: #333;

      background: #fff;

    }



    .btn {

      display: inline-flex;

      align-items: center;

      gap: 6px;

      padding: 11px 24px;

      border: none;

      border-radius: 10px;

      font-size: 15px;

      font-weight: 600;

      cursor: pointer;

      transition: all 0.3s;

      font-family: inherit;

    }

    .btn-primary { 

      background: linear-gradient(135deg, var(--spring-blue) 0%, #4fa8b1 100%); 

      color: #fff; 

    }

    .btn-primary:hover { 

      transform: translateY(-2px);

      box-shadow: 0 8px 20px rgba(107, 197, 210, 0.4);

    }

    .btn-primary:active { transform: translateY(0); }

    .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; }

    .btn-danger:hover { 

      transform: translateY(-2px);

      box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);

    }

    .btn-sm { padding: 7px 14px; font-size: 13px; }

    .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

    .btn-full { width: 100%; justify-content: center; }



    .alert {

      padding: 12px 16px;

      border-radius: 10px;

      font-size: 14px;

      margin-bottom: 16px;

      display: flex;

      align-items: center;

      gap: 8px;

    }

    .alert-success { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }

    .alert-error { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

    .alert-info { background: rgba(107, 197, 210, 0.15); color: var(--spring-blue); border: 1px solid rgba(107, 197, 210, 0.3); }

    .alert { display: none; }

    .alert.show { display: flex; }



    .upload-zone {

      border: 2px dashed rgba(107, 197, 210, 0.3);

      border-radius: 16px;

      padding: 40px 20px;

      text-align: center;

      cursor: pointer;

      transition: all 0.3s;

      background: rgba(255, 255, 255, 0.03);

      position: relative;

    }

    .upload-zone:hover, .upload-zone.drag-over {

      border-color: var(--spring-blue);

      background: rgba(107, 197, 210, 0.1);

    }

    .upload-zone input[type="file"] {

      position: absolute;

      inset: 0;

      opacity: 0;

      cursor: pointer;

      width: 100%;

      height: 100%;

    }

    .upload-icon { font-size: 48px; margin-bottom: 12px; }

    .upload-text { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }

    .upload-hint { font-size: 13px; color: var(--ink-light); }



    .progress-wrap { margin: 16px 0; display: none; }

    .progress-wrap.show { display: block; }

    .progress-label {

      display: flex;

      justify-content: space-between;

      font-size: 13px;

      color: var(--ink-light);

      margin-bottom: 6px;

    }

    .progress-bar-bg {

      background: rgba(255, 255, 255, 0.1);

      border-radius: 99px;

      height: 8px;

      overflow: hidden;

    }

    .progress-bar {

      height: 100%;

      background: linear-gradient(90deg, var(--spring-blue), #4fa8b1);

      border-radius: 99px;

      transition: width 0.3s;

      width: 0%;

    }



    .admin-bar {

      display: none;

      align-items: center;

      gap: 10px;

      padding: 10px 16px;

      background: rgba(34, 197, 94, 0.15);

      border-radius: 12px;

      border: 1px solid rgba(34, 197, 94, 0.3);

      margin-bottom: 20px;

      font-size: 14px;

      color: #4ade80;

      font-weight: 500;

    }

    .admin-bar.show { display: flex; }

    .admin-bar .logout-btn {

      margin-left: auto;

      padding: 6px 14px;

      background: rgba(255, 255, 255, 0.1);

      border: 1px solid rgba(34, 197, 94, 0.3);

      color: #4ade80;

      border-radius: 8px;

      cursor: pointer;

      font-size: 13px;

      transition: all 0.3s;

    }

    .admin-bar .logout-btn:hover {

      background: rgba(34, 197, 94, 0.2);

    }



    .logout-btn {

      padding: 6px 14px;

      background: rgba(255, 255, 255, 0.1);

      border: 1px solid rgba(107, 197, 210, 0.3);

      color: var(--ink-light);

      border-radius: 8px;

      cursor: pointer;

      font-size: 13px;

      transition: all 0.3s;

    }

    .logout-btn:hover {

      background: rgba(239, 68, 68, 0.2);

      border-color: rgba(239, 68, 68, 0.3);

      color: #f87171;

    }



    .file-item {

      display: flex;

      align-items: center;

      gap: 12px;

      padding: 14px 16px;

      border-radius: 12px;

      border: 1px solid rgba(107, 197, 210, 0.15);

      margin-bottom: 10px;

      background: rgba(255, 255, 255, 0.03);

      transition: all 0.2s;

    }

    .file-item:hover { 

      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 

      background: rgba(107, 197, 210, 0.08);

      border-color: rgba(107, 197, 210, 0.3);

    }

    .folder-item {

      display: flex;

      align-items: center;

      gap: 12px;

      padding: 14px 16px;

      border-radius: 12px;

      border: 1px solid rgba(107, 197, 210, 0.2);

      margin-bottom: 6px;

      background: rgba(107, 197, 210, 0.08);

      cursor: pointer;

      transition: all 0.2s;

      user-select: none;

    }

    .folder-item:hover { 

      box-shadow: 0 4px 15px rgba(107, 197, 210, 0.15); 

      background: rgba(107, 197, 210, 0.12);

    }

    .folder-arrow { font-size: 12px; color: var(--spring-blue); font-weight: bold; transition: transform 0.2s; }

    .folder-children { margin-bottom: 8px; }

    .file-item-indent { margin-left: 20px; background: rgba(255, 255, 255, 0.02); border-color: rgba(107, 197, 210, 0.1); }

    .file-icon { font-size: 28px; flex-shrink: 0; }

    .file-info { flex: 1; min-width: 0; }

    .file-name {

      font-size: 15px;

      font-weight: 600;

      color: #fff;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

    }

    .file-meta { font-size: 12px; color: var(--ink-light); margin-top: 2px; }

    .file-actions { display: flex; gap: 8px; flex-shrink: 0; }



    .empty-state {

      text-align: center;

      padding: 48px 20px;

      color: var(--ink-light);

    }

    .empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }

    .empty-state p { font-size: 15px; }



    .loading { text-align: center; padding: 32px; color: var(--ink-light); }

    .spinner {

      display: inline-block;

      width: 24px; height: 24px;

      border: 3px solid rgba(107, 197, 210, 0.2);

      border-top-color: var(--spring-blue);

      border-radius: 50%;

      animation: spin 0.8s linear infinite;

      margin-bottom: 8px;

    }

    @keyframes spin { to { transform: rotate(360deg); } }



    .badge {

      display: inline-flex;

      align-items: center;

      padding: 2px 8px;

      border-radius: 99px;

      font-size: 12px;

      font-weight: 600;

    }

    .badge-blue { background: rgba(107, 197, 210, 0.15); color: var(--spring-blue); }



    /* Checkbox 样式 */

    input[type="checkbox"] {

      accent-color: var(--spring-blue);

    }



    @media (max-width: 600px) {

      .main { margin: 20px auto; }

      .card { padding: 20px; }

      .file-item { flex-wrap: wrap; }

      .file-actions { width: 100%; justify-content: flex-end; }

    }

/* ---------- 块2: 登录页样式（水墨中国风） ---------- */
/* 登录页面样式 */

    .login-page { display: none; }

    .login-page.active { display: block; }

    .main-page { display: none; }

    .main-page.active { display: block; }



    .login-bg {

      position: fixed;

      top: 0; left: 0; width: 100%; height: 100%;

      background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);

      z-index: 0;

    }

    .login-bg::before {

      content: '';

      position: absolute;

      top: -50%; left: -50%; width: 200%; height: 200%;

      background: 

        radial-gradient(ellipse at 20% 30%, rgba(30, 30, 60, 0.8) 0%, transparent 50%),

        radial-gradient(ellipse at 80% 70%, rgba(40, 40, 80, 0.6) 0%, transparent 40%),

        radial-gradient(ellipse at 50% 50%, rgba(20, 20, 50, 0.5) 0%, transparent 60%);

      animation: inkFlow 20s ease-in-out infinite;

    }

    @keyframes inkFlow {

      0%, 100% { transform: translate(0, 0) rotate(0deg); }

      33% { transform: translate(2%, 2%) rotate(1deg); }

      66% { transform: translate(-1%, 1%) rotate(-1deg); }

    }



    .login-water {

      position: fixed;

      bottom: 0; left: 0; width: 100%; height: 40%;

      z-index: 1; overflow: hidden;

    }

    .login-wave {

      position: absolute;

      width: 200%; height: 200%;

      top: -50%; left: -50%;

      background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(107, 197, 210, 0.1) 50%, transparent 60%);

      animation: waveMove 8s ease-in-out infinite;

    }

    .login-wave:nth-child(1) { animation-delay: 0s; opacity: 0.8; }

    .login-wave:nth-child(2) { animation-delay: -2s; opacity: 0.6; transform: scale(1.2); }

    .login-wave:nth-child(3) { animation-delay: -4s; opacity: 0.4; transform: scale(0.8); }

    @keyframes waveMove {

      0%, 100% { transform: translateX(0) translateY(0); }

      25% { transform: translateX(-5%) translateY(2%); }

      50% { transform: translateX(3%) translateY(4%); }

      75% { transform: translateX(-2%) translateY(2%); }

    }



    .login-shine {

      position: fixed; top: 0; left: 0; width: 100%; height: 100%;

      z-index: 2; pointer-events: none;

      background: repeating-linear-gradient(90deg, transparent 0px, transparent 80px, rgba(255, 255, 255, 0.03) 80px, rgba(255, 255, 255, 0.03) 82px);

      animation: shineMove 12s linear infinite;

    }

    @keyframes shineMove {

      0% { transform: translateX(0) translateY(0); }

      100% { transform: translateX(100px) translateY(100px); }

    }



    .login-sparkle {

      position: absolute;

      width: 4px; height: 4px;

      background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%);

      border-radius: 50%;

      animation: sparkle 3s ease-in-out infinite;

    }

    @keyframes sparkle {

      0%, 100% { opacity: 0; transform: scale(0); }

      50% { opacity: 1; transform: scale(1.5); }

    }



    .login-container {

      position: relative; z-index: 10;

      width: 100%; max-width: 420px;

      padding: 40px; margin: 20px;

    }



    .login-logo-area {

      text-align: center; margin-bottom: 40px;

      animation: fadeInDown 1s ease-out;

    }

    @keyframes fadeInDown {

      from { opacity: 0; transform: translateY(-30px); }

      to { opacity: 1; transform: translateY(0); }

    }



    .login-logo {

      position: relative;

      display: inline-block;

      width: 120px; height: 120px;

    }



    .login-logo-text {

      font-family: 'Ma Shan Zheng', cursive;

      font-size: 72px;

      color: #fff;

      text-shadow: 0 0 20px rgba(107, 197, 210, 0.5), 0 0 40px rgba(107, 197, 210, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.5);

      position: relative; z-index: 2;

      animation: logoFloat 4s ease-in-out infinite;

    }

    @keyframes logoFloat {

      0%, 100% { transform: translateY(0); }

      50% { transform: translateY(-5px); }

    }



    .login-spring-elem { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

    .login-leaf {

      position: absolute;

      width: 20px; height: 20px;

      opacity: 0.7;

      animation: leafSway 3s ease-in-out infinite;

    }

    .login-leaf::before {

      content: '';

      position: absolute;

      width: 100%; height: 100%;

      background: #7ec8a3;

      border-radius: 0 70% 0 70%;

      transform: rotate(-45deg);

    }

    .login-leaf:nth-child(1) { top: -5px; right: -5px; animation-delay: 0s; }

    .login-leaf:nth-child(2) { bottom: 5px; left: -8px; transform: scale(0.8) rotate(180deg); animation-delay: 0.5s; }

    @keyframes leafSway {

      0%, 100% { transform: rotate(0deg) translateX(0); }

      50% { transform: rotate(10deg) translateX(3px); }

    }



    .login-flower {

      position: absolute;

      width: 16px; height: 16px;

      animation: flowerBloom 3s ease-in-out infinite;

    }

    .login-flower::before {

      content: '✿';

      font-size: 16px;

      color: #ff8a9b;

      text-shadow: 0 0 10px rgba(255, 138, 155, 0.5);

    }

    .login-flower:nth-child(3) { top: 10px; left: -10px; animation-delay: 1s; }

    .login-flower:nth-child(4) { bottom: -5px; right: 5px; animation-delay: 1.5s; }

    .login-flower:nth-child(4)::before { color: #ffd93d; }

    @keyframes flowerBloom {

      0%, 100% { transform: scale(1); opacity: 0.8; }

      50% { transform: scale(1.1); opacity: 1; }

    }



    .login-butterfly {

      position: absolute;

      font-size: 20px;

      animation: butterflyFly 6s ease-in-out infinite;

      filter: drop-shadow(0 0 5px rgba(107, 197, 210, 0.5));

    }

    .login-butterfly:nth-child(5) { top: 50%; right: -30px; animation-delay: 0s; }

    .login-butterfly:nth-child(6) { bottom: 20%; left: -25px; animation-delay: 3s; }

    @keyframes butterflyFly {

      0%, 100% { transform: translate(0, 0) rotate(0deg); }

      25% { transform: translate(10px, -15px) rotate(10deg); }

      50% { transform: translate(5px, -5px) rotate(-5deg); }

      75% { transform: translate(-5px, -10px) rotate(5deg); }

    }



    .login-title {

      font-family: 'Ma Shan Zheng', cursive;

      font-size: 28px;

      color: #fff;

      text-align: center;

      margin-top: 20px;

      opacity: 0.9;

      letter-spacing: 8px;

    }



    .login-card {

      background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95));

      border-radius: 20px;

      padding: 40px 35px;

      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);

      border: 1px solid rgba(107, 197, 210, 0.2);

      backdrop-filter: blur(10px);

      animation: fadeInUp 0.8s ease-out 0.3s both;

    }

    @keyframes fadeInUp {

      from { opacity: 0; transform: translateY(30px); }

      to { opacity: 1; transform: translateY(0); }

    }



    .login-tabs {

      display: flex;

      margin-bottom: 30px;

      background: rgba(255, 255, 255, 0.05);

      border-radius: 12px;

      padding: 4px;

      border: 1px solid rgba(107, 197, 210, 0.2);

    }



    .login-tab {

      flex: 1;

      padding: 12px 20px;

      background: transparent;

      border: none;

      color: #8b8ba7;

      font-size: 14px;

      font-family: inherit;

      cursor: pointer;

      border-radius: 10px;

      transition: all 0.3s ease;

      letter-spacing: 2px;

    }



    .login-tab.active {

      background: linear-gradient(135deg, #6bc5d2 0%, #4fa8b1 100%);

      color: #fff;

      box-shadow: 0 4px 15px rgba(107, 197, 210, 0.3);

    }



    .login-tab:hover:not(.active) {

      color: #fff;

      background: rgba(107, 197, 210, 0.1);

    }



    .login-form { display: none; }

    .login-form.active { display: block; animation: fadeIn 0.3s ease; }

    @keyframes fadeIn {

      from { opacity: 0; transform: translateY(10px); }

      to { opacity: 1; transform: translateY(0); }

    }



    .login-form-group { margin-bottom: 24px; position: relative; }

    .login-form-group label {

      display: block;

      color: #8b8ba7;

      font-size: 14px;

      margin-bottom: 8px;

      letter-spacing: 2px;

    }

    .login-form-group input {

      width: 100%;

      padding: 14px 18px;

      background: rgba(255, 255, 255, 0.05);

      border: 1px solid rgba(107, 197, 210, 0.3);

      border-radius: 12px;

      color: #fff;

      font-size: 15px;

      font-family: inherit;

      transition: all 0.3s ease;

      outline: none;

    }

    .login-form-group input::placeholder { color: #4a4a6a; }

    .login-form-group input:focus {

      border-color: #6bc5d2;

      background: rgba(107, 197, 210, 0.1);

      box-shadow: 0 0 20px rgba(107, 197, 210, 0.2), inset 0 0 20px rgba(107, 197, 210, 0.05);

    }



    .login-input-icon {

      position: absolute;

      right: 16px;

      top: 42px;

      color: #8b8ba7;

      font-size: 18px;

    }



    .login-btn {

      width: 100%;

      padding: 16px;

      background: linear-gradient(135deg, #6bc5d2 0%, #4fa8b1 100%);

      border: none;

      border-radius: 12px;

      color: #fff;

      font-size: 16px;

      font-family: inherit;

      letter-spacing: 4px;

      cursor: pointer;

      transition: all 0.3s ease;

      position: relative;

      overflow: hidden;

      margin-top: 10px;

    }

    .login-btn::before {

      content: '';

      position: absolute;

      top: 0; left: -100%;

      width: 100%; height: 100%;

      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);

      transition: left 0.5s ease;

    }

    .login-btn:hover {

      transform: translateY(-2px);

      box-shadow: 0 10px 30px rgba(107, 197, 210, 0.4), 0 0 20px rgba(107, 197, 210, 0.2);

    }

    .login-btn:hover::before { left: 100%; }

    .login-btn:active { transform: translateY(0); }



    .login-hint {

      font-size: 12px;

      color: #4a4a6a;

      margin-top: 8px;

      padding: 10px 14px;

      background: rgba(107, 197, 210, 0.1);

      border-radius: 8px;

      border-left: 3px solid #6bc5d2;

    }



    @keyframes shake {

      0%, 100% { transform: translateX(0); }

      20% { transform: translateX(-8px); }

      40% { transform: translateX(8px); }

      60% { transform: translateX(-4px); }

      80% { transform: translateX(4px); }

    }



    @media (max-width: 480px) {

      .login-container { padding: 20px; margin: 15px; }

      .login-card { padding: 30px 25px; }

      .login-logo { width: 100px; height: 100px; }

      .login-logo-text { font-size: 56px; }

      .login-title { font-size: 22px; letter-spacing: 4px; }

    }