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

     :root {
         --bg: #080a0f;
         --bg2: #0d1017;
         --card: rgba(18, 22, 31, .78);
         --card2: #11151e;
         --line: rgba(255, 255, 255, .09);
         --text: #f5f7fb;
         --muted: #8d96a8;
         --accent: #ff5b22;
         --accent2: #ff9d38;
         --green: #35d49a;
         --red: #ff526d;
         --blue: #5c9dff;
         --shadow: 0 25px 80px rgba(0, 0, 0, .42)
     }

     html {
         scroll-behavior: smooth
     }

     body {
         min-height: 100vh;
         color: var(--text);
         font-family: Inter, sans-serif;
         background:
             radial-gradient(circle at 15% 0%, rgba(255, 91, 34, .14), transparent 30%),
             radial-gradient(circle at 85% 10%, rgba(255, 157, 56, .08), transparent 28%),
             var(--bg);
         overflow-x: hidden
     }

     body:before {
         content: "";
         position: fixed;
         inset: 0;
         pointer-events: none;
         opacity: .32;
         background-image:
             linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
         background-size: 42px 42px;
         mask-image: linear-gradient(to bottom, #000, transparent 90%)
     }

     ::-webkit-scrollbar {
         width: 8px
     }

     ::-webkit-scrollbar-track {
         background: #080a0f
     }

     ::-webkit-scrollbar-thumb {
         background: #2a303d;
         border-radius: 20px
     }

     ::-webkit-scrollbar-thumb:hover {
         background: #414a5b
     }

     button,
     input {
         font: inherit
     }

     button {
         border: 0
     }

     .top {
         width: min(1180px, calc(100% - 32px));
         margin: auto;
         height: 78px;
         display: flex;
         align-items: center;
         justify-content: space-between
     }

     .logo {
         display: flex;
         align-items: center;
         gap: 11px;
         font-weight: 800;
         font-size: 21px;
         letter-spacing: -.7px
     }

     .logo i {
         width: 38px;
         height: 38px;
         border-radius: 11px;
         display: grid;
         place-items: center;
         color: white;
         background: linear-gradient(135deg, #ff4d1c, #ff9b35);
         box-shadow: 0 8px 30px rgba(255, 91, 34, .3)
     }

     .nav-right {
         display: flex;
         align-items: center;
         gap: 10px
     }

     .pill {
         padding: 8px 12px;
         border: 1px solid var(--line);
         border-radius: 30px;
         background: rgba(255, 255, 255, .035);
         color: #b8c0ce;
         font-size: 12px;
         display: flex;
         align-items: center;
         gap: 7px
     }

     .pill span {
         width: 7px;
         height: 7px;
         border-radius: 50%;
         background: var(--green);
         box-shadow: 0 0 12px var(--green)
     }

     main {
         width: min(1180px, calc(100% - 32px));
         margin: 30px auto 70px
     }

     .hero {
         text-align: center;
         max-width: 800px;
         margin: 55px auto 40px
     }

     .hero .tag {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 8px 13px;
         border: 1px solid rgba(255, 255, 255, .09);
         border-radius: 30px;
         background: rgba(255, 255, 255, .035);
         color: #aeb7c7;
         font-size: 12px;
         font-weight: 600;
         margin-bottom: 18px;
         animation: fadeUp .7s ease both
     }

     .hero h1 {
         font-size: clamp(38px, 7vw, 70px);
         line-height: 1;
         letter-spacing: -4px;
         margin-bottom: 18px;
         animation: fadeUp .8s .08s ease both
     }

     .hero h1 b {
         background: linear-gradient(90deg, #fff, #ffb15c, #ff5724);
         -webkit-background-clip: text;
         color: transparent
     }

     .hero p {
         max-width: 650px;
         margin: auto;
         color: var(--muted);
         line-height: 1.7;
         font-size: 15px;
         animation: fadeUp .8s .16s ease both
     }

     .layout {
         display: grid;
         grid-template-columns: minmax(0, 1fr) 350px;
         gap: 20px;
         align-items: start
     }

     .card {
         background: linear-gradient(145deg, rgba(22, 27, 38, .9), rgba(11, 14, 20, .88));
         border: 1px solid var(--line);
         border-radius: 24px;
         box-shadow: var(--shadow);
         backdrop-filter: blur(20px)
     }

     .deploy-card {
         padding: 24px;
         animation: fadeUp .8s .2s ease both
     }

     .card-head {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         gap: 15px;
         margin-bottom: 23px
     }

     .card-head h2 {
         font-size: 18px;
         margin-bottom: 5px
     }

     .card-head p {
         color: var(--muted);
         font-size: 12px
     }

     .badge {
         padding: 7px 10px;
         border-radius: 9px;
         font-size: 11px;
         font-weight: 700;
         color: #bfc7d5;
         border: 1px solid var(--line);
         background: rgba(255, 255, 255, .035)
     }

     .label {
         display: block;
         font-size: 12px;
         color: #aab3c2;
         font-weight: 600;
         margin: 0 0 9px 2px
     }

     .name-wrap {
         position: relative
     }

     .name-wrap i {
         position: absolute;
         left: 14px;
         top: 50%;
         transform: translateY(-50%);
         color: #697386;
         font-size: 14px
     }

     .name-input {
         width: 100%;
         height: 50px;
         padding: 0 15px 0 40px;
         color: white;
         outline: none;
         border: 1px solid var(--line);
         background: rgba(0, 0, 0, .2);
         border-radius: 13px;
         transition: .25s
     }

     .name-input:focus {
         border-color: rgba(255, 115, 46, .65);
         box-shadow: 0 0 0 4px rgba(255, 91, 34, .08)
     }

     .url-preview {
         margin-top: 10px;
         padding: 10px 13px;
         background: rgba(255, 255, 255, .025);
         border: 1px solid var(--line);
         border-radius: 11px;
         color: #788397;
         font-size: 11px;
         word-break: break-all
     }

     .url-preview b {
         color: #aeb8c8;
         font-weight: 500
     }

     .drop {
         margin-top: 20px;
         min-height: 230px;
         border: 1px dashed #343c4c;
         border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 25px;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         transition: .3s
     }

     .drop:before {
         content: "";
         position: absolute;
         inset: 0;
         background: radial-gradient(circle at center, rgba(255, 91, 34, .11), transparent 55%);
         opacity: 0;
         transition: .3s
     }

     .drop:hover,
     .drop.drag {
         border-color: rgba(255, 105, 40, .75);
         transform: translateY(-2px);
         box-shadow: 0 15px 45px rgba(255, 91, 34, .08)
     }

     .drop:hover:before,
     .drop.drag:before {
         opacity: 1
     }

     .drop-inner {
         position: relative;
         z-index: 1
     }

     .drop-icon {
         width: 62px;
         height: 62px;
         margin: auto auto 14px;
         border-radius: 18px;
         display: grid;
         place-items: center;
         font-size: 22px;
         color: #ff8845;
         background: rgba(255, 91, 34, .09);
         border: 1px solid rgba(255, 91, 34, .15);
         transition: .4s
     }

     .drop:hover .drop-icon {
         transform: translateY(-6px) rotate(-4deg);
         box-shadow: 0 15px 30px rgba(255, 91, 34, .13)
     }

     .drop h3 {
         font-size: 15px;
         margin-bottom: 7px
     }

     .drop p {
         color: var(--muted);
         font-size: 11px;
         line-height: 1.6
     }

     .drop strong {
         color: #ff8a4c
     }

     .upload-actions {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px;
         margin-top: 13px
     }

     .upload-btn {
         height: 44px;
         border: 1px solid var(--line);
         border-radius: 12px;
         background: rgba(255, 255, 255, .035);
         color: #dbe1eb;
         cursor: pointer;
         font-size: 12px;
         font-weight: 600;
         transition: .25s;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px
     }

     .upload-btn:hover {
         background: rgba(255, 255, 255, .075);
         border-color: #424b5d;
         transform: translateY(-2px)
     }

     .file-box {
         margin-top: 16px;
         display: none
     }

     .file-box.show {
         display: block;
         animation: fadeUp .35s ease
     }

     .file-top {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 9px
     }

     .file-top span {
         color: #8e98aa;
         font-size: 11px
     }

     .file-list {
         max-height: 210px;
         overflow: auto;
         display: flex;
         flex-direction: column;
         gap: 6px
     }

     .file {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 10px 11px;
         border: 1px solid rgba(255, 255, 255, .055);
         border-radius: 10px;
         background: rgba(255, 255, 255, .025)
     }

     .file i {
         color: #ff8a4d;
         width: 18px;
         text-align: center
     }

     .file-name {
         min-width: 0;
         flex: 1;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         color: #bfc7d5;
         font-size: 11px
     }

     .file-size {
         color: #697487;
         font-size: 10px
     }

     .remove-file {
         color: #697487;
         background: none;
         cursor: pointer;
         padding: 3px;
         transition: .2s
     }

     .remove-file:hover {
         color: var(--red)
     }

     .deploy-actions {
         display: flex;
         gap: 10px;
         margin-top: 18px
     }

     .btn {
         height: 50px;
         border-radius: 13px;
         cursor: pointer;
         font-size: 13px;
         font-weight: 700;
         transition: .25s;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 9px
     }

     .btn-clear {
         width: 120px;
         color: #aab3c2;
         border: 1px solid var(--line);
         background: rgba(255, 255, 255, .035)
     }

     .btn-clear:hover {
         color: white;
         background: rgba(255, 255, 255, .07)
     }

     .btn-deploy {
         flex: 1;
         color: white;
         background: linear-gradient(135deg, #ff541f, #ff8b35);
         box-shadow: 0 12px 30px rgba(255, 91, 34, .18)
     }

     .btn-deploy:hover:not(:disabled) {
         transform: translateY(-2px);
         box-shadow: 0 17px 40px rgba(255, 91, 34, .28)
     }

     .btn:disabled {
         opacity: .45;
         cursor: not-allowed;
         transform: none !important
     }

     .side {
         display: flex;
         flex-direction: column;
         gap: 20px;
         animation: fadeUp .8s .3s ease both
     }

     .side-card {
         padding: 20px
     }

     .side-title {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 16px
     }

     .side-title h3 {
         font-size: 14px
     }

     .side-title span {
         font-size: 10px;
         color: #697487
     }

     .projects {
         display: flex;
         flex-direction: column;
         gap: 8px;
         max-height: 350px;
         overflow: auto
     }

     .empty {
         padding: 30px 10px;
         text-align: center;
         color: #667083;
         font-size: 11px
     }

     .empty i {
         font-size: 24px;
         margin-bottom: 10px;
         display: block;
         opacity: .5
     }

     .project {
         padding: 12px;
         border: 1px solid rgba(255, 255, 255, .06);
         background: rgba(255, 255, 255, .025);
         border-radius: 12px;
         transition: .25s;
         cursor: pointer
     }

     .project:hover {
         transform: translateX(3px);
         background: rgba(255, 255, 255, .05)
     }

     .project-main {
         display: flex;
         align-items: center;
         gap: 10px
     }

     .project-icon {
         width: 34px;
         height: 34px;
         border-radius: 9px;
         display: grid;
         place-items: center;
         color: #ff914e;
         background: rgba(255, 91, 34, .09)
     }

     .project-info {
         min-width: 0;
         flex: 1
     }

     .project-name {
         color: #dce2ec;
         font-size: 11px;
         font-weight: 700;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
     }

     .project-url {
         color: #657083;
         font-size: 9px;
         margin-top: 3px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
     }

     .status {
         font-size: 8px;
         padding: 4px 6px;
         border-radius: 6px;
         color: #63dfa9;
         background: rgba(53, 212, 154, .08)
     }

     .features {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px
     }

     .feature {
         padding: 12px;
         border: 1px solid rgba(255, 255, 255, .055);
         border-radius: 11px;
         background: rgba(255, 255, 255, .02)
     }

     .feature i {
         color: #ff8c4a;
         font-size: 13px;
         margin-bottom: 8px
     }

     .feature b {
         display: block;
         font-size: 10px;
         margin-bottom: 3px
     }

     .feature span {
         color: #687286;
         font-size: 9px;
         line-height: 1.4
     }

     .result {
         display: none;
         margin-top: 15px;
         padding: 17px;
         border: 1px solid rgba(53, 212, 154, .2);
         background: rgba(53, 212, 154, .045);
         border-radius: 14px
     }

     .result.show {
         display: block;
         animation: success .5s ease
     }

     .result-head {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 11px
     }

     .result-icon {
         width: 34px;
         height: 34px;
         border-radius: 10px;
         display: grid;
         place-items: center;
         color: var(--green);
         background: rgba(53, 212, 154, .1)
     }

     .result h3 {
         font-size: 13px
     }

     .result p {
         color: #718091;
         font-size: 10px;
         margin-top: 3px
     }

     .result-url {
         display: flex;
         gap: 7px;
         margin-top: 10px
     }

     .result-url input {
         min-width: 0;
         flex: 1;
         height: 39px;
         border: 1px solid rgba(255, 255, 255, .07);
         background: rgba(0, 0, 0, .2);
         color: #aeb8c8;
         border-radius: 9px;
         padding: 0 10px;
         outline: 0;
         font-size: 10px
     }

     .copy,
     .open {
         width: 40px;
         height: 39px;
         border-radius: 9px;
         cursor: pointer;
         color: #dce4ef;
         border: 1px solid rgba(255, 255, 255, .07);
         background: rgba(255, 255, 255, .04);
         transition: .2s
     }

     .copy:hover,
     .open:hover {
         background: rgba(255, 255, 255, .09)
     }

     .overlay {
         position: fixed;
         inset: 0;
         z-index: 100;
         display: none;
         place-items: center;
         padding: 20px;
         background: rgba(2, 4, 8, .78);
         backdrop-filter: blur(16px)
     }

     .overlay.show {
         display: grid
     }

     .deploy-modal {
         width: min(450px, 100%);
         padding: 28px;
         border: 1px solid rgba(255, 255, 255, .1);
         border-radius: 24px;
         background: linear-gradient(145deg, #161b25, #0d1017);
         box-shadow: 0 30px 100px rgba(0, 0, 0, .65);
         animation: modalIn .4s ease
     }

     .loader {
         width: 70px;
         height: 70px;
         margin: 0 auto 20px;
         border-radius: 50%;
         display: grid;
         place-items: center;
         position: relative;
         background: rgba(255, 91, 34, .08)
     }

     .loader:before {
         content: "";
         position: absolute;
         inset: 0;
         border-radius: 50%;
         border: 2px solid transparent;
         border-top-color: #ff682b;
         border-right-color: #ff9c3e;
         animation: spin 1s linear infinite
     }

     .loader i {
         color: #ff8b45;
         font-size: 22px
     }

     .deploy-modal h2 {
         text-align: center;
         font-size: 18px;
         margin-bottom: 6px
     }

     .deploy-modal>p {
         text-align: center;
         color: #737d8e;
         font-size: 11px;
         margin-bottom: 25px
     }

     .steps {
         display: flex;
         flex-direction: column;
         gap: 8px
     }

     .step {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 11px 12px;
         border-radius: 11px;
         color: #596375;
         background: rgba(255, 255, 255, .025);
         font-size: 11px;
         transition: .35s
     }

     .step-icon {
         width: 25px;
         height: 25px;
         border-radius: 8px;
         display: grid;
         place-items: center;
         border: 1px solid rgba(255, 255, 255, .06);
         font-size: 9px
     }

     .step.active {
         color: #e6ebf3;
         background: rgba(255, 91, 34, .07)
     }

     .step.active .step-icon {
         color: #ff8c49;
         border-color: rgba(255, 91, 34, .25)
     }

     .step.done {
         color: #9ba7b9
     }

     .step.done .step-icon {
         color: var(--green);
         border-color: rgba(53, 212, 154, .2)
     }

     .progress {
         height: 4px;
         background: #202632;
         border-radius: 10px;
         overflow: hidden;
         margin-top: 18px
     }

     .progress i {
         display: block;
         height: 100%;
         width: 0;
         background: linear-gradient(90deg, #ff5420, #ff9e42);
         transition: width .5s ease
     }

     .toast {
         position: fixed;
         z-index: 200;
         right: 20px;
         bottom: 20px;
         width: min(360px, calc(100% - 40px));
         padding: 13px 15px;
         display: flex;
         align-items: center;
         gap: 10px;
         border: 1px solid var(--line);
         border-radius: 13px;
         background: #151a23;
         box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
         transform: translateY(100px);
         opacity: 0;
         transition: .35s
     }

     .toast.show {
         transform: translateY(0);
         opacity: 1
     }

     .toast i {
         color: #ff8845
     }

     .toast span {
         color: #c6ceda;
         font-size: 11px
     }

     footer {
         width: min(1180px, calc(100% - 32px));
         margin: 0 auto 30px;
         text-align: center;
         color: #535d6d;
         font-size: 10px
     }

     footer b {
         color: #737e8f
     }

     @keyframes fadeUp {
         from {
             opacity: 0;
             transform: translateY(20px)
         }

         to {
             opacity: 1;
             transform: translateY(0)
         }
     }

     @keyframes success {
         from {
             opacity: 0;
             transform: scale(.97)
         }

         to {
             opacity: 1;
             transform: scale(1)
         }
     }

     @keyframes modalIn {
         from {
             opacity: 0;
             transform: scale(.94) translateY(12px)
         }

         to {
             opacity: 1;
             transform: scale(1) translateY(0)
         }
     }

     @keyframes spin {
         to {
             transform: rotate(360deg)
         }
     }

     @media(max-width:850px) {
         .layout {
             grid-template-columns: 1fr
         }

         .side {
             display: grid;
             grid-template-columns: 1fr 1fr
         }
     }

     @media(max-width:600px) {
         .top {
             height: 68px
         }

         .nav-right .pill {
             display: none
         }

         main {
             margin-top: 20px
         }

         .hero {
             margin: 35px auto 30px
         }

         .hero h1 {
             letter-spacing: -2.5px
         }

         .deploy-card,
         .side-card {
             padding: 17px
         }

         .side {
             display: flex
         }

         .upload-actions {
             grid-template-columns: 1fr
         }

         .deploy-actions {
             flex-direction: column
         }

         .btn-clear {
             width: 100%
         }

         .drop {
             min-height: 205px
         }
     }