/* CYF Phantom v4 shared UI-only responsive stylesheet.
   Scope: spacing, sizing, touch targets, overflow, readability.
   Does not change artwork, color theme, branding, navigation or trading logic. */
html{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{max-width:100%}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px}
.cyf-phantom .shell,.cyf-dashboard .app-container{min-width:0;max-width:100%}
.cyf-phantom .view,.cyf-phantom .desktop,.cyf-phantom .grid,.cyf-phantom .panel,.cyf-phantom .row,.cyf-phantom .market-row,.cyf-phantom .form-grid,.cyf-phantom .two{min-width:0}
.cyf-phantom .panel,.cyf-phantom .view{overflow-wrap:anywhere}
.cyf-phantom .row>*,.cyf-phantom .market-row>*{min-width:0}
.cyf-phantom .grid,.cyf-phantom .desktop{gap:10px}
.cyf-phantom .panel{padding:15px}
.cyf-phantom .intro{margin:2px 0 12px}
.cyf-phantom .top{padding:5px 0 14px}
.cyf-phantom .actions{gap:7px;margin:11px 0}
.cyf-phantom .action{padding:11px 3px;min-height:52px}
.cyf-phantom .section-title{margin-bottom:9px}
.cyf-phantom .field{margin:9px 0}
.cyf-phantom .tabs{margin:10px 0}
.cyf-phantom .chat{min-height:96px}
.cyf-dashboard .page-view,.cyf-dashboard .cyf-panel,.cyf-dashboard .dashboard-row-top,.cyf-dashboard .dashboard-row-middle,.cyf-dashboard .trading-3col-grid{min-width:0;max-width:100%}
.cyf-dashboard .cyf-panel{min-height:0;padding:16px}
.cyf-dashboard .modal-overlay{overflow-x:hidden}
.cyf-dashboard .modal-window,.cyf-dashboard .modal-body,.cyf-dashboard .plans-grid,.cyf-dashboard .plan-card{min-width:0}
.cyf-dashboard .modal-body{gap:10px}
.cyf-dashboard .plans-grid{gap:10px;margin-top:2px}
.cyf-dashboard .plan-card{padding:14px;gap:7px}
.cyf-dashboard .modal-header{padding:13px 16px}
.cyf-dashboard .modal-body{padding:14px 16px}
@media(max-width:600px){
 .cyf-phantom .shell{padding:10px 11px calc(88px + env(safe-area-inset-bottom))}
 .cyf-phantom .top{gap:8px;padding:3px 0 10px}
 .cyf-phantom .brand{font-size:17px}
 .cyf-phantom .pill{font-size:10px;padding:7px 9px}
 .cyf-phantom h1{font-size:25px}
 .cyf-phantom .grid,.cyf-phantom .desktop{gap:9px}
 .cyf-phantom .panel{padding:12px;border-radius:15px}
 .cyf-phantom .actions{gap:6px;margin:9px 0}
 .cyf-phantom .action{border-radius:12px;padding:10px 2px}
 .cyf-phantom .market-row{gap:7px;padding:9px 0}
 .cyf-phantom .form-grid,.cyf-phantom .two{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cyf-phantom .bottom .nav{min-width:0}
 .cyf-dashboard .page-view{padding:10px 10px 88px!important}
 .cyf-dashboard .cyf-panel{padding:12px}
 .cyf-dashboard .modal-header{padding:10px 13px}
 .cyf-dashboard .modal-body{padding:11px 13px;gap:8px}
 .cyf-dashboard .plan-card{padding:10px 12px;gap:5px}
 .cyf-dashboard .plans-grid{gap:8px}
}
@media(min-width:760px){
 .cyf-phantom .panel{padding:19px}
 .cyf-phantom .shell{padding-top:20px}
}


/* Mobile and tablet: use a true single-column reading order. The old 760px
   desktop breakpoint was too low for iPhone Safari's wider CSS viewports. */
@media(max-width:1100px){
 .cyf-phantom .desktop,.cyf-phantom .grid{grid-template-columns:minmax(0,1fr)!important}
 .cyf-phantom .desktop>*{grid-column:auto!important;min-width:0}
 .cyf-phantom .shell{max-width:680px;padding-left:14px;padding-right:14px}
 .cyf-phantom .panel{width:100%;min-width:0}
 .cyf-phantom .row,.cyf-phantom .market-row{max-width:100%}
 .cyf-phantom .actions{grid-template-columns:repeat(4,minmax(0,1fr))}
 .cyf-phantom .form-grid,.cyf-phantom .two{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cyf-dashboard .dashboard-row-top,.cyf-dashboard .dashboard-row-middle,.cyf-dashboard .trading-3col-grid{grid-template-columns:minmax(0,1fr)!important}
 .cyf-dashboard .ai-promo-card,.cyf-dashboard .trading-right-col{grid-column:auto!important}
 .cyf-dashboard .plans-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:440px){
 .cyf-phantom .shell{padding-left:10px;padding-right:10px}
 .cyf-phantom .actions{gap:5px}
 .cyf-phantom .action{font-size:10px;overflow-wrap:anywhere}
 .cyf-phantom .form-grid,.cyf-phantom .two{grid-template-columns:minmax(0,1fr)}
 .cyf-phantom .market-row{grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
 .cyf-phantom .nav{min-width:0}
 .cyf-dashboard .modal-window{width:100%;max-width:100%}
}