/* Clean neutral theme with left-side tabs panel - Primary color darkened for contrast - Inputs have explicit gray borders - Buttons visible and high-contrast - Mobile-friendly adjustments */
:root{
  --primary: #374151;
  --primary-hover: #1f2937;
  --success: #16a34a;
  --success-hover: #15803d;
  --danger: #ef4444;
  --warning: #d97706;
  --dark: #1f2937;
  --muted: #475569;
  --light: #f8fafc;
  --border: #e6eef6;
  --input-border: #9ca3af;
  --shadow: 0 6px 18px rgba(16,24,40,0.06);
  --page-bg: linear-gradient(180deg,#f8fafc 0%,#f3f4f6 100%);
  --card-bg: #ffffff;
  --panel-bg: #f8fafc;
  --input-bg: #ffffff;
  --tab-hover-bg: #eef2f7;
}
:root[data-theme="dark"]{
  --primary: #9ca3af;
  --primary-hover: #6b7280;
  --success: #34d399;
  --success-hover: #059669;
  --danger: #f87171;
  --warning: #fbbf24;
  --dark: #e2e8f0;
  --muted: #94a3b8;
  --light: #1a1c20;
  --border: rgba(148,163,184,0.35);
  --input-border: rgba(148,163,184,0.4);
  --shadow: 0 12px 30px rgba(0,0,0,0.55);
  --page-bg: linear-gradient(180deg,#1d222c 0%,#121622 100%);
  --card-bg: #282d35;
  --panel-bg: #181b24;
  --input-bg: #171a22;
  --tab-hover-bg: rgba(148,163,184,0.25);
}
.theme-toggle{
 width:40px;
 height:40px;
 border-radius:50%;
 border:1px solid var(--border);
 background:var(--card-bg);
 color:var(--dark);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.1rem;
 cursor:pointer;
 transition:background .2s,color .2s,border-color .2s
}
[data-theme="dark"] .theme-toggle{
 background:#0b1527;
 color:#f8fafc;
 border-color:rgba(148,163,184,0.4)
}
*{
 box-sizing:border-box;
 margin:0;
 padding:0
}
body{
 /* font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; */
 font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 background:var(--page-bg);
 background-color:var(--panel-bg);
 color:var(--dark);
 min-height:100vh;
 padding:16px;
 transition:background .25s ease,color .25s ease
}
.container{
 max-width:1100px;
 margin:0 auto
}
header{
 text-align:center;
 color:var(--dark);
 margin-bottom:18px
}
header h1{
 font-size:1.9rem;
 margin-bottom:6px
}
header p{
 color:var(--muted);
 font-size:0.95rem
}
main{
 background:var(--card-bg);
 border-radius:12px;
 box-shadow:var(--shadow);
 overflow:hidden;
 display:flex;
 align-items:stretch
}
/* Left panel */
.tabs-nav{
 display:flex;
 flex-direction:column;
 width:220px;
 min-width:160px;
 border-right:1px solid var(--border);
 background:var(--panel-bg);
 padding:12px 10px;
 gap:8px
}
.tab-btn{
 width:100%;
 padding:10px 14px;
 border:0;
 background:transparent;
 cursor:pointer;
 font-size:0.98rem;
 font-weight:600;
 color:var(--primary);
 border-radius:8px;
 display:flex;
 align-items:center;
 gap:10px;
 justify-content:flex-start;
 transition:background .15s,color .15s,transform .08s
}
.tab-btn .tab-icon{
 font-size:1.05rem
}
.tab-btn:hover{
 background:var(--tab-hover-bg);
 color:var(--primary-hover);
 transform:translateY(-1px)
}
.tab-btn.active{
 background:linear-gradient(180deg,var(--primary) 0%,var(--primary-hover) 100%);
 color:#fff;
 box-shadow:0 6px 18px rgba(31,41,55,0.06);
 font-weight:700
}
.tab-btn.active .tab-icon{
 color:#fff
}
/* Content */
.content-area{
 flex:1;
 padding:22px 26px
}
.tab-content{
 display:none
}
.tab-content.active{
 display:block
}
/* Forms */
.form-container{
 max-width:100%
}
.form-row-2col{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:20px;
 margin-bottom:20px
}
.form-row{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:15px
}
label{
 display:block;
 margin-bottom:8px;
 font-weight:600;
 color:var(--dark)
}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea{
 width:100%;
 padding:10px 12px;
 border:1px solid var(--input-border);
 border-radius:6px;
 font-size:1rem;
 background:var(--input-bg);
 color:var(--dark);
 transition:box-shadow .12s,border-color .12s,background .12s,color .12s
}
input:focus,select:focus,textarea:focus{
 outline:none;
 border-color:var(--primary);
 box-shadow:0 6px 18px rgba(55,65,81,0.06)
}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{
 box-shadow:0 6px 18px rgba(156,163,175,0.15)
}
::placeholder{
 color:var(--muted)
}
textarea{
 resize:vertical;
 min-height:80px;
 background:var(--input-bg);
 color:var(--dark)
}
/* Buttons */
.btn{
 padding:12px 20px;
 border-radius:8px;
 font-size:1rem;
 cursor:pointer;
 font-weight:600;
 display:inline-flex;
 align-items:center;
 gap:8px;
 border:1px solid rgba(15,23,42,0.06);
 background:var(--primary);
 color:#fff;
 margin:6px
}
.btn:hover{
 opacity:0.98
}
.btn-success{
 background:var(--success);
 color:#fff;
 border-color:rgba(16,185,129,0.08)
}
.btn-small{
 padding:10px 14px;
 font-size:1rem;
 background:var(--primary-hover);
 color:#fff;
 border-radius:8px;
 border:1px solid rgba(15,23,42,0.06);
 margin:6px
}
.btn-search{
 padding:10px 14px;
 background:var(--primary-hover);
 color:#fff;
 border-radius:6px;
 margin:6px
}
/* Lists/cards */
.link-item,.rate-item,.platform-selection-card,.result-container{
 background:var(--card-bg);
 padding:12px;
 border-radius:8px;
 margin-bottom:12px;
 border:1px solid var(--border);
 box-shadow:0 4px 10px rgba(16,24,40,0.03)
}
/* Place inputs and remove-button on one row by default */
.link-item,.rate-item{
 display:flex;
 align-items:center;
 gap:10px
}
.link-item-inputs,.rate-item-inputs{
 flex:1;
 display:flex;
 gap:10px
}
.link-item-inputs input,.rate-item-inputs input{
 flex:1
}
.link-remove,.rate-remove{
 background:var(--danger);
 color:#fff;
 border:none;
 padding:6px 8px;
 border-radius:8px;
 cursor:pointer;
 flex:0 0 auto;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:36px;
 height:36px;
 font-size:1.05rem
}
.link-remove:hover,.rate-remove:hover{
 background:#c0392b
}
/* small edit button near link input */
.link-edit{
 background:transparent;
 border:1px solid rgba(15,23,42,0.06);
 color:var(--primary);
 width:36px;
 height:36px;
 border-radius:8px;
 cursor:pointer;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 margin-right:4px
}
.link-edit:hover{
 background:var(--tab-hover-bg)
}
.suggestions-list{
 margin-top:10px;
 display:none;
 background:var(--card-bg);
 border:1px solid var(--border);
 border-radius:6px;
 max-height:300px;
 overflow-y:auto;
 box-shadow:0 4px 12px rgba(0,0,0,0.04);
 z-index:100
}
[data-theme="dark"] .suggestions-list{
 box-shadow:0 4px 12px rgba(0,0,0,0.3)
}
.suggestions-list.show{
 display:block
}
.suggestion-item{
 padding:12px 15px;
 border-bottom:1px solid #f1f5f9;
 cursor:pointer
}
.suggestion-item:hover{
 background:var(--tab-hover-bg)
}
.suggestion-platform{
 font-weight:600;
 color:var(--primary);
 font-size:0.9rem;
 margin-bottom:5px
}
.geo-suggestions{
 position:absolute;
 left:0;
 right:0;
 top:calc(100% + 6px);
 background:var(--card-bg);
 border:1px solid var(--border);
 border-radius:8px;
 box-shadow:0 10px 20px rgba(15,23,42,0.12);
 max-height:220px;
 overflow-y:auto;
 display:none;
 z-index:120
}
[data-theme="dark"] .geo-suggestions{
 box-shadow:0 10px 20px rgba(0,0,0,0.4)
}
.geo-suggestions.show{
 display:block
}
.geo-suggestion-item{
 width:100%;
 border:0;
 background:transparent;
 display:flex;
 align-items:center;
 gap:10px;
 padding:10px 12px;
 text-align:left;
 cursor:pointer
}
.geo-suggestion-item:hover{
 background:var(--tab-hover-bg)
}
.geo-code{
 font-weight:700;
 color:var(--primary);
 min-width:48px
}
.geo-names{
 display:flex;
 flex-direction:column;
 font-size:0.9rem;
 color:var(--dark)
}
.geo-name-en{
 color:var(--muted);
 font-size:0.85rem;
 margin-top:2px
}
.platform-selections{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:20px;
 margin-top:10px
}
.platform-selection-card{
 background:var(--card-bg);
 border:1px solid var(--border);
 border-radius:8px;
 padding:12px
}
.platform-selection-card.selected{
 background:linear-gradient(180deg,rgba(55,65,81,0.04) 0%, rgba(55,65,81,0.02) 100%);
 border-color:var(--primary)
}
.result-container{
 margin-top:18px;
 padding:16px;
 border-radius:8px;
 border:1px solid var(--border);
 background:var(--card-bg);
 color:var(--dark)
}
.result-info{
 background:#ecfdf5;
 border-color:rgba(16,185,129,0.12);
 color:#064e3b
}
.result-success{
 background:#ecfdf5;
 border-color:rgba(16,185,129,0.12);
 color:#064e3b
}
.result-error{
 background:#fef2f2;
 border-color:rgba(239,68,68,0.12);
 color:#7f1d1d
}
/* Spacing specific to update rates area: small gap below action buttons */
#updateRatesTab .form-actions{
 margin-bottom:12px
}
.result-content{
 max-height:300px;
 overflow-y:auto
}
.result-json{
 background:var(--card-bg);
 padding:10px;
 border-radius:4px;
 font-family:'Courier New',monospace;
 font-size:0.85rem;
 white-space:pre-wrap;
 word-break:break-word;
 margin-top:10px;
 border:1px solid var(--border)
}
#exportLinksBlock{
 background:var(--panel-bg)!important;
 border:1px solid var(--border);
 color:var(--dark)
}
#exportLinksText{
 background:var(--card-bg);
 color:var(--dark);
 border:1px solid var(--border)
}
/* Spinner */
.spinner{
 display:inline-block;
 width:28px;
 height:28px;
 border:4px solid rgba(0,0,0,0.06);
 border-top-color:var(--primary);
 border-radius:50%;
 animation:spin 1s linear infinite;
 vertical-align:middle
}
@keyframes spin{
 to{
     transform:rotate(360deg)
 }
}
/* Responsive: create slide-in side panel on small screens with hamburger toggle */
@media (max-width:900px){
  main{
     flex-direction:column
 }
  .panel-toggle{
     display:inline-flex;
     position:absolute;
     right:16px;
     top:12px;
     background:transparent;
     border:0;
     padding:8px;
     gap:4px;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     z-index:210
 }
  .panel-toggle .bar{
     display:block;
     width:22px;
     height:2.5px;
     background:var(--primary);
     border-radius:2px
 }
 /* hide native left column and position it as a hidden drawer */
  .tabs-nav{
     position:fixed;
     left:0;
     top:0;
     height:100%;
     width:260px;
     transform:translateX(-110%);
     transition:transform .25s ease;
     box-shadow:0 12px 40px rgba(2,6,23,0.2);
     padding:18px;
     z-index:200;
     background:var(--panel-bg);
     border-right:1px solid var(--border)
 }
  .tabs-nav.open{
     transform:translateX(0)
 }
  .content-area{
     padding:18px
 }
 /* wide buttons become full width for many forms */
  .btn{
     width:100%
 }
 /* apply phone-like compact button sizing up to 900px */
  .btn-search, .btn-small{
     padding:6px 8px;
     font-size:0.9rem;
     border-radius:6px
 }
  .btn-search{
     width:auto
 }
  .btn-small{
     width:auto
 }
}
@media (max-width:480px){
  body{
     padding:10px
 }
  header h1{
     font-size:1.4rem
 }
  .tabs-nav{
     padding:6px
 }
  .tab-btn{
     font-size:0.95rem;
     padding:10px 12px
 }
  .content-area{
     padding:10px
 }
  input[type="text"],input[type="number"],select,textarea{
     font-size:1rem;
     padding:12px
 }
  label{
     font-size:0.95rem
 }
}
/* For narrow widths under 602px: make each link field input appear on its own line */
@media (max-width:602px){
 /* stack link items vertically (remove button below inputs) */
  .link-item{
     flex-direction:column;
     align-items:stretch
 }
  .link-item-inputs{
     display:flex;
     flex-direction:column;
     align-items:stretch
 }
  .link-item-inputs input{
     width:100%
 }
  .link-remove{
     width:100%;
     margin-top:8px
 }
 /* keep rate items always single-line */
  .rate-item{
     flex-direction:row;
     align-items:center
 }
  .rate-item-inputs{
     display:flex;
     flex-direction:row;
     gap:8px
 }
  .rate-item-inputs input{
     flex:1
 }
  .rate-remove{
     width:36px;
     margin-top:0
 }
}
/* Modal styles for link editor */
.modal-overlay{
 position:fixed;
 left:0;
 top:0;
 right:0;
 bottom:0;
 background:rgba(0,0,0,0.45);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:400
}
.modal-card{
 width:940px;
 max-width:96%;
 background:var(--card-bg);
 border-radius:10px;
 padding:14px;
 box-shadow:0 20px 60px rgba(2,6,23,0.4);
 border:1px solid var(--border)
}
[data-theme="dark"] .modal-card{
 box-shadow:0 20px 60px rgba(0,0,0,0.6)
}
.modal-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:8px
}
.modal-body{
 max-height:60vh;
 overflow:auto
}
.modal-footer{
 display:flex;
 gap:10px;
 justify-content:flex-end;
 margin-top:12px
}
.modal-close{
 background:transparent;
 border:0;
 font-size:1.05rem;
 cursor:pointer
}
.le-param-row{
 margin-bottom:8px
}
/* Compact rate fields */
.compact-rate .rate-item{
 padding:8px;
 gap:6px
}
.compact-rate .rate-item-inputs{
 gap:8px
}
.compact-rate .rate-item-inputs input{
 padding:6px 8px;
 font-size:0.9rem
}
.compact-rate .rate-remove{
 padding:6px 8px;
 font-size:0.85rem
}
.compact-rate textarea{
 padding:6px 8px
}