/* Telegram Theme Variables */
:root {
   --tg-theme-bg-color: #ffffff;
   --tg-theme-text-color: #000000;
   --tg-theme-hint-color: #999999;
   --tg-theme-link-color: #2481cc;
   --tg-theme-button-color: #2481cc;
   --tg-theme-button-text-color: #ffffff;
   --tg-theme-secondary-bg-color: #f0f0f0;

   --border-radius: 12px;
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
}

/* Reset */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* Base */
body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   background-color: var(--tg-theme-bg-color);
   color: var(--tg-theme-text-color);
   line-height: 1.5;
   min-height: 100vh;
}

#app {
   max-width: 100%;
   padding: var(--spacing-md);
   padding-bottom: 100px;
}

/* Screens */
.screen {
   animation: fadeIn 0.2s ease;
}

.screen.hidden {
   display: none;
}

.screen-content {
   max-width: 500px;
   margin: 0 auto;
}

@keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
}

/* Typography */
h2 {
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: var(--spacing-md);
   color: var(--tg-theme-text-color);
}

p {
   color: var(--tg-theme-hint-color);
   margin-bottom: var(--spacing-md);
}

.hint {
   font-size: 0.875rem;
   color: var(--tg-theme-hint-color);
}

.section-label {
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   color: var(--tg-theme-hint-color);
   margin: var(--spacing-md) 0 var(--spacing-sm);
}

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--spacing-sm) var(--spacing-md);
   border: none;
   border-radius: var(--border-radius);
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   min-height: 44px;
}

.btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.btn-primary {
   background-color: var(--tg-theme-button-color);
   color: var(--tg-theme-button-text-color);
   width: 100%;
}

.btn-primary:hover:not(:disabled) {
   opacity: 0.9;
}

.btn-secondary {
   background-color: var(--tg-theme-secondary-bg-color);
   color: var(--tg-theme-text-color);
}

.btn-small {
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: 0.875rem;
   min-height: 36px;
}

.btn-danger {
   background-color: #ff3b30;
   color: white;
}

/* Inputs */
.input {
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
   border: 1px solid var(--tg-theme-hint-color);
   border-radius: var(--border-radius);
   font-size: 1rem;
   background-color: var(--tg-theme-bg-color);
   color: var(--tg-theme-text-color);
   min-height: 44px;
}

.input:focus {
   outline: none;
   border-color: var(--tg-theme-button-color);
}

.textarea {
   resize: vertical;
   min-height: 150px;
   font-family: monospace;
}

.form-group {
   margin-bottom: var(--spacing-md);
}

.form-inline {
   display: flex;
   gap: var(--spacing-sm);
   margin-bottom: var(--spacing-md);
}

.form-inline .input {
   flex: 1;
}

/* Error text */
.error-text {
   color: #ff3b30;
   font-size: 0.875rem;
   margin-top: var(--spacing-sm);
   min-height: 1.5em;
}

/* Color Grid */
.color-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-sm);
}

.color-btn {
   padding: var(--spacing-sm);
   border: 1px solid var(--tg-theme-hint-color);
   border-radius: var(--border-radius);
   background-color: var(--tg-theme-secondary-bg-color);
   color: var(--tg-theme-text-color);
   font-size: 0.75rem;
   cursor: pointer;
   transition: all 0.2s ease;
   min-height: 44px;
   text-align: center;
   word-break: break-word;
}

.color-btn:hover {
   background-color: var(--tg-theme-button-color);
   color: var(--tg-theme-button-text-color);
   border-color: var(--tg-theme-button-color);
}

/* Series Grid */
.series-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-sm);
   margin-bottom: var(--spacing-md);
}

.series-btn {
   padding: var(--spacing-sm);
   border: 1px solid var(--tg-theme-hint-color);
   border-radius: var(--border-radius);
   background-color: var(--tg-theme-secondary-bg-color);
   color: var(--tg-theme-text-color);
   font-size: 0.75rem;
   cursor: pointer;
   transition: all 0.2s ease;
   min-height: 44px;
   text-align: center;
}

.series-btn:hover {
   background-color: var(--tg-theme-button-color);
   color: var(--tg-theme-button-text-color);
   border-color: var(--tg-theme-button-color);
}

/* Pagination */
.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-md);
}

#page-indicator {
   color: var(--tg-theme-hint-color);
   font-size: 0.875rem;
}

/* Selected Info */
.selected-info {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
   padding: var(--spacing-sm) var(--spacing-md);
   background-color: var(--tg-theme-secondary-bg-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--spacing-md);
   font-size: 0.875rem;
}

.selected-info strong {
   color: var(--tg-theme-button-color);
}

/* Quote Card */
.quote-card {
   background-color: var(--tg-theme-secondary-bg-color);
   border-radius: var(--border-radius);
   padding: var(--spacing-md);
   margin-bottom: var(--spacing-md);
}

.quote-header {
   display: flex;
   justify-content: space-between;
   color: var(--tg-theme-hint-color);
   font-size: 0.875rem;
   margin-bottom: var(--spacing-md);
   padding-bottom: var(--spacing-sm);
   border-bottom: 1px solid var(--tg-theme-hint-color);
}

.quote-body {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
}

.quote-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.quote-row.total {
   margin-top: var(--spacing-sm);
   padding-top: var(--spacing-sm);
   border-top: 1px solid var(--tg-theme-hint-color);
   font-size: 1.125rem;
}

.quote-row.total strong {
   color: var(--tg-theme-button-color);
}

.quote-section {
   margin: var(--spacing-sm) 0;
}

.quote-label {
   font-size: 0.75rem;
   color: var(--tg-theme-hint-color);
   margin-bottom: var(--spacing-xs);
}

#result-dimensions {
   font-family: monospace;
   font-size: 0.875rem;
   padding: var(--spacing-sm);
   background-color: var(--tg-theme-bg-color);
   border-radius: var(--border-radius);
}

#result-dimensions div {
   padding: var(--spacing-xs) 0;
}

/* Result Actions */
.result-actions {
   display: flex;
   gap: var(--spacing-sm);
}

.result-actions .btn {
   flex: 1;
}

/* Admin */
.admin-tabs {
   display: flex;
   gap: var(--spacing-sm);
   margin-bottom: var(--spacing-md);
}

.tab-btn {
   flex: 1;
   padding: var(--spacing-sm);
   border: none;
   border-radius: var(--border-radius);
   background-color: var(--tg-theme-secondary-bg-color);
   color: var(--tg-theme-text-color);
   cursor: pointer;
   transition: all 0.2s ease;
}

.tab-btn.active {
   background-color: var(--tg-theme-button-color);
   color: var(--tg-theme-button-text-color);
}

.tab-content {
   margin-bottom: var(--spacing-md);
}

.admin-actions {
   margin-bottom: var(--spacing-md);
}

/* List */
.list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
}

.list-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--spacing-sm) var(--spacing-md);
   background-color: var(--tg-theme-secondary-bg-color);
   border-radius: var(--border-radius);
}

/* Values List */
.values-list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
}

.value-item {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm);
   background-color: var(--tg-theme-secondary-bg-color);
   border-radius: var(--border-radius);
}

.value-label {
   min-width: 100px;
   font-size: 0.875rem;
}

.value-input {
   flex: 1;
   min-height: 36px;
}

/* Admin FAB */
.admin-fab {
   position: fixed;
   bottom: var(--spacing-md);
   right: var(--spacing-md);
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background-color: var(--tg-theme-button-color);
   color: var(--tg-theme-button-text-color);
   border: none;
   font-size: 0.75rem;
   font-weight: 600;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 100;
}

.admin-fab.hidden {
   display: none;
}

/* Utility */
.hidden {
   display: none !important;
}

/* Responsive */
@media (max-width: 360px) {
   .color-grid,
   .series-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .color-btn,
   .series-btn {
      font-size: 0.7rem;
   }
}