/* public/css/styles.css */
:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #f7f7f9; color: #222; }
.app { max-width: 720px; margin: 24px auto; padding: 16px; }
header { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
h1 { margin: 0 16px 0 0; }
.status { margin-left: auto; font-size: 14px; opacity: 0.8; }
.controls .row { display: flex; gap: 8px; margin: 12px 0; }
.controls input { flex: 1; padding: 10px 12px; font-size: 16px; }
.controls button { padding: 10px 14px; font-size: 16px; }
.controls .compact button { padding: 8px 10px; font-size: 14px; }
.keypad .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 16px; }
.keypad button { padding: 14px 0; font-size: 18px; }
.log pre { background: #fff; border: 1px solid #e8e8ef; padding: 12px; border-radius: 8px; height: 220px; overflow: auto; }
.incoming-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999}
.incoming-card{width:min(420px,92vw);background:#101114;color:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4);overflow:hidden}
.incoming-head{padding:18px 20px;background:#181a1f}
.incoming-title{font-size:16px;color:#aab1c3;margin:0 0 6px}
.incoming-from{font-size:20px;font-weight:600;word-break:break-all}
.incoming-body{padding:18px 20px;display:flex;gap:12px;flex-wrap:wrap}
.incoming-btn{flex:1 1 140px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;border:none;border-radius:12px;font-size:16px;cursor:pointer}
.incoming-accept{background:#2ecc71;color:#0b2b17}
.incoming-reject{background:#ff5c5c;color:#3a0d0d}
.incoming-btn svg{width:20px;height:20px}
.enable-sound{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:10000;background:#111;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.35);display:none;gap:10px;align-items:center}
.enable-sound button{background:#2ecc71;color:#0b2b17;border:0;border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer}