@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
    --bg: #080816;
    --text: #f8fafc;
    --muted: #a5b4fc;
    --glass: rgba(255, 255, 255, 0.10);
    --glass2: rgba(255, 255, 255, 0.16);
    --border: rgba(255, 255, 255, 0.20);
    --primary: #8b5cf6;
    --primary2: #06b6d4;
    --danger: #fb7185;
    --shadow: 0 30px 90px rgba(0,0,0,.35);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Cairo, Tahoma, Arial, sans-serif;
    color: var(--text);
}

/* ================= LOGIN CIRCUS ================= */

.login-page {
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(139,92,246,.45), transparent 25%),
        radial-gradient(circle at 82% 82%, rgba(6,182,212,.30), transparent 26%),
        linear-gradient(135deg, #070716 0%, #14112d 48%, #071e2c 100%);
}

.circus-stage {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    isolation: isolate;
}

.circus-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle, black 0%, transparent 78%);
    animation: gridMove 10s linear infinite;
}

.spotlight {
    position: absolute;
    top: -8%;
    width: 42vw;
    height: 115vh;
    background: linear-gradient(to bottom, rgba(255,255,255,.20), transparent 68%);
    clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
    filter: blur(10px);
    opacity: .36;
    transform-origin: top center;
    z-index: -1;
}

.spotlight-1 {
    left: 8%;
    animation: swingLight 4.5s ease-in-out infinite;
}

.spotlight-2 {
    right: 8%;
    animation: swingLight2 5.2s ease-in-out infinite;
}

.acrobat-wrap {
    position: absolute;
    top: 9%;
    right: 12%;
    width: 170px;
    height: 190px;
    animation: enterFlip 1.1s cubic-bezier(.17,.84,.44,1) both;
}

.rope {
    position: absolute;
    top: 0;
    right: 50%;
    width: 3px;
    height: 75px;
    background: linear-gradient(#fff, rgba(255,255,255,.25));
    box-shadow: 0 0 18px rgba(255,255,255,.55);
}

.acrobat {
    position: absolute;
    top: 60px;
    right: 28px;
    font-size: 78px;
    filter: drop-shadow(0 20px 25px rgba(0,0,0,.45));
    animation: acrobat 2.3s ease-in-out infinite;
}

.shadow {
    position: absolute;
    bottom: 0;
    right: 42px;
    width: 85px;
    height: 18px;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    filter: blur(8px);
    animation: shadowPulse 2.3s ease-in-out infinite;
}

.confetti {
    position: absolute;
    width: 13px;
    height: 22px;
    border-radius: 5px;
    top: -40px;
    opacity: .9;
    animation: fall 6s linear infinite;
}

.c1 { right: 12%; background: #fb7185; animation-delay: .2s; }
.c2 { right: 28%; background: #facc15; animation-delay: 1s; }
.c3 { right: 44%; background: #22c55e; animation-delay: 1.7s; }
.c4 { right: 61%; background: #38bdf8; animation-delay: .6s; }
.c5 { right: 76%; background: #a78bfa; animation-delay: 2.2s; }
.c6 { right: 89%; background: #f97316; animation-delay: 3s; }

.login-box {
    width: min(470px, 100%);
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 34px;
    padding: 38px 34px;
    box-shadow:
        0 35px 100px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.25);
    backdrop-filter: blur(22px);
    animation: loginPop .9s cubic-bezier(.17,.84,.44,1) both;
    overflow: hidden;
}

.login-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 180deg, transparent, rgba(139,92,246,.75), rgba(6,182,212,.8), transparent 35%);
    z-index: -2;
    animation: borderSpin 5s linear infinite;
}

.login-box::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: rgba(11, 11, 28, .76);
    border-radius: 33px;
    z-index: -1;
}

.logo-orbit {
    width: 82px;
    height: 82px;
    margin: 0 auto 14px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    box-shadow: 0 20px 50px rgba(139,92,246,.45);
    animation: logoBounce 2.4s ease-in-out infinite;
}

.logo-orbit span {
    font-size: 38px;
}

.logo-orbit::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px dashed rgba(255,255,255,.42);
    border-radius: 35px;
    animation: orbitSpin 8s linear infinite;
}

.mini-title {
    display: table;
    margin: 0 auto 10px;
    padding: 7px 15px;
    border-radius: 999px;
    color: #cffafe;
    background: rgba(6,182,212,.13);
    border: 1px solid rgba(6,182,212,.35);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .6px;
}

.login-box h1 {
    margin: 0;
    text-align: center;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 900;
}

.login-box p {
    margin: 10px 0 22px;
    text-align: center;
    color: #c4b5fd;
}

.alert {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(251,113,133,.16);
    border: 1px solid rgba(251,113,133,.35);
    color: #fecdd3;
    text-align: center;
    margin-bottom: 14px;
}

.field {
    margin-top: 15px;
}

.field label,
.command-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
    color: #e0e7ff;
}

.field input,
.command-form input[type="text"],
.command-form textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    padding: 15px 17px;
    outline: none;
    color: #fff;
    background: rgba(255,255,255,.10);
    transition: .25s ease;
    font-size: 16px;
    font-family: Cairo, Tahoma, Arial, sans-serif;
}

.field input:focus,
.command-form input[type="text"]:focus,
.command-form textarea:focus {
    border-color: rgba(6,182,212,.85);
    box-shadow: 0 0 0 5px rgba(6,182,212,.10);
    transform: translateY(-2px);
}

.magic-btn,
.primary-btn,
.ghost-btn,
.search-panel button,
.search-panel a {
    text-decoration: none;
    border: 0;
    cursor: pointer;
    border-radius: 18px;
    font-family: Cairo, Tahoma, Arial, sans-serif;
    font-weight: 900;
    transition: .25s ease;
}

.magic-btn {
    width: 100%;
    margin-top: 24px;
    padding: 16px 22px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    font-size: 17px;
    box-shadow: 0 22px 45px rgba(6,182,212,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.magic-btn::before,
.primary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: -110%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
}

.magic-btn:hover::before,
.primary-btn:hover::before {
    animation: shine .8s ease;
}

.magic-btn:hover,
.primary-btn:hover,
.ghost-btn:hover,
.search-panel button:hover,
.search-panel a:hover {
    transform: translateY(-3px) scale(1.02);
}

/* ================= APP ================= */

.app-page {
    background:
        radial-gradient(circle at top right, rgba(139,92,246,.34), transparent 28%),
        radial-gradient(circle at bottom left, rgba(6,182,212,.22), transparent 30%),
        #080816;
    overflow-x: hidden;
}

.app-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.app-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 54px 54px;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
    opacity: .7;
    animation: floatOrb 8s ease-in-out infinite;
}

.orb-a {
    width: 330px;
    height: 330px;
    background: rgba(139,92,246,.45);
    top: 7%;
    right: -90px;
}

.orb-b {
    width: 280px;
    height: 280px;
    background: rgba(6,182,212,.32);
    bottom: 6%;
    left: -70px;
    animation-delay: 1.3s;
}

.orb-c {
    width: 180px;
    height: 180px;
    background: rgba(251,113,133,.30);
    top: 55%;
    right: 52%;
    animation-delay: 2.2s;
}

.layout {
    width: min(1280px, 92%);
    margin: 34px auto;
}

.small-layout {
    max-width: 850px;
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 30px;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.07));
    border: 1px solid var(--border);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
    animation: dropIn .7s ease both;
}

.dashboard-hero.compact {
    padding: 25px;
}

.dashboard-hero .mini-title {
    margin: 0 0 10px;
}

.dashboard-hero h1 {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
}

.dashboard-hero p {
    margin: 8px 0 0;
    color: #c4b5fd;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.primary-btn,
.ghost-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 22px;
    color: #fff;
}

.primary-btn {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    box-shadow: 0 20px 45px rgba(139,92,246,.25);
}

.ghost-btn {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
}

.primary-btn.full {
    width: 100%;
    margin-top: 20px;
}

.search-panel {
    display: flex;
    gap: 12px;
    margin: 24px 0;
    animation: riseIn .75s ease both;
}

.search-panel input {
    flex: 1;
    min-height: 54px;
    border-radius: 20px;
    padding: 0 18px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    outline: none;
    font-size: 16px;
    backdrop-filter: blur(16px);
}

.search-panel input::placeholder {
    color: rgba(255,255,255,.58);
}

.search-panel button,
.search-panel a {
    padding: 0 24px;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 22px;
}

.note-card {
    --accent: #8b5cf6;
    position: relative;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.065));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px) rotateX(8deg);
    animation: cardShow .7s cubic-bezier(.17,.84,.44,1) forwards;
    transition: .25s ease;
}

.note-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 6px solid var(--accent);
    pointer-events: none;
}

.note-card:hover {
    transform: translateY(-9px) scale(1.018);
    box-shadow: 0 35px 100px rgba(0,0,0,.42);
}

.note-shine {
    position: absolute;
    top: -30%;
    right: -65%;
    width: 70%;
    height: 170%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: rotate(18deg);
    transition: .55s;
}

.note-card:hover .note-shine {
    right: 115%;
}

.note-header {
    position: relative;
    padding: 21px 20px 8px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pin {
    display: inline-block;
    margin-bottom: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(250,204,21,.14);
    border: 1px solid rgba(250,204,21,.24);
    color: #fde68a;
    font-size: 12px;
    font-weight: 900;
}

.note-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.45;
    word-break: break-word;
}

.note-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.icon-btn {
    width: 39px;
    height: 39px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.11);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .22s ease;
}

.icon-btn:hover {
    transform: translateY(-4px) rotate(-6deg);
    background: rgba(139,92,246,.22);
}

.icon-btn.copied {
    background: rgba(34,197,94,.25);
    transform: scale(1.12) rotate(8deg);
}

.icon-btn.danger:hover {
    background: rgba(251,113,133,.22);
}

.note-card pre {
    position: relative;
    margin: 0;
    padding: 10px 20px 22px;
    min-height: 135px;
    white-space: pre-wrap;
    word-break: break-word;
    direction: ltr;
    text-align: left;
    color: #e0f2fe;
    line-height: 1.72;
    font: 14px Consolas, Monaco, monospace;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 55px 25px;
    border-radius: 30px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(16px);
    animation: riseIn .75s ease both;
}

.empty-icon {
    font-size: 58px;
    animation: acrobat 2.5s ease-in-out infinite;
}

.empty-state h2 {
    margin: 12px 0 6px;
    font-size: 28px;
}

.empty-state p {
    color: #c4b5fd;
    margin: 0;
}

.command-form {
    margin-top: 24px;
    padding: 28px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    animation: riseIn .75s ease both;
}

.command-form label {
    margin-top: 16px;
}

.command-form textarea {
    direction: ltr;
    text-align: left;
    font-family: Consolas, Monaco, monospace;
    resize: vertical;
}

.form-row {
    display: flex;
    align-items: end;
    gap: 22px;
    flex-wrap: wrap;
}

input[type="color"] {
    width: 95px;
    height: 52px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.check-line {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

#toast {
    position: fixed;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%) translateY(18px) scale(.94);
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    color: #fff;
    border-radius: 999px;
    padding: 13px 22px;
    font-weight: 900;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
    z-index: 50;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ================= ANIMATIONS ================= */

@keyframes gridMove {
    from { background-position: 0 0; }
    to { background-position: 48px 48px; }
}

@keyframes swingLight {
    0%,100% { transform: rotate(-12deg); }
    50% { transform: rotate(14deg); }
}

@keyframes swingLight2 {
    0%,100% { transform: rotate(12deg); }
    50% { transform: rotate(-14deg); }
}

@keyframes enterFlip {
    from { opacity: 0; transform: translateY(-150px) rotate(220deg) scale(.6); }
    to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes acrobat {
    0%,100% { transform: translateY(0) rotate(-8deg); }
    35% { transform: translateY(-22px) rotate(14deg); }
    70% { transform: translateY(5px) rotate(-16deg); }
}

@keyframes shadowPulse {
    0%,100% { transform: scale(1); opacity: .32; }
    50% { transform: scale(.65); opacity: .16; }
}

@keyframes fall {
    0% { transform: translateY(-80px) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateY(110vh) rotate(560deg); opacity: 0; }
}

@keyframes loginPop {
    from { opacity: 0; transform: translateY(45px) scale(.90) rotateX(12deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

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

@keyframes logoBounce {
    0%,100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-9px) rotate(4deg); }
}

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

@keyframes shine {
    to { right: 130%; }
}

@keyframes floatOrb {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(28px,-24px) scale(1.08); }
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-28px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes cardShow {
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@media (max-width: 850px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-hero h1,
    .login-box h1 {
        font-size: 30px;
    }

    .search-panel {
        flex-direction: column;
    }

    .notes-grid {
        grid-template-columns: 1fr;
    }

    .acrobat-wrap {
        opacity: .55;
        right: auto;
        left: 4%;
        transform: scale(.75);
    }
}

@media (max-width: 520px) {
    .layout {
        width: 94%;
        margin: 18px auto;
    }

    .login-box {
        padding: 28px 22px;
        border-radius: 26px;
    }

    .dashboard-hero,
    .command-form,
    .note-card {
        border-radius: 24px;
    }

    .note-header {
        flex-direction: column;
    }
}