:root {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #f5f8f3;
  font-synthesis: none;
  line-height: 1.45;
  --khomp-green: #377243;
  --khomp-lime: #a0c626;
  --khomp-olive: #4e6012;
  --khomp-mint: #cbf9d5;
  --khomp-pale-lime: #ecffaf;
  --ink: #18261d;
  --muted: #46584c;
  --border: #dae5d9;
  --dark: #14281b;
  --dark-raised: #253f2c;
  --light-green: #edf5e9;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--khomp-green); outline-offset: 3px; }
.phone :focus-visible { outline-color: var(--khomp-lime); }
.frame { width: min(100% - 3rem, 67rem); margin: 0 auto; }

.masthead { background: #fff; border-bottom: 1px solid var(--border); }
.masthead-inner { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.brand-logo { display: block; width: clamp(6.8rem, 30vw, 9rem); height: auto; }
.section-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: 0.75rem; }
.header-tag svg { width: 1rem; height: 1rem; }
.header-tag { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--khomp-olive); background: var(--khomp-pale-lime); font-size: 0.82rem; border: 1px solid var(--border); padding: 0.35rem 0.65rem; border-radius: 1rem; white-space: nowrap; }

.hero { padding: 2.8rem 0 1.65rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.eyebrow, .kicker { font-size: 0.67rem; font-weight: 750; letter-spacing: 0.14em; margin: 0 0 0.25rem; color: var(--khomp-green); }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; }
.eyebrow span { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--khomp-lime); }
h1 { margin: 0.35rem 0 0.3rem; font-size: clamp(2.1rem, 5vw, 3.45rem); line-height: 1.02; letter-spacing: -0.055em; }
h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.035em; }
.intro { color: var(--muted); margin: 0.65rem 0 0; }
.badge { color: #3d5143; background: #e7efe5; font-size: 0.82rem; font-weight: 700; padding: 0.52rem 0.8rem; border-radius: 1.25rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.45rem; }
.badge::before { content: ""; width: 0.52rem; height: 0.52rem; border-radius: 50%; background: currentColor; }
.badge[data-tone="good"] { color: var(--khomp-green); background: var(--khomp-mint); }
.badge[data-tone="pending"] { color: #5f4900; background: #faedc3; }
.badge[data-tone="error"] { color: #882b3a; background: #f9e2e8; }

.layout { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); gap: 1.25rem; align-items: start; }
.sidebar { display: grid; gap: 1.25rem; min-width: 0; }
.card { border-radius: 1.2rem; padding: 1.5rem; border: 1px solid var(--border); box-shadow: 0 14px 30px #243a2a0a; min-width: 0; }
.surface { background: #fff; }
.section-title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.surface .section-icon { background: var(--light-green); color: var(--khomp-green); }

.phone { background: linear-gradient(145deg, #23442c, var(--dark) 64%); border-color: #32503a; color: #f7fbf4; }
.phone .kicker { color: #c5dac3; }
.phone .section-icon { background: #33573a; color: #d8efa4; }
.phone-top { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; }
.media-status { border: 1px solid #708d75; border-radius: 1rem; color: #e0eddb; font-size: 0.73rem; padding: 0.3rem 0.55rem; white-space: nowrap; }
.media-status[data-tone="good"] { color: #d8efa4; }
.media-status[data-tone="error"] { color: #ffc8d4; }
.call-status { margin-top: 1rem; padding: 0.7rem 0.8rem; background: var(--dark-raised); border: 1px solid #708d75; border-radius: 0.65rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; color: #edf6e9; font-size: 0.86rem; }
.call-status[data-tone="incoming"] { color: #e1f4b6; border-color: var(--khomp-lime); }
.dial-form { margin-top: 1.45rem; }
.dial-form > label { color: #d6e7d2; margin-bottom: 0.4rem; display: block; font-size: 0.85rem; font-weight: 650; }
.dial-input { display: flex; align-items: stretch; min-width: 0; gap: 0.5rem; }
input { min-height: 2.7rem; width: 100%; min-width: 0; background: #fff; border: 1px solid #a5b7a3; border-radius: 0.55rem; padding: 0.55rem 0.7rem; color: var(--ink); }
input:disabled { background: #f0f4ef; color: var(--muted); }
.dial-input input { flex: 1 1 auto; background: #112016; border-color: #708d75; color: white; font-size: 1.15rem; letter-spacing: 0.04em; min-height: 3.2rem; }
.dial-input input::placeholder { color: #b9cdb6; font-size: 0.95rem; letter-spacing: 0; }
.icon-button { flex: 0 0 3.15rem; display: grid; place-items: center; border: 1px solid #708d75; background: var(--dark-raised); color: #e0eddb; border-radius: 0.55rem; }
.keypad { margin: 0.85rem 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.keypad button { color: white; background: var(--dark-raised); border: 1px solid #708d75; border-radius: 0.64rem; font-size: 1.35rem; font-weight: 700; line-height: 1.05; min-height: 3.35rem; display: grid; align-content: center; justify-items: center; gap: 0.2rem; }
.keypad button span { font-size: 0.55rem; letter-spacing: 0.12em; color: #c3d9c1; }
.keypad button:hover:enabled, .icon-button:hover:enabled { background: #3c5c43; }
.keypad button:active:enabled, .icon-button:active:enabled { transform: translateY(1px); }
.keypad button:disabled, .icon-button:disabled { opacity: 0.62; }
.call-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.call-actions > button { flex: 1 0 8rem; }
.button { min-height: 2.75rem; padding: 0.6rem 0.85rem; border-radius: 0.58rem; border: 1px solid transparent; display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.9rem; }
.button:disabled { opacity: 0.56; }
.call-button { color: #172309; background: var(--khomp-lime); }
.call-button:hover:enabled { background: #bad94a; }
.end-button { color: #4e0d20; background: #ffbbc7; }
.end-button:hover:enabled { background: #ffd1d9; }
.mute-button, .audio-button { color: #edf6e9; background: var(--dark-raised); border-color: #708d75; }
.mute-button:hover:enabled, .audio-button:hover:enabled { background: #3c5c43; }
.mute-button[aria-pressed="true"] { color: #fff0c3; border-color: #e7ca7d; }
.audio-button { margin-top: 0.6rem; width: 100%; }
.phone-note { color: #c9dbc6; font-size: 0.82rem; margin: 0.9rem 0 0; }

.profile-status { color: var(--muted); margin: 0.85rem 0; font-size: 0.87rem; }
.profile-details { display: grid; gap: 0.5rem; margin: 0.75rem 0; padding: 0.65rem 0.85rem; background: var(--light-green); border: 1px solid var(--border); border-radius: 0.65rem; }
.profile-details > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.4rem; align-items: baseline; font-size: 0.79rem; }
.profile-details dt { color: var(--muted); font-weight: 650; }
.profile-details dd { margin: 0; overflow-wrap: anywhere; }
#account-fields { border: 0; min-width: 0; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.account-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.65rem; }
#account-fields label { display: flex; flex-wrap: wrap; align-content: start; column-gap: 0.25rem; font-size: 0.82rem; font-weight: 650; }
#account-fields label span { font-weight: 400; color: var(--muted); }
#account-fields input { margin-top: 0.3rem; font-weight: 400; }
.account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.primary-button { background: var(--khomp-green); color: #fff; }
.primary-button:hover:enabled { background: #295632; }
.secondary-button { background: #fff; border-color: #a5b7a3; color: #295632; }
.secondary-button:hover:enabled { background: var(--light-green); }

.activity-empty { color: var(--muted); font-size: 0.86rem; margin: 0.95rem 0 0; }
.activity { list-style: none; padding: 0; margin: 0.85rem 0 0; max-height: 11rem; overflow: auto; }
.activity:empty { margin: 0; }
.activity li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.8rem; border-top: 1px solid var(--border); padding: 0.55rem 0; }
.activity time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.activity li span { overflow-wrap: anywhere; }
.activity li[data-tone="error"] span { color: #852c3c; }
footer { color: var(--muted); font-size: 0.78rem; margin: 1.15rem 0 1.6rem; }
footer span { margin: 0 0.25rem; }

@media (max-width: 49rem) {
  .frame { width: min(100% - 1.8rem, 36rem); }
  .hero { align-items: start; flex-direction: column; padding-top: 1.85rem; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { order: -1; display: contents; }
  .sidebar > section:first-child { order: -1; }
}

@media (max-width: 24rem) {
  .card { padding: 1rem; }
  .account-grid { grid-template-columns: 1fr; }
  .profile-details > div { grid-template-columns: 1fr; gap: 0.05rem; }
  .activity li { gap: 0.45rem; }
}