/* Naghma V180 — additive responsive improvements for iPhone/iPad/Android & desktop */
.naghma-version-label {display:inline-flex;align-items:center;vertical-align:middle;border:1px solid #634d94;border-radius:9px;padding:3px 9px;background:#34244c;color:#e7d6ff;font-size:11px;white-space:nowrap;font-weight:700;line-height:1.5}
.n180-tools {margin:12px 0 18px;padding:16px;background:#151326;border:1px solid #54416d;border-radius:14px;min-width:0;color:#dbcefc}
.n180-tools .n180-actions {display:flex;flex-wrap:wrap;gap:10px}
.n180-tools button {touch-action:manipulation;min-height:44px;border:1px solid #7d60b0;background:#33264a;color:#f4eaff;border-radius:10px;padding:10px 14px;font:inherit;font-weight:650;cursor:pointer}
.n180-tools button:hover,.n180-tools button:focus-visible {border-color:#ceb2ff;background:#493264;outline-offset:2px}
.n180-tools small {display:block;color:#aaa5c2;margin-top:10px;font-size:12px;line-height:1.7}
.n180-tools #n180-status {margin:12px 0 6px;overflow-wrap:anywhere;color:#d0b8ff;font-size:13px}
.n180-tools #n180-status.is-error {color:#ffb0bb}
.n180-options {margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.n180-options[hidden] {display:none!important}
.n180-options > span {display:flex;flex-wrap:wrap;gap:6px}
.n180-options b {font-size:12px}
.n180-tools .n180-choice {min-height:40px;padding:8px 12px;font-size:13px}
html {text-size-adjust:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body {width:100%;max-width:100%;overflow-x:hidden}
.main,.panel,.preview,.source-grid,.form-box,.dual,.meter-grid,.meter,.tip,.nav,.youtube,.footer-line,.auth {min-width:0;max-width:100%}
.main {width:100%}
input,textarea,select {max-width:100%;min-width:0}
textarea {overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
button,a,label,input[type="checkbox"],input[type="radio"] {touch-action:manipulation}
.modes .mode:focus-within {outline:2px solid #b999ff;outline-offset:3px}
#drop {position:relative}
#drop #audio-file {display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
.url-input,.footer-line,.preview,.nav,.nav nav,.auth,.auth>div {min-width:0}
.url-input input {flex:1 1 100px}
#player {width:100%;max-width:100%;min-width:0}
[hidden] {display:none!important}
@media(max-width:1024px){
  .nav {padding:12px 18px;gap:10px}
  .nav nav,.nav .auth {gap:8px;flex-wrap:wrap}
  .main {padding-inline:16px}
  .hero {padding-block:35px 16px}
  .hero h1 {font-size:clamp(28px,5vw,46px)}
  .source-grid,.dual {grid-template-columns:repeat(2,minmax(0,1fr))}
  .modes {grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel {padding:20px}
}
@media(max-width:760px){
  .nav {justify-content:space-between;gap:8px;flex-wrap:wrap}
  .nav .logo {font-size:22px;gap:4px}
  .nav .logo em {display:none}
  .nav nav {order:3;width:100%;justify-content:center;gap:16px;border-top:1px solid #ffffff18;padding-top:7px}
  .nav .auth {margin-inline-start:auto;gap:5px;max-width:100%;min-width:0}
  .nav .auth a,.nav .auth button {font-size:12px;min-height:42px;padding:8px 10px;white-space:normal}
  .main {padding-inline:12px}
  .hero {padding:26px 0 12px}
  .hero h1 {font-size:clamp(25px,7vw,38px);overflow-wrap:anywhere}
  .hero p {font-size:14px;line-height:1.75}
  .steps {gap:5px;margin:10px 0 18px}
  .steps span {font-size:11px;padding:6px 10px}
  .panel {padding:15px;border-radius:16px;margin-bottom:16px}
  .p-head {flex-direction:column;align-items:stretch;gap:8px}
  .p-head>div {flex-wrap:wrap;gap:10px}
  .p-head h2 {font-size:19px}
  .source-grid,.meter-grid,.dual {grid-template-columns:minmax(0,1fr);gap:12px}
  .source-grid .upload,.source-grid .youtube {min-height:185px;padding:15px}
  .source-grid b {font-size:17px}
  .preview {flex-direction:column;align-items:stretch}
  .preview audio {width:100%;max-width:100%}
  .preview a {min-height:44px;display:grid;place-items:center}
  .meter input,.url-input input,.form-box textarea {font-size:16px}
  .form-box {padding:12px}
  .form-head {flex-wrap:wrap}
  .form-head h3 {margin:5px 0;font-size:16px}
  .form-box textarea {min-height:160px}
  .tip {flex-direction:column;align-items:flex-start}
  .tip a {min-height:44px;padding:8px 0}
  .footer-line {flex-direction:column;align-items:stretch}
  .footer-line .primary {width:100%;min-height:48px}
  .n180-tools {padding:12px}
  .n180-actions {flex-direction:column}
  .n180-actions button {width:100%}
  .rights {align-items:flex-start}
  footer {padding-bottom:max(28px,env(safe-area-inset-bottom))}
}
@media(max-width:430px){
  .nav .logo {font-size:20px}
  .naghma-version-label {font-size:10px;padding:2px 6px}
  .nav .auth a,.nav .auth button {font-size:11px;padding:7px 8px}
  .modes {grid-template-columns:minmax(0,1fr);gap:9px}
  .source-grid .url-input {flex-direction:column}
  .url-input input,.url-input button {width:100%;min-height:46px}
  .steps {justify-content:stretch}
  .steps span {flex:1 1 100px;text-align:center}
}
@media(prefers-reduced-motion:reduce){html {scroll-behavior:auto}* {transition-duration:0.01ms!important;animation-duration:0.01ms!important}}