:root {
  --bg-page:      #1f2130;
  --bg-card:      #2c2f43;
  --fg-text:      #e0e1e5;
  --fg-muted:     #858994;
  --accent-main:  #00C6FF;
  --accent-cta:   #FF6A00;
  --border:       #3a3d50;
  --input-bg:     #25283e;
  --input-border: #3a3d50;
  --hover-light:  rgba(255,255,255,0.1);
  --radius:       8px;
}
body {
  margin:0;
  font-family:"Segoe UI",sans-serif;
  background:var(--bg-page);
  color:var(--fg-text);
}
a { color:var(--accent-main); text-decoration:none; }
.container {
  max-width:600px;
  margin:2rem auto;
  padding:0 1rem;
}
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
}
label { display:block; margin-bottom:0.5rem; font-weight:600; }
input[type="text"],
input[type="url"] {
  width:100%;
  padding:0.75rem;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  color:var(--fg-text);
  margin-top:0.25rem;
}
fieldset { border:none; margin:1.5rem 0; padding:0; }
legend {
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:1rem;
}
.scope-list {
  display:grid;
  gap:1rem;
}
.scope-item {
  display:flex;
  align-items:center;
}
.scope-item input {
  margin-right:0.75rem;
  accent-color:var(--accent-main);
}
.scope-item {
display: flex;
align-items: center;
gap: 0.75em;
margin-bottom: 1em;
}


.scope-item input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid var(--border);
border-radius: 4px;
flex-shrink: 0;
position: relative;
cursor: pointer;
transition: border-color .2s, background .2s;
}


.scope-item input[type="checkbox"]:hover {
border-color: var(--accent-main);
}


.scope-item input[type="checkbox"]:checked {
background: var(--accent-main);
border-color: var(--accent-main);
}


.scope-item input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 2px;
left: 6px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}


.scope-item input[type="checkbox"] {
margin-right: 0.75rem;
}


.scope-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}

.scope-icon img {
width: 100%;
height: 100%;
object-fit: contain;

filter: brightness(0) invert(1);
}

.scope-content {
display: flex;
flex-direction: column;
}

.scope-name {
font-size: 1rem;
font-weight: 600;
color: var(--fg-text);
}

.scope-desc {
font-size: 0.875rem;
color: var(--fg-muted);
}

.scope-content .scope-name { font-weight:600; }
.scope-content .scope-desc { color:var(--fg-muted); font-size:0.9rem; }


.uploader {
  position:relative;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  text-align:center;
  color:var(--fg-muted);
  margin-bottom:1.5rem;
  transition:background .2s,border-color .2s;
}
.uploader.dragover {
  background:var(--hover-light);
  border-color:var(--accent-main);
  color:var(--fg-text);
}
.uploader input[type="file"] {
position: absolute;
top:0; left:0; width:100%; height:100%;
opacity:0;
cursor:pointer;
transition: opacity .2s;
z-index: 1;            
}


.uploader.has-file input[type="file"] {
opacity: 0;            
pointer-events: none;  
}


.preview {
display: none;
position: absolute;
top: 50%; left: 50%;
width: 80px; height: 80px;
transform: translate(-50%, -50%);
border-radius: 4px;
overflow: hidden;
background: #000;
z-index: 2; 
}


.preview .remove {
position: absolute;
top:4px; right:4px;
background: rgba(0,0,0,0.6);
border: none; color:#fff;
width:24px; height:24px;
border-radius:50%;
cursor:pointer;
z-index: 3; 
}

.preview img {
  object-fit:cover;
  width:100%; height:100%;
}

.btn {
  padding:0.75rem 1.5rem;
  background:var(--accent-main);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,198,255,0.4);
  transition:transform .1s,box-shadow .1s;
}
.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,198,255,0.6);
}





.icon-uploader {
display: flex;
align-items: flex-start;      
gap: 1rem;
margin: 1.5rem 0;
}

.icon-placeholder {
width: 80px;
height: 80px;
background: transparent;      
border: 2px dashed var(--border);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color .2s, background .2s;
position: relative;
}

.icon-placeholder:hover {
border-color: var(--accent-main);
}

.icon-texts {
display: flex;
flex-direction: column;
margin-top: 4px;              
}

.icon-label {
font-weight: 600;
color: var(--fg-text);
}

.icon-desc {
font-size: 0.875rem;
color: var(--fg-muted);
}


#iconInput {
display: none;
}


.icon-uploader.has-file .icon-placeholder svg {
display: none;
}

.preview {
display: none;
}

.icon-uploader.has-file .preview {
display: block;
}



.info-icon {
display: inline-block;
width: 16px;
height: 16px;
margin-left: 6px;
color: var(--fg-muted);
font-style: normal;
font-weight: bold;
line-height: 16px;
text-align: center;
border: 1px solid var(--fg-muted);
border-radius: 50%;
cursor: help;
position: relative;
transition: border-color .2s, color .2s;
}
.info-icon:hover {
border-color: var(--accent-main);
color: var(--accent-main);
}
.info-icon:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.85);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
font-size: 0.75rem;
z-index: 10;
pointer-events: none;
opacity: 0;
animation: fade-in 0.2s forwards;
}
@keyframes fade-in {
to { opacity: 1; }
}


.card .toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.toolbar .btn-back,
.toolbar .btn-docs {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-size: 0.9rem;
font-weight: 600;
color: var(--fg-text);
text-decoration: none;
padding: 0.5em 0.75em;
border-radius: var(--radius);
transition: background .2s;
}
.toolbar .btn-back:hover,
.toolbar .btn-docs:hover {
background: var(--hover-light);
}
.toolbar .btn-back svg,
.toolbar .btn-docs svg {
width: 16px;
height: 16px;
fill: currentColor;
}



@media (max-width: 600px) {

:root { font-size: 14px; }
.container { margin: 1rem auto; padding: 0 0.5rem; }
.card { padding: 1rem; }


input[type="text"],
input[type="url"] {
padding: 0.5rem;
font-size: 0.9rem;
}


.scope-list { gap: 0.5rem; }
.scope-item { gap: 0.5rem; }
.scope-icon {
width: 20px;
height: 20px;
}
.scope-name { font-size: 0.95rem; }
.scope-desc { font-size: 0.8rem; }


.btn,
.toolbar .btn-back,
.toolbar .btn-docs {
display: block;
width: 100%;
text-align: center;
}
.btn { padding: 0.75rem; font-size: 1rem; }


.toolbar {
flex-direction: column;
gap: 0.5rem;
}
.toolbar .btn-back,
.toolbar .btn-docs {
padding: 0.5rem;
font-size: 0.9rem;
}


.icon-placeholder,
.preview {
width: 60px;
height: 60px;
}
}


.btn-danger {
  background: var(--accent-cta);
  color: #fff;
  box-shadow: none;
  transition: background .2s;
}
.btn-danger:hover {
  background: #e14e3d;
}

.btn-copy {
  background: var(--input-bg);
  color: var(--fg-text);
  border: 1px solid var(--input-border);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background .2s;
  margin-left: auto;
}
.btn-copy:hover {
  background: var(--hover-light);
}


.metrics {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}


.metric {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--fg-muted);
  margin-bottom: 0.25rem;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fg-text);
}


.col-sm-12 {
  width: -webkit-fill-available !important;
position: fixed !important;
top: 20px !important;
}
.alert-menu-dismissible .close-success-menu {
top: -4px !important;
}

.container-success-menu {
  margin-right: unset !important;
  margin-left: unset !important;
}