html, body, #root { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
#root { margin: 0 auto; }
::selection { background:#ff9100; color:#fff; }
::-moz-selection { background:#ff9100; color:#fff; }
body { display:flex; align-items:flex-start; justify-content:center; min-width:900px; background:#0a0a0a; margin:0; padding:0; }
.page { width:100%; display:flex; flex-direction:column; align-items:center; padding:60px 16px 40px; box-sizing:border-box; }
.tcard {
  width:100%; background:#1a1a1a; box-shadow:0 2px 24px rgba(0,0,0,0.5); border-radius:24px; padding:34px 36px 38px 36px;
  margin:0 0 40px; transition: box-shadow .2s; position:relative; box-sizing:border-box; overflow:visible; border:1px solid #2a2a2a;
}
.tcard-table-wrapper { overflow-y:visible; width:100%; max-width:100%; -webkit-overflow-scrolling:touch; margin:0 -36px; padding:0 36px; }
.tcard-table-wrapper::-webkit-scrollbar { height:8px; }
.tcard-table-wrapper::-webkit-scrollbar-track { background:#1a1a1a; border-radius:4px; }
.tcard-table-wrapper::-webkit-scrollbar-thumb { background:#3a3a3a; border-radius:4px; }
.tcard-table-wrapper::-webkit-scrollbar-thumb:hover { background:#4a4a4a; }
.tcard:hover { box-shadow:0 8px 32px rgba(0,0,0,0.7); }
.tcard-header { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:36px; }
.tcard-title { font-size:2.4rem; font-weight:900; color:#fafafa; letter-spacing:.01em; margin-bottom:5px; }
.tcard-sub { font-size:1rem; color:#7a7a7a; margin-bottom:17px; }
.tcard-divider { height:2px; width:100%; background:linear-gradient(90deg, #2a2a2a, #3a3a3a 56%, #2a2a2a); border-radius:3px; margin-bottom:12px; }
.tcard table { width:100%; min-width:1000px; border-collapse:separate; border-spacing:0; font-size:17.2px; background:#1a1a1a; }
.tcard thead th { padding:14px 7px 9px; font-weight:900; color:#fafafa; background:transparent; border-bottom:2.5px solid #2a2a2a; letter-spacing:.01em; text-align:left; }
.tcard tbody tr { transition: box-shadow .15s, background .17s; border-radius:18px; background:none; box-shadow:none; margin:0;padding:0; }
.tcard tbody tr > td { padding:6px 9px!important; height:58px; min-height:48px; border:none; vertical-align:middle!important; background:none; white-space:nowrap;}
.tcard tbody tr.row-main { box-shadow:0 2px 11px rgba(0,0,0,0.3); border-radius:18px; background:#1a1a1a; overflow:visible; position:relative; z-index:1; border:1px solid #2a2a2a; }
.tcard tbody tr.row-main:nth-child(even) { background:#212121!important; }
.tcard tbody tr.row-main:hover { background:#2a2a2a!important; box-shadow:0 6px 20px rgba(0,0,0,0.5); z-index:2; }
.tr-col {
    min-width: 74px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    color: #fafafa;
    font-size: 18px;
    vertical-align: middle;
    height: 46px;
    padding: 6px 9px;
    box-sizing: border-box;
}
.tr-col.sm { min-width:38px; text-align:center; font-weight:600; font-size:19px; color:#fafafa;}
.tr-col.pwd { font-family:monospace; color:#b0b0b0; white-space:normal; word-wrap:break-word; word-break:break-all; max-width:180px; line-height:1.4; height:auto; min-height:46px; padding:8px 9px;}
.copy-icn { opacity:.16; position:relative; left:2px; margin-left:7px; cursor:pointer; transition:opacity .14s, color .18s; font-size:19px; color:#fafafa;}
.tr-col:hover .copy-icn { opacity:.85; color:#21967e; }
.copy-icn.copied { color:#17af3f; opacity:1; }
.save-btn { background:#24cd7b; color:#fff; border:none; padding:7px 20px; border-radius:8px; font-weight:800; font-size:17px; cursor:pointer; transition:background .14s, transform .12s, box-shadow .15s; box-shadow:0 3px 13px -5px rgba(26,205,123,0.3);vertical-align: middle; margin-left:10px; height:42px; display:inline-flex; align-items:center;}
.save-btn:hover { background:#15b45a; transform:scale(1.03) translateY(-1px); box-shadow:0 6px 22px 0 rgba(49,225,154,0.4); }
.typeTrigger { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:18px; cursor:pointer; user-select:none; font-weight:800; font-size:15px; transition:transform .08s, box-shadow .12s; border:1.5px solid #3a3a3a; min-width:70px; justify-content:center; position:relative; background:#1a1a1a; color:#fafafa; }
.typeTrigger:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.5); }
.typeTrigger:after { content:'▼'; font-size:11px; opacity:.65; margin-left:4px; }
.typeTrigger img { width:20px; height:20px; display:block; object-fit:contain; }
.typeDropdown { position:absolute; top:calc(100% + 6px); left:0; list-style:none; margin:0; padding:6px; background:#1a1a1a; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.7); z-index:10000; min-width:140px; white-space:nowrap; border:1px solid #2a2a2a; }
.typeItem { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; cursor:pointer; user-select:none; font-weight:600; font-size:15px; transition:background .1s, transform .08s; color:#fafafa; }
.typeItem:hover { transform:translateX(2px); background:#2a2a2a; }
.typeItem.active { background:#3a3a3a; border:1px solid #4a4a4a; }
.typeItem img { width:20px; height:20px; display:block; object-fit:contain; flex-shrink:0; }
.tcard input[type=text], .tcard input[type=url] { padding:7px 10px; border-radius:7px; border:1.5px solid #3a3a3a; font-size:16px; outline:none; background:#0a0a0a; transition:border .13s, box-shadow .11s; box-shadow:none; width:100%; height:39px; color:#fafafa; box-sizing:border-box;}
.tcard input:focus { border:2.2px solid #6ab1f9; box-shadow:0 0 0 2.2px rgba(106,181,249,0.3); background:#1a1a1a; }
::placeholder { color:#7a7a7a!important; font-size:15px; opacity:1; }
.correctTrigger { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:18px; cursor:pointer; user-select:none; font-weight:800; font-size:15px; transition:transform .08s, box-shadow .12s; border:1.5px solid transparent; min-width:90px; justify-content:space-between; position:relative; }
.correctTrigger:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.5); }
.correctTrigger:after { content:'▼'; font-size:11px; opacity:.65; margin-left:4px; }
.ct-none { background:#2a2a2a; color:#7a7a7a; border-color:#3a3a3a; }
.ct-yes { background:rgba(12,148,72,0.2); color:#0c9448; border-color:#6bdda7; }
.ct-no { background:rgba(233,10,41,0.2); color:#e90a29; border-color:#ff6a7c; }
.ct-wait { background:rgba(212,160,22,0.2); color:#d4a016; border-color:#f7d84f; }
.ct-lim { background:rgba(139,92,246,0.2); color:#8b5cf6; border-color:#c4b5fd; }
.correctDot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.ct-none .correctDot { background:#7a7a7a; }
.ct-yes .correctDot { background:#00e144; }
.ct-no .correctDot { background:#ff2c49; }
.ct-wait .correctDot { background:#f4c430; }
.ct-lim .correctDot { background:#a78bfa; }
.correctDropdown { position:absolute; top:calc(100% + 6px); left:0; list-style:none; margin:0; padding:6px; background:#1a1a1a; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.7); z-index:10000; min-width:100%; white-space:nowrap; border:1px solid #2a2a2a; }
.correctItem { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; cursor:pointer; user-select:none; font-weight:700; font-size:15px; transition:background .1s, transform .08s; }
.correctItem:hover { transform:translateX(2px); }
.ci-none { color:#7a7a7a; }
.ci-none:hover { background:#2a2a2a; }
.ci-none .correctDot { background:#7a7a7a; }
.ci-yes { color:#0c9448; }
.ci-yes:hover { background:rgba(12,148,72,0.2); }
.ci-yes .correctDot { background:#00e144; }
.ci-no { color:#e90a29; }
.ci-no:hover { background:rgba(233,10,41,0.2); }
.ci-no .correctDot { background:#ff2c49; }
.ci-wait { color:#d4a016; }
.ci-wait:hover { background:rgba(212,160,22,0.2); }
.ci-wait .correctDot { background:#f4c430; }
.ci-lim { color:#8b5cf6; }
.ci-lim:hover { background:rgba(139,92,246,0.2); }
.ci-lim .correctDot { background:#a78bfa; }
.text-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:100000; }
.text-modal-content { background:#1a1a1a; border-radius:12px; padding:24px; min-width:400px; max-width:600px; box-shadow:0 4px 16px rgba(0,0,0,0.5); border:1px solid #2a2a2a; }
.text-modal-header { font-size:20px; font-weight:700; margin-bottom:16px; color:#fafafa; }
.text-modal-input { width:100%; padding:10px; border:1.5px solid #3a3a3a; border-radius:7px; font-size:16px; margin-bottom:12px; box-sizing:border-box; background:#0a0a0a; color:#fafafa; }
.text-modal-input:focus { border-color:#6ab1f9; background:#1a1a1a; outline:none; }
.text-modal-textarea { width:100%; padding:10px; border:1.5px solid #3a3a3a; border-radius:7px; font-size:16px; min-height:120px; resize:vertical; box-sizing:border-box; font-family:inherit; background:#0a0a0a; color:#fafafa; }
.text-modal-textarea:focus { border-color:#6ab1f9; background:#1a1a1a; outline:none; }
.text-modal-buttons { display:flex; gap:12px; justify-content:flex-end; margin-top:16px; }
.text-modal-btn { padding:8px 20px; border-radius:8px; font-weight:700; font-size:16px; cursor:pointer; border:none; transition:background .14s; }
.text-modal-btn-cancel { background:#2a2a2a; color:#fafafa; }
.text-modal-btn-cancel:hover { background:#3a3a3a; }
.text-modal-btn-save { background:#24cd7b; color:#fff; }
.text-modal-btn-save:hover { background:#15b45a; }
.text-btn { background:transparent; color:#fafafa; border:none; padding:8px 12px; border-radius:8px; font-size:20px; cursor:pointer; transition:box-shadow .14s, transform .12s; box-shadow:none; height:42px; width:42px; display:inline-flex; align-items:center; justify-content:center; outline:none; }
.text-btn:hover { transform:scale(1.05); box-shadow:0 0 12px rgba(255, 152, 0, 0.7); }
.text-btn:focus { outline:none; }
.auth-switch-btn { background:transparent; color:#fafafa; border:none; padding:6px 10px; border-radius:8px; font-size:18px; cursor:pointer; transition:box-shadow .14s, transform .12s, background .12s; box-shadow:none; height:38px; width:38px; display:inline-flex; align-items:center; justify-content:center; outline:none; margin:0 2px; }
.auth-switch-btn:hover { transform:scale(1.05); box-shadow:0 0 8px rgba(26, 115, 232, 0.4); background:rgba(26, 115, 232, 0.1); }
.auth-switch-btn:focus { outline:none; }
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#0a0a0a; }
.login-card { background:#1a1a1a; border-radius:24px; padding:48px; box-shadow:0 2px 24px rgba(0,0,0,0.5); max-width:400px; width:100%; border:1px solid #2a2a2a; }
.login-title { font-size:2rem; font-weight:900; color:#fafafa; margin-bottom:8px; text-align:center; }
.login-subtitle { font-size:1rem; color:#7a7a7a; margin-bottom:32px; text-align:center; }
.login-form { display:flex; flex-direction:column; gap:16px; }
.login-input { padding:14px 16px; border:1.5px solid #3a3a3a; border-radius:12px; font-size:16px; outline:none; transition:border .13s, box-shadow .11s; background:#0a0a0a; color:#fafafa; box-sizing:border-box; width:100%; }
.login-input:focus { border:2.2px solid #6ab1f9; box-shadow:0 0 0 2.2px rgba(106,181,249,0.3); background:#1a1a1a; }
.login-error { color:#e90a29; font-size:14px; margin-top:-8px; }
.login-btn { background:#24cd7b; color:#fff; border:none; padding:14px 24px; border-radius:12px; font-weight:800; font-size:17px; cursor:pointer; transition:background .14s, transform .12s, box-shadow .15s; box-shadow:0 3px 13px -5px rgba(26,205,123,0.3); }
.login-btn:hover { background:#15b45a; transform:scale(1.02) translateY(-1px); box-shadow:0 6px 22px 0 rgba(49,225,154,0.4); }
.login-btn:active { transform:scale(1); }
.logout-btn { background:transparent; color:#7a7a7a; border:1.5px solid #3a3a3a; padding:8px 16px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; transition:background .14s, color .14s; margin-left:auto; }
.logout-btn:hover { background:rgba(233,10,41,0.2); color:#e90a29; border-color:#ff6a7c; }
.conference-codes-container { background-color:#1a1a1a!important; border:1px solid #2a2a2a!important; }
.conference-codes-container > div { background-color:rgba(26, 115, 232, 0.1)!important; border:1px solid rgba(26, 115, 232, 0.2)!important; color:#fafafa!important; }