/* Modern Design Tokens & CSS Variables */
        :root {
            --bg-main: #3b141c;
            --bg-card: #2c1525;
            --bg-input: #3b141c;
            --primary: #e47309;
            --primary-hover: #E04826;
            --accent: #FFB800;
            --text-white: #FFFFFF;
            --text-muted: #94A3B8;
            --text-dark: #1E293B;
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            --bg-green: #2e7d32;
        }
        /* English Font Stack */
        @font-face {
            font-family: 'RoastedBrisket';
            font-weight: 400 800;
            font-display: swap;
            src: url('Font/RoastedBrisket.ttf') format('truetype');
        }
        @font-face{
            font-family: 'kxon';
            font-weight: 400 800;
            font-display: swap;
            src: url('Font/kxon.ttf') format('truetype');
        }
        @font-face{
            font-family: 'MilesdaneTrial';
            font-weight: 400 800;
            font-display: swap;
            src: url('Font/Milesdane Trial.otf') format('truetype');
        }
        /* Base Global Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body {
            background:
                linear-gradient(rgba(45, 25, 17, 0.58), rgba(16, 12, 10, 0.66)),
                url('Image/food_body.jpg?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat fixed;
            color: var(--text-white);
            overflow-x: hidden;
            position: relative;
            font-family: Georgia, "Times New Roman", serif;
        }
        
        header{border-bottom:1px solid rgba(255,255,255,0.24); position:sticky; top:0; z-index:1000;
        background: rgba(56, 1, 17, 1); backdrop-filter: blur(8px);}
        .container {
            max-width: 1200px;
            padding: 5px 24px;
            margin: 0 auto;
            display:inline-flex;
            justify-content: space-between; /* Pushes H1 to left and Nav to right */
            align-items: center; 
            
        }
        .container h1{
            font-size:36px;
            margin-left:0px;
            font-family: 'RoastedBrisket';
        }
        .header-profile-button { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; overflow: hidden; margin-right: 12px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: linear-gradient(135deg, #ff6b35, #ffb347); color: #fff; font-family: Arial, sans-serif; font-size: 17px; font-weight: 700; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.18); transition: transform .2s ease, border-color .2s ease; }
        .header-profile-button img { width: 100%; height: 100%; object-fit: cover; }
        .header-profile-button:hover { transform: translateY(-2px); border-color: #ffb347; }
        .menu-toggle { display: none; }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            vertical-align:bottom;
            margin-left:24px;
            padding:2px 1px;
        }

        nav ul{
            display: inline-flex;
            gap: 18px;
        }
        nav ul li{
            list-style: none;
        }
        nav ul li a{
            text-decoration: none;
            color: var(--text-white);
            font-weight: 500;
            transition: var(--transition);
        }
        nav ul li a:hover{
            color: var(--primary);
        }
        p{margin:10px 0px;}
        .bag{width:100px; height:100px;margin:0px;}
        .hero{margin:20px 50px;}
        footer{border-top:1px solid #fff;margin-top:15%; display:inline-flex; width:100%;}
        .footer-div{margin:30px 100px;}
        a{color:var(--text-white);}
        .privacy-policy-div{margin:20px 150px;padding:20px 40px; background-color:#fff;
        width:80%; padding:20px 40px; align-items:left; color:#000; border-radius:10px;}
        .footer-privacy-div{margin:20px;padding:20px 40px; 
        align-items:left; color:#fff; }
        .animation-div{width:40em; height:400px;margin:5px 50px;
        position: relative; overflow: hidden; background-color:#fff;border-radius:10px; border:1px solid #fff; z-index:1;}
        .food-video{ position:absolute; width: 100%; max-width:700px; height:400px; border-radius:10px;
        margin:0px;
        border:1px solid #fff; z-index:1; top: 0; left: 0;object-fit: cover;
        opacity: 1;
        transform: translateX(0);
        transition: opacity 0.45s ease, transform 0.45s ease;
        
        }
        .food-video.is-fading{
            opacity: 0;
            transform: translateX(-30px);
        }
        .animation-over{width:40em; height:400px; z-index:2;background-color:rgba(0, 0, 0, 0.1);
        position:absolute; display: flex;flex-direction: column;}
        .order-now{
            margin-top:0px;
            background-color: var(--bg-input);
            color: var(--text-white);
            border: none;
            padding: 15px 50px;
            font-size: 18px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: var(--transition);
            border:1px solid #fff;
        }
        .right-side{
            width:40em; height:400px;
            float:right;
            margin-right:10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
        }
        .order-now:hover{
            background-color: var(--text-white);
            Color: var(--bg-input);
        }

        /* Stylish Home Landing Page */
        .page-shell {
            max-width: 1200px;
            margin: 34px auto 40px;
            padding: 0 20px;
        }

        .hero-panel {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            align-items: center;
            gap: 28px;
            min-height: 620px;
            padding: 42px 36px;
            background: rgba(255, 246, 238, 0.84);
            border: 1px solid rgba(196, 150, 97, 0.7);
            box-shadow: 0 20px 45px rgba(20, 11, 8, 0.18);
            border-radius: 18px;
        }

        .eyebrow {
            display: inline-block;
            padding: 9px 16px;
            border: 1px solid rgba(157, 101, 56, 0.45);
            background: rgba(193, 133, 77, 0.08);
            color: #8d5b2e;
            font-size: 0.78rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-weight: 700;
            margin-bottom: 18px;
        }

        .hero-copy {
            max-width: 590px;
            padding-right: 10px;
        }

        .hero-copy h1 {
            margin: 0;
            font-size: clamp(2.7rem, 4vw, 5rem);
            line-height: 1.08;
            color: #2f2019;
            letter-spacing: 0.02em;
            text-transform: capitalize;
        }

        .hero-copy h4 {
            margin: 18px 0 12px;
            font-size: 1.35rem;
            color: #5b473d;
            font-weight: 600;
        }

        .hero-copy p {
            margin: 0;
            font-size: 1.08rem;
            line-height: 1.8;
            color: #584b44;
            max-width: 560px;
            font-family: Arial, sans-serif;
        }

        .cta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 28px;
        }

        .order-now,
        .secondary-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 15px 26px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .order-now {
            background: linear-gradient(135deg, #c7884e, #9a6638);
            color: #fff;
            box-shadow: 0 10px 22px rgba(157, 101, 56, 0.28);
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 12px;
        }

        .secondary-btn {
            background: transparent;
            color: #2e2018;
            border: 1px solid rgba(57, 39, 27, 0.45);
            border-radius: 12px;
        }

        .order-now:hover,
        .secondary-btn:hover {
            transform: translateY(-2px);
        }

        .feature-list {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            list-style: none;
            margin: 26px 0 0;
            padding: 0;
        }

        .feature-list li {
            padding: 10px 14px;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(57, 39, 27, 0.1);
            color: #35261d;
            font-size: 0.9rem;
            font-family: Arial, sans-serif;
            letter-spacing: 0.04em;
            border-radius: 999px;
        }

        .hero-media {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .video-frame {
            position: relative;
            width: 100%;
            max-width: 500px;
            height: 400px;
            padding: 0px;
            background: linear-gradient(135deg, #f0e1cf, #fffaf6);
            border: 1px solid rgba(157, 101, 56, 0.45);
            box-shadow: 0 18px 34px rgba(57, 39, 27, 0.12);
            margin: 0 auto;
            overflow: hidden;
            border-radius: 10px;
        }

        .food-video {
            display: block;
            width: 100%;
            height: 420px;
            object-fit: cover;
            border: 1px solid rgba(57, 39, 27, 0.15);
            background: #d7c1a4;
            border-radius: 10px;
        }

        .animation-over {
            position: absolute;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
            pointer-events: none;
        }

        .is-fading {
            opacity: 0.8;
            transition: opacity 0.45s ease;
        }

        @media (max-width: 900px) {
            .hero-panel {
                grid-template-columns: 1fr;
                padding: 28px 20px;
                min-height: auto;
            }

            .hero-copy {
                text-align: center;
                margin: 0 auto;
                padding-right: 0;
            }

            .cta-row {
                justify-content: center;
            }

            .feature-list {
                justify-content: center;
            }

            .hero-media {
                order: 2;
            }
        }

        @media (max-width: 576px) {
            .page-shell {
                margin-top: 18px;
                padding: 0 14px;
            }

            .hero-copy h1 {
                font-size: 2.4rem;
            }

            .food-video {
                height: 380px;
            }
        }
        /* Restaurant List Styles */

        .row {
            display: flex;
            flex-wrap: wrap;
            gap:10px;
            justify-content: center;
        }
        .card {
            background-color: transparent;
            border: 1px solid var(--text-white);
            border-radius: var(--radius-md);
            padding:5px;
            width:fit-content;
            text-align: center;
            gap:0px;
        }
        .card p {
            margin:0px;
            font-size: 16px;
            color: var(--text-white);
            width:100px;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        .card-img-top{ width:100px; height:100px; margin:0px; border-radius:10px; object-fit:cover;}

        /* Menu page visual system */
        body:has(#location-status) {
            min-height: 100vh;
            background:
                linear-gradient(rgba(45, 25, 17, 0.28), rgba(16, 12, 10, 0.38)),
                url('Image/food_body.jpg?auto=format&fit=crop&w=1800&q=80') center/cover fixed;
            color: #fff8ef;
        }

        body:has(#location-status) > .container {
            max-width: 1180px;
            margin: 0 auto;
            padding: 42px 24px 0;
            display: block;
        }

        body:has(#location-status) .page-header {
            position: relative;
            justify-content: flex-start;
            margin: 0 0 16px;
            text-align: left;
        }

        body:has(#location-status) .page-header::before {
            content: "TODAY'S TABLE";
            display: block;
            margin-bottom: 10px;
            color: #f3b247;
            font-family: Arial, sans-serif;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.22em;
        }

        body:has(#location-status) h2 {
            padding: 0;
            border: 0;
            background: none;
            box-shadow: none;
            color: #fff8ef;
            font-size: clamp(2.4rem, 5vw, 4.8rem);
            line-height: 0.98;
            letter-spacing: -0.04em;
            text-transform: none;
        }

        body:has(#location-status) #location-status {
            max-width: none;
            margin: 0 0 34px;
            padding: 13px 16px;
            border: 1px solid rgba(243, 178, 71, 0.28);
            border-radius: 12px;
            background: rgba(255, 248, 239, 0.07);
            color: rgba(255, 248, 239, 0.72);
            text-align: left;
            font-size: 0.9rem;
        }

        body:has(#location-status) .row {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px 48px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
            gap: 16px;
            align-items: stretch;
        }

        body:has(#location-status) .card {
            width: 100%;
            max-width: none;
            padding: 0;
            overflow: hidden;
            background: #fff8ef;
            border: 0;
            border-radius: 18px;
            color: #2d111b;
            box-shadow: 0 18px 35px rgba(8, 2, 5, 0.24);
            transition: transform 220ms ease, box-shadow 220ms ease;
        }

        body:has(#location-status) .card:hover {
            transform: translateY(-8px) rotate(-0.4deg);
            box-shadow: 0 25px 44px rgba(8, 2, 5, 0.34);
        }

        body:has(#location-status) .card-img-top {
            width: 100%;
            height: 170px;
            border: 0;
            border-radius: 0;
            object-fit: cover;
            background: #ead9c7;
            transition: transform 350ms ease;
        }

        body:has(#location-status) .card:hover .card-img-top {
            transform: scale(1.04);
        }

        body:has(#location-status) .card-body {
            min-height: 0;
            padding: 14px 16px 16px;
            text-align: left;
        }

        body:has(#location-status) .card-body h4 {
            margin: 0 0 5px;
            color: #2d111b;
            font-size: 1.2rem;
            line-height: 1.1;
        }

        body:has(#location-status) .restaurant-name {
            display: block;
            margin: 0 0 10px;
            color: #dc552d;
            font-family: Arial, sans-serif;
            font-size: 0.68rem;
            line-height: 1.3;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        body:has(#location-status) .card-body p {
            margin: 5px 0;
            color: #765d56;
            font-family: Arial, sans-serif;
            font-size: 0.8rem;
            line-height: 1.45;
        }

        body:has(#location-status) .card-body strong {
            color: #2d111b;
        }

        body:has(#location-status) .quantity-control {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 10px;
            color: #765d56;
            font-family: Arial, sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        body:has(#location-status) .quantity-input {
            width: 54px;
            padding: 6px 5px;
            border: 1px solid #d8b997;
            border-radius: 8px;
            background: #fffdf9;
            color: #2d111b;
            font: inherit;
            text-align: center;
        }

        body:has(#location-status) .btn {
            display: block;
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 10px;
            background: #2d111b;
            color: #fff8ef;
            font-family: Arial, sans-serif;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-align: center;
            text-transform: uppercase;
            box-shadow: none;
        }

        body:has(#location-status) .btn:hover {
            background: #dc552d;
            transform: none;
        }

        @media (max-width: 786px) {
            body:has(#location-status) > .container {
                padding: 28px 16px 0;
            }

            body:has(#location-status) .row {
                padding: 0 16px 42px;
                grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            }

            body:has(#location-status) .card-img-top {
                height: 180px;
            }
        }

        /* Classic order history */
        body:has(.orders-page) {
            
            color: #ffffff;
        }

        body:has(.orders-page) .orders-page {
            width: min(900px, calc(100% - 40px));
            margin: 48px auto 72px;
            padding: 42px 48px;
            background: #fffdf7;
            border: 1px solid #cdbda7;
            box-shadow: 0 12px 30px rgba(64, 47, 29, 0.12);
        }

        body:has(.orders-page) .orders-page h1 {
            margin: 0 0 30px;
            padding-bottom: 16px;
            border-bottom: 2px solid #8d6e4b;
            color: #3b2b20;
            font-family: Georgia, "Times New Roman", serif;
            font-size: 2.3rem;
            font-weight: 700;
            letter-spacing: 0;
        }

        body:has(.orders-page) .order-card {
            margin: 0 0 18px;
            padding: 22px 24px;
            background: #fff;
            border: 1px solid #d8cbb9;
            border-left: 5px solid #8d6e4b;
            box-shadow: 0 3px 9px rgba(64, 47, 29, 0.07);
        }

        body:has(.orders-page) .order-card h2 {
            margin: 0 0 10px;
            color: #3b2b20;
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.25rem;
        }

        body:has(.orders-page) .order-card p {
            margin: 8px 0 0;
            color: #635548;
            font-family: Georgia, "Times New Roman", serif;
            line-height: 1.6;
        }

        body:has(.orders-page) .order-card strong {
            color: #684b2f;
        }

        body:has(.orders-page) .order-card a {
            color: #805c35;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        body:has(.orders-page) .orders-page > p {
            padding: 20px;
            border: 1px dashed #cdbda7;
            color: #635548;
            text-align: center;
        }

        body:has(.orders-page) .orders-filter { display: flex; align-items: end; gap: 10px; margin-bottom: 28px; padding: 16px; border: 1px solid #d8cbb9; background: #f7f2e9; text-align: left; }
        body:has(.orders-page) .orders-filter label { grid-row: 1; color: #684b2f; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
        body:has(.orders-page) .orders-filter input, body:has(.orders-page) .orders-filter select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #cdbda7; border-radius: 4px; background: #fffdf7; color: #332b24; font: inherit; }
        body:has(.orders-page) .orders-filter button { min-height: 42px; padding: 10px 15px; border: 0; border-radius: 4px; background: #684b2f; color: #fff; font-weight: 700; cursor: pointer; }
        body:has(.orders-page) .orders-filter button:hover { background: #805c35; }
        body:has(.orders-page) .orders-filter a { padding: 11px 4px; color: #684b2f; font-weight: 700; }
        body:has(.orders-page) .order-status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
        body:has(.orders-page) .order-status { display: inline-block; padding: 4px 9px; border-radius: 20px; background: #e8f0e5; color: #35603b; font-family: Arial, sans-serif; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

        /* Modern invoice */

        body:has(.invoice-page) .invoice-page {
            position: relative;
            width: min(760px, calc(100% - 40px));
            margin: 48px auto 72px;
            padding: 44px 52px;
            background: #ffffff;
            border: 1px solid #e1e8ec;
            border-radius: 18px;
            box-shadow: 0 18px 50px rgba(38, 50, 56, 0.12);
            overflow: hidden;
        }

        body:has(.invoice-page) .invoice-page::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: 7px;
            background: linear-gradient(90deg, #ff6b35, #ffb347);
        }

        body:has(.invoice-page) .invoice-page h1 {
            margin: 0 0 10px;
            color: #263238;
            font-family: 'RoastedBrisket', Georgia, serif;
            font-size: 2.7rem;
            letter-spacing: 0;
        }

        body:has(.invoice-page) .invoice-page > p:first-of-type {
            margin: 0 0 28px;
            color: #71808a;
            font-family: Arial, sans-serif;
            font-size: 0.9rem;
        }

        body:has(.invoice-page) .invoice-page hr {
            margin: 0 0 26px;
            border: 0;
            border-top: 1px solid #e7edf0;
        }

        body:has(.invoice-page) .invoice-page > p:not(:first-of-type) {
            margin: 0;
            padding: 20px 0;
            color: #607078;
            font-family: Arial, sans-serif;
            font-size: 0.96rem;
            line-height: 1.9;
        }

        body:has(.invoice-page) .invoice-page > p:nth-of-type(2) {
            padding: 22px;
            border: 1px solid #edf1f3;
            border-radius: 12px;
            background: #f8fafb;
        }

        body:has(.invoice-page) .invoice-page > p:nth-of-type(2) strong:first-child {
            display: block;
            margin-bottom: 8px;
            color: #263238;
            font-size: 1.2rem;
        }

        body:has(.invoice-page) .invoice-page > p:nth-of-type(3) {
            border-bottom: 1px solid #e7edf0;
        }

        body:has(.invoice-page) .invoice-page > p:last-child {
            padding-top: 28px;
        }

        body:has(.invoice-page) .invoice-page a {
            display: inline-flex;
            align-items: center;
            padding: 11px 18px;
            border-radius: 8px;
            color: #ffffff;
            font-family: Arial, sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.2s ease, transform 0.2s ease;
        }

        body:has(.invoice-page) .invoice-page a:hover {
            background: #ff6b35;
            transform: translateY(-2px);
        }

        @media (max-width: 786px) {
            body:has(.invoice-page) .invoice-page {
                width: calc(100% - 28px);
                margin: 24px auto 42px;
                padding: 34px 20px;
                border-radius: 14px;
            }

            body:has(.invoice-page) .invoice-page h1 {
                font-size: 2.1rem;
            }
        }

        /* Account profile */
        .profile-page { width: min(680px, calc(100% - 40px)); margin: 48px auto 72px; }
        .profile-card { position: relative; padding: 42px; background: #fff; border: 1px solid #e1e8ec; border-radius: 18px; box-shadow: 0 18px 50px rgba(38,50,56,.12); overflow: hidden; }
        .profile-card::before { content: ''; display: block; height: 92px; margin: -42px -42px 28px; background: linear-gradient(120deg, #263238 0%, #40545b 52%, #ff6b35 100%); }
        .profile-intro { display: flex; align-items: center; gap: 22px; padding-bottom: 28px; border-bottom: 1px solid #e7edf0; }
        .profile-avatar { width: 112px; height: 112px; flex: 0 0 112px; display: grid; place-items: center; overflow: hidden; margin-top: -72px; border: 6px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #ff6b35, #ffb347); box-shadow: 0 6px 16px rgba(38,50,56,.2); color: #fff; font-size: 42px; font-weight: 700; }
        .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .profile-kicker { margin: 0 0 6px; color: #ff6b35; font-family: Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
        .profile-intro h1 { margin: 0; color: #263238; font-size: 2.2rem; }
        .profile-type { margin: 6px 0 0; color: #71808a; font-family: Arial, sans-serif; }
        .profile-message { margin-top: 20px; padding: 12px 14px; border-radius: 7px; font-family: Arial, sans-serif; font-size: .9rem; }
        .profile-error { background: #ffebee; color: #a52a2a; }
        .profile-success { background: #e8f5e9; color: #256029; }
        .profile-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 26px 0; }
        .profile-details > div { min-width: 0; padding: 16px; border: 1px solid #edf1f3; border-radius: 10px; background: #fbfcfc; }
        .profile-details span, .profile-upload label { display: block; margin-bottom: 6px; color: #71808a; font-family: Arial, sans-serif; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
        .profile-details strong { color: #263238; font-family: Arial, sans-serif; font-size: .95rem; overflow-wrap: anywhere; }
        .profile-upload { padding: 22px; border: 1px solid #e7edf0; border-radius: 12px; background: #f8fafb; }
        .profile-upload input[type="file"] { display: block; width: 100%; margin-bottom: 15px; padding: 10px; border: 1px dashed #c9d3d8; border-radius: 7px; background: #fff; font-family: Arial, sans-serif; color: #607078; }
        .profile-upload button, .profile-logout { display: inline-flex; align-items: center; border: 0; border-radius: 8px; padding: 11px 18px; font-family: Arial, sans-serif; font-weight: 700; text-decoration: none; cursor: pointer; }
        .profile-upload button { background: #ff6b35; color: #fff; }
        .profile-upload button:hover { background: #e55a25; }
        .profile-logout { margin-top: 24px; background: #263238; color: #fff; }
        .profile-logout:hover { background: #a52a2a; }
        @media (max-width: 786px) { .profile-page { width: calc(100% - 28px); margin: 24px auto 42px; } .profile-card { padding: 28px 20px; border-radius: 14px; } .profile-card::before { height: 72px; margin: -28px -20px 24px; } .profile-intro { align-items: flex-start; flex-direction: column; } .profile-avatar { margin-top: -64px; } .profile-details { grid-template-columns: 1fr; } }