*{margin:0;padding:0;box-sizing:border-box}:root{--black:#000000;--white:#ffffff;--gray:#666666;--light-gray:#eeeeee;--border-color:#cccccc;--accent:#FF8800}body,html{font-family:"Courier New",Consolas,monospace;background:var(--white);color:var(--black);height:100%;overflow:hidden;user-select:none}.page{display:none;height:100%;flex-direction:column}.page.active{display:flex}.theme-toggle{display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none}.theme-label-left,.theme-label-right{font-size:10px;font-weight:600;color:var(--gray)}.theme-toggle-track{width:32px;height:18px;background:var(--light-gray);border:1px solid var(--border-color);border-radius:9px;position:relative;transition:background .2s,border-color .2s}.theme-toggle-thumb{width:14px;height:14px;background:var(--black);border-radius:50%;position:absolute;top:1px;left:1px;transition:transform .2s,background .2s}.theme-toggle.color-mode .theme-toggle-track{background:var(--accent);border-color:var(--accent)}.theme-toggle.color-mode .theme-toggle-thumb{transform:translateX(14px);background:var(--white)}.theme-toggle.color-mode .theme-label-left{color:var(--gray)}.theme-toggle.color-mode .theme-label-right{color:var(--white)}body.color-mode{background:var(--black);color:var(--white)}body.color-mode .top-bar{border-bottom-color:#333}body.color-mode .top-bar{color:var(--white)}body.color-mode .icon-btn{color:var(--white)}body.color-mode .theme-toggle .theme-label-left{color:#888}body.color-mode .theme-toggle .theme-label-right{color:var(--white)}body.color-mode .theme-toggle-track{border-color:#555}body.color-mode .connection-text{color:var(--white)}body.color-mode .version-text{color:#999}body.color-mode .datetime-text{color:#999}body.color-mode .filter-info{color:#ccc}body.color-mode .filter-icon,body.color-mode .footer-icon,body.color-mode .info-icon,body.color-mode .signal-icon{filter:invert(1)}body.color-mode .callsign{color:var(--accent)}body.color-mode .callsign-badge{background:var(--white);color:var(--black)}body.color-mode .server-badge{background:var(--accent);color:var(--black)}body.color-mode .info-row{color:var(--white)}body.color-mode .footer-row{color:#999}body.color-mode .credit-text{color:#999}body.color-mode .settings-header{border-bottom-color:#333}body.color-mode .back-btn{color:var(--white)}body.color-mode .settings-title{color:var(--white)}body.color-mode .form-group label{color:var(--white)}body.color-mode .form-group input{background:#222;color:var(--white);border-color:#444}body.color-mode .form-group input:focus{border-color:var(--accent)}body.color-mode .form-hint{color:#888}body.color-mode .save-btn{background:var(--accent);color:var(--black)}body.color-mode .save-btn:active{background:#cc7000}body.color-mode .save-status.success{background:var(--accent);color:var(--black)}body.color-mode .settings-section{border-bottom-color:#333}body.color-mode .section-title{color:var(--white)}body.color-mode .protocol-select{background:#222;color:var(--white);border-color:#444}body.color-mode .connection-status{background:#1a1a1a}body.color-mode .status-label{color:#888}body.color-mode .status-value{color:var(--white)}body.color-mode .modal-content{background:#1a1a1a}body.color-mode .modal-header{border-bottom-color:#333;color:var(--white)}body.color-mode .modal-close{color:var(--white)}body.color-mode .server-item{color:var(--white)}body.color-mode .server-item:active{background:#333}body.color-mode .server-item.active{background:var(--accent);color:var(--black)}body.color-mode .server-list-empty{color:#888}body.color-mode .qso-item{color:var(--white);border-bottom-color:#333}body.color-mode .qso-item-logid{color:#888}body.color-mode .qso-item-time{color:#888}body.color-mode .qso-item-grid{color:#888}body.color-mode .coffee-tip{color:#999}body.color-mode .coffee-img-item img{border-color:#444}body.color-mode .landscape-settings-btn{color:var(--white);background:rgba(255,255,255,.1)}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font-size:13px;border-bottom:1px solid var(--border-color);flex-shrink:0}.top-controls{display:flex;align-items:center;gap:8px}.icon-btn{background:0 0;border:none;color:var(--black);cursor:pointer;padding:4px;display:flex;align-items:center}.icon-btn:active{opacity:.5}.main-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px 12px;gap:16px}.top-row{display:flex;align-items:flex-end;width:100%;max-width:650px;gap:8px}.signal-indicator{flex:1;display:flex;align-items:flex-start;gap:8px;min-width:0}.signal-icon{width:40px;height:40px;flex-shrink:0}.signal-text{display:flex;flex-direction:column;gap:2px}.connection-row{display:flex;align-items:baseline;gap:4px}.connection-text{font-size:16px;font-weight:600;color:var(--black)}.version-text{font-size:10px;font-weight:400;color:var(--gray)}.datetime-text{font-size:16px;font-weight:600;color:var(--gray)}.filter-info{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:14px;font-weight:600;color:var(--gray);padding-bottom:2px;overflow:hidden;min-width:0}.filter-group{display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}.filter-icon{width:20px;height:20px}.callsign-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:650px}.callsign-group{width:50%;display:flex;align-items:flex-start;gap:6px;min-width:0;overflow:hidden}.callsign{font-size:60px;font-weight:700;letter-spacing:3px;line-height:1.1;color:var(--black);text-align:left;white-space:nowrap;min-width:0}.callsign-badge{display:none;font-size:12px;font-weight:700;padding:2px 6px;border-radius:3px;background:var(--black);color:var(--white);vertical-align:top;line-height:1.4;flex-shrink:0;position:relative;z-index:2}.callsign-badge.visible{display:inline-block}.server-badge{width:50%;flex-shrink:0;font-size:36px;overflow:hidden;min-width:0;font-weight:700;padding:10px 24px;background:var(--black);color:var(--white);border-radius:4px;white-space:nowrap;text-align:center;cursor:pointer}.info-row{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:650px;font-size:18px;font-weight:600;letter-spacing:1px;color:var(--black)}.info-item{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}.info-item.clickable{cursor:pointer}.info-item.clickable:active{opacity:.5}.info-icon{flex-shrink:0;width:24px;height:24px}.footer-row{display:flex;align-items:center;justify-content:flex-start;width:100%;max-width:650px;gap:6px;font-size:11px;font-weight:600;color:var(--gray)}.footer-icon{width:14px;height:14px;flex-shrink:0}.footer-text{letter-spacing:.5px}.credit-text{font-size:10px;color:var(--gray);letter-spacing:.5px;margin-left:auto;display:flex;align-items:center;gap:3px}.credit-icon{width:10px;height:10px;opacity:.5}.settings-header{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-color);flex-shrink:0;gap:12px}.back-btn{background:0 0;border:none;color:var(--black);cursor:pointer;padding:4px;display:flex;align-items:center}.settings-title{font-size:18px;font-weight:700;color:var(--black)}.settings-body{flex:1;padding:16px;overflow-y:auto}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;color:var(--black)}.form-group input{width:100%;padding:10px 12px;font-size:16px;font-family:"Courier New",monospace;background:var(--white);color:var(--black);border:1px solid var(--border-color);border-radius:2px;outline:0}.form-group input:focus{border-color:var(--black)}.form-hint{font-size:11px;color:var(--gray);margin-top:4px}.save-btn{width:100%;padding:12px;font-size:16px;font-weight:700;font-family:"Courier New",monospace;background:var(--black);color:var(--white);border:none;border-radius:2px;cursor:pointer}.save-btn:active{background:var(--gray)}.save-status{margin-top:12px;padding:10px;text-align:center;font-size:13px;border-radius:2px}.save-status.hidden{display:none}.save-status.success{background:var(--black);color:var(--white)}.save-status.error{border:1px solid var(--black);color:var(--black)}.save-status.info{background:var(--light-gray);border:1px solid var(--border-color);color:var(--gray)}.settings-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.settings-section:last-of-type{border-bottom:none}.section-title{font-size:14px;font-weight:700;color:var(--black);margin-bottom:16px;letter-spacing:1px}.protocol-select{width:100%;padding:10px 12px;font-size:16px;font-family:"Courier New",monospace;background:var(--white);color:var(--black);border:1px solid var(--border-color);border-radius:2px;outline:0;cursor:pointer}.protocol-select:focus{border-color:var(--black)}.connection-status{background:var(--light-gray);padding:12px;border-radius:4px}.status-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}.status-label{font-size:13px;color:var(--gray)}.status-value{font-size:13px;font-weight:700;color:var(--black)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gray)}.status-dot.connected{background:#22c55e}.status-dot.connecting{animation:blink .8s ease-in-out infinite;background:#eab308}@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}body.fullscreen .top-bar{display:none}@media (max-width:768px){.icon-btn{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.icon-btn:active{opacity:.6;transform:scale(.95);transition:opacity .1s,transform .1s}.top-controls{gap:12px}}@media (max-width:480px){.callsign{font-size:40px}.callsign-badge{font-size:10px;padding:1px 4px}.server-badge{font-size:24px;padding:6px 14px}.top-bar{font-size:11px}.freq-line{font-size:14px}.info-row{font-size:16px}.signal-icon{width:36px;height:36px}.info-icon{width:20px;height:20px}.connection-text,.datetime-text{font-size:14px}}@media (orientation:landscape) and (max-height:500px){.top-bar{display:none}.page{height:100vh}.main-center{padding:8px 16px;gap:8px}}@media (orientation:landscape) and (min-width:900px) and (max-height:500px){.callsign{font-size:56px}.server-badge{font-size:32px}.info-row{font-size:16px}}.landscape-settings-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.1);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;color:var(--black);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.landscape-settings-btn:active{opacity:.6;transform:scale(.95);transition:opacity .1s,transform .1s}@media (orientation:portrait){.landscape-settings-btn{display:none}}@media (orientation:landscape) and (min-height:501px){.landscape-settings-btn{display:none}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center}.modal.hidden{display:none}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)}.modal-content{position:relative;background:var(--white);border-radius:4px;width:90%;max-width:400px;max-height:80vh;display:flex;flex-direction:column;z-index:1001}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-color);font-size:16px;font-weight:700;color:var(--black)}.modal-close{background:0 0;border:none;font-size:24px;color:var(--black);cursor:pointer;padding:0;line-height:1}.modal-close:active{opacity:.5}.modal-body{flex:1;overflow-y:auto;padding:8px 0}.server-item{display:flex;align-items:center;padding:12px 16px;font-size:16px;font-weight:600;color:var(--black);cursor:pointer;transition:background .15s}.server-item:active{background:var(--light-gray)}.server-item.active{background:var(--black);color:var(--white)}.server-item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.server-item-check{margin-left:8px;font-size:18px}.server-list-empty{padding:16px;text-align:center;color:var(--gray)}.qso-item{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--border-color);font-size:13px;font-weight:600;color:var(--black);white-space:nowrap}.qso-item:last-child{border-bottom:none}.qso-item-logid{color:var(--gray);font-size:12px;flex-shrink:0}.qso-item-callsign{font-weight:700;flex-shrink:0}.qso-item-grid{color:var(--gray);flex-shrink:0}.qso-item-time{margin-left:auto;color:var(--gray);font-size:12px;flex-shrink:0}@media (max-width:480px){.modal-content{width:95%;max-height:70vh}.server-item{padding:14px 16px;font-size:18px}.qso-item{padding:12px 16px}.qso-item{padding:10px 16px;font-size:14px}}.coffee-modal-content{max-width:360px}.coffee-modal-body{display:flex;flex-direction:column;align-items:center;padding:16px;gap:16px}.coffee-tip{font-size:14px;font-weight:600;color:var(--gray);text-align:center}.coffee-images{display:flex;gap:16px;justify-content:center}.coffee-img-item{flex:1;max-width:140px}.coffee-img-item img{width:100%;height:auto;border-radius:4px;border:1px solid var(--border-color)}@media (max-width:480px){.coffee-modal-content{width:90%;max-width:none}.coffee-images{gap:12px}.coffee-img-item{max-width:120px}}