@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYMEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYBOLD.OTF') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYBLACKITALIC.OTF') format('opentype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYHEAVYITALIC.OTF') format('opentype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYLIGHTITALIC.OTF') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYSEMIBOLDITALIC.OTF') format('opentype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYTHINITALIC.OTF') format('opentype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFPRODISPLAYULTRALIGHTITALIC.OTF') format('opentype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'SF Pro';
    src: url('fonts/SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: 590;
    font-style: italic;
}

.container {
    width: 393px;
    height: 852px;
    margin: 0 auto;
    position: relative;
    background-size: contain;
    background-color:#222222;
    display: flex;
    flex-direction: column;
    /*background-image: url('photo_2025-02-05_15-24-55.jpg');*/
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding: 1rem;
    background: #f5f5f5;
}

.status-bar {
    width: 100%;
    height: 50px;
    position: relative;
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding-left: 51.5px;
    box-sizing: border-box;
    color: white;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
}

.left-items{
    margin-bottom:-1px;
}

.left-items, .right-items {
    display: flex;
    align-items: center;
    z-index: 1001;
}

.time {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
font-style: normal;
font-weight: 580;
}

.right-items > span {
    margin-left: 8px;
}

.signal-bars {
    display: inline-block;
    width: 18px;
    height: 12px;
    background: #000;
    clip-path: polygon(0 100%, 0 40%, 20% 40%, 20% 25%, 40% 25%, 40% 10%, 60% 10%, 60% 0, 80% 0, 80% 0, 100% 0, 100% 100%);
}

.wifi-symbol {
    display: inline-block;
    width: 16px;
    height: 12px;
    background: #000;
    clip-path: polygon(20% 100%, 0 60%, 40% 60%, 20% 20%, 60% 20%, 40% 0, 100% 60%, 60% 60%, 80% 100%);
}

.battery-icon {
    display: inline-block;
    width: 25px;
    height: 12px;
    background: #000;
    border-radius: 3px;
    position: relative;
}

.battery-icon::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 4px;
    background: #000;
    border-radius: 0 2px 2px 0;
}

.container{
    .gradient{
        width: 100%;
        background: linear-gradient(rgba(235, 55, 66, 0.2) 0%, rgba(136, 136, 136, 0) 100%);
        height: 240px;
        position: absolute;
    }
    .wrapper{
        z-index: 10;
    display: flex
;
    flex-direction: column;
    height: 852px;
    }
    .app{
        margin-left:.93rem;
        margin-right:.93rem;
        margin-top:.4rem;
        .app-header{
            display:flex;
            justify-content: space-between;
            align-items: center;
            .app-header-left{
                display:flex;
                align-items: center;
                gap:.7rem;
                .avatar{
                    font-family: "Inter", serif;
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    background:#ab9ff4;
                    width: 2.25rem;
                    height: 2.25rem;
                    border-radius:100%;
                    font-weight: bold;
                    color:#222222;
                }
                .text{
                    font-family: "Inter", serif;
                    color:white;
                    font-weight:450;
                    .chevron-down{
                        width:1rem;
                        height:1rem;
                        margin-left: -.1rem;
                        margin-bottom: -.1rem;
                    }
                }
            }
            .app-header-right{
                display:flex;
                align-items: center;
                gap:.7rem;
            }
        }
        .wallet-balance{
            margin-top:1.2rem;
            display:flex;
            flex-direction:column;
            align-items: center;
            .balance{
                font-size:2rem;
                color:white;
                font-family: "Inter", serif;
                font-weight: 500;
                font-size:46px;
            }
            .balance-change{
                font-family: "Inter", serif;
                color:white;
                font-weight:500;
                font-size:17px;
                display:flex;
                align-items: center;
                gap:6px;
                .change{
                    &.red{
                    color: rgb(235, 55, 66);
                    }
                    &.green{
                        color:#21e56f;
                    }
                }
                .percentage{
                    border-radius: 6px;
    padding: 2px 5px;
    background-color: rgba(235, 55, 66, 0.1);
    color: rgb(235, 55, 66);
                }
            }
        }
        .balance-change .change.red {
            color: rgb(235, 55, 66);
        }

        .balance-change .change.green {
            color: #21e56f;
        }
        .icons-container{
            margin-top:1.7rem;
            display:grid;
            grid-template-columns: repeat(4,1fr);
            gap:8px;
            .icon{
                display:flex;
                flex-direction:column;
                align-items: center;
                justify-content:center;
                font-family: Inter, sans-serif;
                background-color:rgb(42, 42, 42);
                border-radius:16px;
                padding-top:16px;
                padding-bottom:16px;
                padding-left:8px;
                padding-right:8px;
                gap:4px;
                svg{
                    color:rgb(171, 159, 242);
                }
                span{
                    color:rgb(153, 153, 153);
                    font-size:13px;
                    font-weight:600;
                    line-height:16px;
                }
            }
        }
        .coins-container{
            margin-top:1.7rem;
            display:flex;
            flex-direction: column;
            gap:8px;
            .coin{
                display:flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px;
                padding-right:15px;
                padding-left:15px;
                background-color:rgb(42, 42, 42);
                border-radius:16px;
                gap:1rem;
                .coin-left{
                    display:flex;
                    align-items: center;
                    gap:12px;
                    .coin-icon{
                        display:flex;
                        align-items: center;
                        img{
                            border-radius:100%;
                            height:42px;
                        }
                    }
                .coin-info{
                    display:flex;
                    flex-direction: column;
                    gap:2px;
                    .coin-name{
                        font-family: Inter, sans-serif;
                        font-weight:500;
                        color:white;
                        font-size:15px;
                    }
                    .coin-have{
                        font-family: Inter, sans-serif;
                        font-weight:500;
                        color: #999;
                        font-weight: 350;
                        font-size:13px;
                    }
                }
            }
            .coin-right{
                display:flex;
                flex-direction: column;
                align-items: flex-end;
                gap:2px;
                .coin-price{
                    font-family: Inter, sans-serif;
                    font-weight:500;
                    color:white;
                    font-size:16px;
                    line-height:19px;
                }
                .coin-change{
                    font-size:13px;
                    line-height:17px;
                    font-family: Inter, sans-serif;
                    font-weight: 300;
                    &.red{
                        color:rgb(235, 55, 66);
                    }
                    &.green{
                        color:#21e56f;
                    }
                }
            }
        }
        }
        .manage{
            width:100%;
            display:flex;
            justify-content: center;
            align-items: center;
            margin-top:1.5rem;
            .text{
                margin-left:16px;
                color:rgb(119, 119, 119);
                font-family: Inter, sans-serif;
                font-weight: 600;
                font-size:15px;
            }
        }
    }
    .navigation{
        margin-top:auto;
        background:#1e1e1e;
        .icon{
            display:flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
        }
    }
}

.screen-generator {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    flex-direction: row;
}

.control-panel {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    width: 740px; /* Increased width */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    max-height: 90vh;
    overflow-y: auto;
}

.control-panel-grid {
    display: grid;
    grid-template-columns: 340px 1fr; /* Two columns */
    gap: 2rem;
}

.control-panel-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.control-panel-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* Custom scrollbar for the right panel */
.control-panel-right::-webkit-scrollbar {
    width: 8px;
}

.control-panel-right::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.control-panel-right::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

.control-panel-right::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

.control-panel h2 {
    font-family: Inter, sans-serif;
    font-size: 1.5rem;
    color: #222;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.control-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.control-section h3 {
    font-family: Inter, sans-serif;
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    color: #222;
    font-weight: 600;
}

.control-group {
    margin-bottom: 1rem;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-size: 0.875rem;
    font-family: Inter, sans-serif;
    font-weight: 500;
}

.control-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: Inter, sans-serif;
    transition: all 0.2s;
    background: white;
}

.control-group input:focus {
    outline: none;
    border-color: #ab9ff4;
    box-shadow: 0 0 0 3px rgba(171, 159, 244, 0.1);
}

.control-group input[readonly] {
    background-color: #f1f3f5;
    cursor: not-allowed;
    color: #666;
}

.token-control {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}

.token-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.token-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #222;
    font-family: Inter, sans-serif;
    font-weight: 600;
}

button {
    background: #ab9ff4;
    color: white;
    border: none;
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-weight: 500;
    font-family: Inter, sans-serif;
    font-size: 0.9375rem;
    transition: all 0.2s;
}

button:hover {
    background: #9a8be0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(171, 159, 244, 0.2);
}

.delete-token {
    background: #ff4444;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-token:hover {
    background: #ff2020;
}

.delete-token[disabled] {
    background: #ddd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Add custom scrollbar */
.control-panel::-webkit-scrollbar {
    width: 8px;
}

.control-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.control-panel::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

.control-panel::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* Update the screenshot button positioning */
.screenshot-controls {
    grid-column: 1 / -1; /* Span full width */
    margin-top: 1.5rem;
}

/* Add screenshot specific styles */
.container.taking-screenshot {
    width: 393px !important;
    height: 852px !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.container.taking-screenshot * {
    transform: none !important;
    transition: none !important;
}

@media (max-width: 1024px) {
    .screen-generator {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .control-panel {
        width: 100%;
        max-width: 740px;
    }
}

@media (max-width: 768px) {
    .control-panel-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .control-panel {
        padding: 1.5rem;
    }

    .control-panel h2 {
        font-size: 1.25rem;
    }

    .container {
        width: 100%;
        max-width: 393px;
        height: auto;
        aspect-ratio: 393/852;
    }

    .control-section {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0.5rem;
    }

    .screen-generator {
        gap: 1rem;
    }

    .control-panel {
        padding: 1rem;
        border-radius: 12px;
    }

    .control-section {
        padding: 1rem;
    }

    .token-control {
        padding: 1rem;
    }

    .control-group {
        margin-bottom: 0.75rem;
    }

    .control-group input {
        padding: 0.625rem;
    }

    button {
        padding: 0.75rem 1rem;
    }
}

/* Fix for mobile scrolling */
.control-panel-right {
    max-height: none;
}

@media (min-width: 1025px) {
    .control-panel-right {
        max-height: 70vh;
    }
}

/* Ensure the preview stays proportional */
.container {
    width: 393px;
    height: 852px;
}

@media (max-width: 480px) {
    .container {
        width: 100%;
        height: auto;
        aspect-ratio: 393/852;
    }
}