/* ════════════════════════════════════════════════════════════════════════════
   gluetun-webui.css  —  Gluetun WebUI page specific styles
   Defines local vars --vpn-on/off, --dl-color, --ul-color.
   .card, .btn, .section-label intentionally override shared.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Local colour vars ── */
:root {
  --vpn-on:   52, 211, 153;   /* #34D399 — green  */
  --vpn-off:  248, 113, 113;  /* #F87171 — red    */
  --dl-color: 96,  165, 250;  /* #60A5FA — blue   */
  --ul-color: 167, 139, 250;  /* #A78BFA — purple */
}

/* Page-specific */
.config-notice{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
.config-notice.show{display:flex;}
.notice-card{background:linear-gradient(145deg,#080f0c,#080c14);border:1px solid var(--accent-border);border-radius:20px;padding:2rem 2.25rem;max-width:420px;width:90%;text-align:center;animation:modalIn 0.3s cubic-bezier(.16,1,.3,1) both;}
@keyframes modalIn{from{transform:scale(0.92);opacity:0}to{transform:scale(1);opacity:1}}
.notice-icon{font-size:2.5rem;margin-bottom:0.75rem;}
.notice-title{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:0.5rem;}
.notice-body{font-size:0.85rem;color:var(--text-dim);line-height:1.55;margin-bottom:1.25rem;}
.notice-body a{color:var(--accent2);text-decoration:none;}.notice-body a:hover{text-decoration:underline;}
.card{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:20px;padding:1.4rem 1.6rem;margin-bottom:1rem;position:relative;overflow:hidden;backdrop-filter:blur(40px) saturate(140%);-webkit-backdrop-filter:blur(40px) saturate(140%);box-shadow:0 8px 32px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.06);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);}
.card::after{content:'';position:absolute;inset:0;background:var(--glass-shine);pointer-events:none;border-radius:20px;}
.section-label{font-size:0.62rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.9rem;display:flex;align-items:center;gap:0.5rem;position:relative;z-index:1;}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.07),transparent);}
.vpn-panel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.25rem;position:relative;z-index:1;}
@media(max-width:600px){.vpn-panel{grid-template-columns:1fr;}.vpn-right{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0.4rem;width:100%;}.speed-chip{font-size:0.72rem;padding:0.3rem 0.55rem;}}
.vpn-left{display:flex;flex-direction:column;gap:0.75rem;}
.vpn-status-row{display:flex;align-items:center;gap:0.85rem;}
.vpn-indicator{width:14px;height:14px;border-radius:50%;flex-shrink:0;background:#222;box-shadow:none;transition:all 0.4s;}
.vpn-indicator.on{background:rgb(var(--vpn-on));box-shadow:0 0 0 4px rgba(var(--vpn-on),0.15),0 0 12px rgba(var(--vpn-on),0.5);animation:vpnPulse 2.5s ease infinite;}
.vpn-indicator.off{background:rgb(var(--vpn-off));box-shadow:0 0 0 3px rgba(var(--vpn-off),0.12);}
@keyframes vpnPulse{0%,100%{box-shadow:0 0 0 4px rgba(var(--vpn-on),0.15),0 0 12px rgba(var(--vpn-on),0.4)}50%{box-shadow:0 0 0 8px rgba(var(--vpn-on),0.08),0 0 20px rgba(var(--vpn-on),0.3)}}
.vpn-state-label{font-size:1.1rem;font-weight:800;color:var(--text);}
.vpn-provider{font-size:0.78rem;color:var(--text-dim);}
.vpn-details{display:flex;gap:1.25rem;flex-wrap:wrap;}
.vpn-detail{display:flex;flex-direction:column;gap:0.1rem;}
.vpn-detail .det-label{font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);}
.vpn-detail .det-val{font-size:0.88rem;font-weight:700;color:var(--text);font-family:'DM Mono',monospace;}
.vpn-right{display:flex;flex-direction:column;gap:0.5rem;align-items:flex-end;}
.speed-chip{display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.75rem;border-radius:10px;white-space:nowrap;font-size:0.8rem;font-weight:700;}
.speed-dl{background:rgba(var(--dl-color),0.1);border:1px solid rgba(var(--dl-color),0.25);color:rgb(var(--dl-color));}
.speed-ul{background:rgba(var(--ul-color),0.1);border:1px solid rgba(var(--ul-color),0.25);color:rgb(var(--ul-color));}
.torrent-toolbar{display:flex;align-items:center;gap:0.65rem;flex-wrap:wrap;margin-bottom:0.75rem;position:relative;z-index:1;}
.filter-tabs{display:flex;gap:0.3rem;flex-wrap:wrap;}
.filter-tab{padding:0.25rem 0.7rem;border-radius:20px;font-size:0.72rem;font-weight:600;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.03);color:var(--text-dim);cursor:pointer;font-family:inherit;transition:all 0.15s;}
.filter-tab:hover{border-color:var(--accent-border);color:var(--text);}
.filter-tab.active{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent2);}
.search-input{flex:1;min-width:130px;max-width:240px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:0.32rem 0.7rem;color:var(--text);font-size:0.79rem;font-family:inherit;outline:none;transition:border-color 0.2s;}
.search-input:focus{border-color:var(--accent-border);}.search-input::placeholder{color:#1a3028;}
/* btn base + ghost/danger/disabled/sm inherited from shared.css */
/* gluetun .btn-green uses accent palette (not green) — kept as local override */
.btn-green      { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent2); }
.btn-green:hover { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.5); }
.torrent-table{width:100%;border-collapse:collapse;font-size:0.8rem;position:relative;z-index:1;}
.torrent-table thead th{text-align:left;padding:0.38rem 0.6rem;font-size:0.62rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--row-border);white-space:nowrap;cursor:pointer;user-select:none;position:relative;overflow:visible;}
.torrent-table thead th:hover{color:var(--text);}
.torrent-table tbody tr{border-bottom:1px solid var(--row-border);transition:background 0.1s;}
.torrent-table tbody tr:last-child{border-bottom:none;}
.torrent-table tbody tr:hover{background:rgba(52,211,153,0.03);}
.torrent-table tbody tr.selected{background:rgba(52,211,153,0.06);}
.torrent-table td{padding:0.48rem 0.6rem;vertical-align:middle;}
.torrent-name{font-weight:600;color:var(--text);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.torrent-name small{display:block;font-weight:400;font-size:0.72em;color:var(--text-dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.progress-wrap{width:90px;height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,rgb(var(--dl-color)),rgba(var(--dl-color),0.5));transition:width 0.3s;}
.state-badge{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.68rem;font-weight:700;padding:0.1rem 0.5rem;border-radius:20px;white-space:nowrap;}
.state-downloading{background:rgba(var(--dl-color),0.1);border:1px solid rgba(var(--dl-color),0.25);color:rgb(var(--dl-color));}
.state-seeding{background:rgba(var(--ul-color),0.1);border:1px solid rgba(var(--ul-color),0.25);color:rgb(var(--ul-color));}
.state-paused{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--text-dim);}
.state-error{background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.25);color:var(--danger);}
.state-checking{background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.25);color:var(--warn);}
.state-queued{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:#555;}
.speed-cell{font-size:0.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-dim);}
.speed-cell.active{color:rgb(var(--dl-color));}
.bulk-bar{display:none;align-items:center;gap:0.65rem;padding:0.55rem 0.85rem;background:rgba(52,211,153,0.06);border:1px solid rgba(52,211,153,0.18);border-radius:10px;margin-bottom:0.75rem;flex-wrap:wrap;}
.bulk-bar.visible{display:flex;}
.bulk-label{font-size:0.8rem;color:var(--accent2);font-weight:600;flex:1;}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s;}
.modal-backdrop.open{opacity:1;pointer-events:all;}
.modal{background:linear-gradient(145deg,#080f0c,#080c14);border:1px solid var(--accent-border);border-radius:18px;padding:1.75rem 2rem;width:90%;max-width:480px;animation:modalIn 0.25s cubic-bezier(.16,1,.3,1) both;}
.modal h3{margin:0 0 0.35rem;font-size:1.05rem;color:var(--text);}
.modal-sub{font-size:0.8rem;color:var(--text-dim);margin:0 0 1.1rem;}
.field-label{font-size:0.64rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.3rem;}
.field-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(52,211,153,0.2);border-radius:8px;padding:0.42rem 0.75rem;color:var(--text);font-family:'DM Mono',monospace;font-size:0.8rem;outline:none;transition:border-color 0.2s;margin-bottom:0.85rem;resize:vertical;}
.field-input:focus{border-color:rgba(52,211,153,0.5);}.field-input::placeholder{color:#1a3028;}
.modal-footer{display:flex;justify-content:flex-end;gap:0.5rem;}
.settings-modal{max-width:440px;}.settings-modal .field-input{font-family:inherit;}
.row-checkbox{cursor:pointer;}
.empty-state{text-align:center;padding:2.5rem;color:#1a3028;font-size:0.85rem;position:relative;z-index:1;}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(52,211,153,0.15);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(8,15,12,0.95);border:1px solid var(--accent-border);border-radius:10px;padding:0.6rem 1.2rem;font-size:0.82rem;font-weight:500;backdrop-filter:blur(20px);opacity:0;transition:all 0.3s;pointer-events:none;z-index:1000;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.success{border-color:rgba(74,222,128,0.4);color:var(--success);}
#toast.error{border-color:rgba(248,113,113,0.4);color:var(--danger);}
#toast.info{border-color:rgba(52,211,153,0.4);color:var(--accent2);}
.sort-arrow{font-size:0.6rem;margin-left:0.2rem;opacity:0.3;}
.sort-arrow.asc::after{content:'↑';opacity:1;color:var(--accent2);}
.sort-arrow.desc::after{content:'↓';opacity:1;color:var(--accent2);}
.th-txt{pointer-events:none;}
.col-resizer{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:2;}
.del-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);z-index:500;align-items:center;justify-content:center;}
.del-modal-backdrop.open{display:flex;}
.del-modal{background:linear-gradient(145deg,#13131f,#0f0f1a);border:1px solid rgba(231,76,60,0.3);border-radius:16px;padding:1.5rem 1.75rem;max-width:380px;width:90%;}
.del-modal-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:0.4rem;}
.del-modal-sub{font-size:0.82rem;color:var(--text-dim);margin-bottom:1.25rem;line-height:1.5;}
.del-modal-name{font-size:0.78rem;color:#e0e0e0;background:rgba(255,255,255,0.05);padding:0.35rem 0.65rem;border-radius:6px;margin-bottom:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.del-modal-btns{display:flex;flex-direction:column;gap:0.5rem;}
.del-modal-btns .btn{justify-content:center;}
.tag-pill{display:inline-flex;align-items:center;gap:0.2rem;padding:0.1rem 0.45rem;border-radius:20px;font-size:0.62rem;font-weight:600;background:rgba(88,101,242,0.12);border:1px solid rgba(88,101,242,0.25);color:#a8b4ff;white-space:nowrap;margin-right:0.2rem;}
.tag-pills-wrap{display:flex;flex-wrap:wrap;gap:0.2rem;margin-top:2px;}
.tag-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);z-index:500;align-items:center;justify-content:center;}
.tag-modal-backdrop.open{display:flex;}
.tag-modal{background:linear-gradient(145deg,#13131f,#0f0f1a);border:1px solid rgba(88,101,242,0.3);border-radius:16px;padding:1.5rem 1.75rem;max-width:400px;width:90%;}
.tag-modal-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:0.3rem;}
.tag-modal-sub{font-size:0.8rem;color:var(--text-dim);margin-bottom:1rem;}
.tag-existing{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1rem;min-height:28px;}
.tag-existing-pill{display:inline-flex;align-items:center;gap:0.25rem;padding:0.2rem 0.6rem;border-radius:20px;font-size:0.72rem;font-weight:600;cursor:pointer;background:rgba(88,101,242,0.12);border:1px solid rgba(88,101,242,0.25);color:#a8b4ff;transition:all 0.15s;}
.tag-existing-pill:hover{background:rgba(88,101,242,0.25);}
.tag-existing-pill.selected{background:rgba(88,101,242,0.35);border-color:#a8b4ff;}
.tag-input-row{display:flex;gap:0.5rem;margin-bottom:1rem;}
.tag-input-row .field-input{flex:1;}
.tag-modal-btns{display:flex;gap:0.5rem;justify-content:flex-end;flex-wrap:wrap;}
.vc-cb-wrap{display:inline-flex;align-items:center;gap:0.55rem;cursor:pointer;user-select:none;position:relative;}
.vc-cb-wrap input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.vc-cb-box{width:17px;height:17px;flex-shrink:0;border-radius:5px;border:1.5px solid rgba(255,255,255,0.18);background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
.vc-cb-wrap input:checked + .vc-cb-box{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(124,92,252,0.45);}
.vc-cb-wrap input:checked + .vc-cb-box::after{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);display:block;}
.vc-cb-wrap:hover .vc-cb-box{border-color:rgba(124,92,252,0.55);}
.vc-cb-wrap.vc-cb-danger input:checked + .vc-cb-box{background:var(--danger);border-color:var(--danger);box-shadow:0 0 8px rgba(248,113,113,0.4);}
.vc-cb-wrap.vc-cb-danger:hover .vc-cb-box{border-color:rgba(248,113,113,0.5);}
@media(max-width:540px){body{padding:1rem 0.5rem 3rem;}.card{padding:1.1rem;}.torrent-name{max-width:200px;}}