:root {
 --primary-color: #FF7D01;
 --primary-hover: #E66D00;
 --text-color: #333;
 --light-gray: #f5f5f5;
 --border-radius: 12px;
 --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.section-title {
 font-size: 32px;
 margin: 0 0 30px 0;
 color: #222;
 position: relative;
 padding: 0;
 font-weight: 700;
 text-align: left;
 text-indent: 0;
}

.section-title:after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 0;
 width: 60px;
 height: 4px;
 background: var(--primary-color);
 border-radius: 2px;
}



.form-group {
 margin-bottom: 25px;
}

.form-label {
 display: block;
 margin-bottom: 8px;
 font-weight: 600;
 font-size: 16px;
}

.form-input {
 width: 100%;
 padding: 14px 16px;
 border: 1px solid #ddd;
 border-radius: var(--border-radius);
 font-size: 16px;
 -webkit-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

.form-input:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(255, 125, 1, 0.2);
}

.form-text {
 display: block;
 margin-top: 8px;
 font-size: 14px;
 color: #666;
}



.api-section {
 background: var(--light-gray);
 border-radius: var(--border-radius);
 padding: 25px;
 margin-top: 40px;
}

.api-key-container {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-align: center;
 -webkit-align-items: center;
 align-items: center;
 gap: 15px;
 margin-top: 15px;
 margin-bottom: 25px;
}

.api-key-value {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 300px;
 padding: 14px 16px;
 background: white;
 border: 1px solid #ddd;
 border-radius: var(--border-radius);
 font-family: monospace;
 word-break: break-all;
 position: relative;
 padding-right: 50px;
}

.copy-btn {
 position: absolute;
 right: 10px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 background: transparent;
 border: none;
 color: var(--primary-color);
 cursor: pointer;
 font-size: 18px;
 padding: 5px;
}

.copy-btn:hover {
 color: var(--primary-hover);
}



.info-cards {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 25px;
 margin-top: 40px;
}

.info-card {
 background: white;
 border-radius: var(--border-radius);
 box-shadow: var(--box-shadow);
 padding: 25px;
 -webkit-transition: -webkit-transform 0.3s ease;
 transition: -webkit-transform 0.3s ease;
 transition: transform 0.3s ease;
 transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.info-card .btn {
 margin-top: 25px;
}

.info-card:hover {
 -webkit-transform: translateY(-5px);
 -ms-transform: translateY(-5px);
 transform: translateY(-5px);
}

.card-title {
 font-size: 18px;
 margin-bottom: 15px;
 color: var(--primary-color);
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 align-items: center;
 gap: 10px;
 font-weight: 700;
}



.alert {
 padding: 15px;
 border-radius: var(--border-radius);
 margin-bottom: 25px;
 display: none;
}

.alert-success {
 background: #d4edda;
 color: #155724;
 border: 1px solid #c3e6cb;
}

.alert-error {
 background: #f8d7da;
 color: #721c24;
 border: 1px solid #f5c6cb;
}



.btn {
 display: -webkit-inline-box;
 display: -webkit-inline-flex;
 display: inline-flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 align-items: center;
 padding: 14px 32px;
 background: var(--primary-color);
 color: white;
 border: none;
 border-radius: var(--border-radius);
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 -webkit-transition: all 0.3s ease;
 transition: all 0.3s ease;
 text-align: center;
 text-decoration: none;
}

.btn-block {
 display: block;
 width: 100%;
}

.btn-outline {
 background: transparent;
 border: 2px solid var(--primary-color);
 color: var(--primary-color);
}

.btn-outline:hover {
 background: var(--primary-color);
 color: white;
}



@media (max-width: 992px) {
 .dashboard {
 padding: 0;
}

 .section-title {
 font-size: 28px;
 margin: 0 0 30px 0;
 padding: 0;
 text-align: left;
 text-indent: 0;
}
}

@media (max-width: 768px) {
 .dashboard {
 padding: 0;
}

 .section-title {
 font-size: 24px;
 margin: 0 0 30px 0;
 padding: 0;
 text-align: left;
 text-indent: 0;
}

 .info-cards {
 grid-template-columns: 1fr;
}
}

@media (max-width: 576px) {
 .api-key-container {
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 flex-direction: column;
}

 .api-key-value {
 min-width: 100%;
}

 .btn {
 width: 100%;
 margin-top: 10px;
}

 .btn-outline {
 margin-top: 20px;
 
}
}