:root, [data-theme="gold"]{
    --p1:#e91e63; --p2:#8A2BE2; --p3:#c060e8;
    --glow: rgba(138,43,226,0.55); --soft: rgba(233,30,99,0.35);
    --bg-tint:#0a0a0a;
}
[data-theme="ruby"]{ --p1:#ff0000; --p2:#cc0000; --p3:#ff4d4d; --glow: rgba(255,0,0,0.5); --soft: rgba(204,0,0,0.35); --bg-tint:#0a0000; }
[data-theme="sapphire"]{ --p1:#4B0082; --p2:#6A5ACD; --p3:#8f7ff0; --glow: rgba(106,90,205,0.5); --soft: rgba(75,0,130,0.35); --bg-tint:#050014; }
[data-theme="emerald"]{ --p1:#00FF00; --p2:#00CC00; --p3:#66ff66; --glow: rgba(0,204,0,0.45); --soft: rgba(0,255,0,0.3); --bg-tint:#001400; }
[data-theme="amethyst"]{ --p1:#FFFF00; --p2:#CCCC00; --p3:#ffff66; --glow: rgba(204,204,0,0.45); --soft: rgba(255,255,0,0.3); --bg-tint:#141400; }
[data-theme="rose"]{ --p1:#FFA500; --p2:#CC8400; --p3:#ffc966; --glow: rgba(204,132,0,0.45); --soft: rgba(255,165,0,0.3); --bg-tint:#140c00; }
[data-theme="teal"]{ --p1:#00FFFF; --p2:#00B3B3; --p3:#66ffff; --glow: rgba(0,179,179,0.45); --soft: rgba(0,255,255,0.3); --bg-tint:#001414; }
[data-theme="silver"]{ --p1:#FF00FF; --p2:#B300B3; --p3:#ff66ff; --glow: rgba(179,0,179,0.45); --soft: rgba(255,0,255,0.3); --bg-tint:#140014; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100vh;background:#000;color:#f3ede0;font-family:'Cairo',sans-serif;-webkit-tap-highlight-color:transparent;}
body{display:flex;flex-direction:column;align-items:center;padding:1.1rem 0.8rem 3rem;overflow-x:hidden;position:relative;transition:background 0.6s ease;}
body{background:radial-gradient(circle at 50% -10%, var(--bg-tint) 0%, #000 55%, #000 100%);background-attachment:fixed;}

.veins-overlay{
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.13; background-color: var(--p2);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='1.3'%3E%3Cpath d='M110 10 L150 50 L110 90 L70 50 Z'/%3E%3Cpath d='M110 90 L150 130 L110 170 L70 130 Z'/%3E%3Cpath d='M10 110 L50 70 L90 110 L50 150 Z'/%3E%3Cpath d='M130 110 L170 70 L210 110 L170 150 Z'/%3E%3Ccircle cx='110' cy='110' r='14'/%3E%3Cpath d='M110 96 L110 124 M96 110 L124 110' /%3E%3Cpath d='M40 40 Q60 20 80 40 Q60 60 40 40Z'/%3E%3Cpath d='M180 180 Q160 160 180 140 Q200 160 180 180Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='1.3'%3E%3Cpath d='M110 10 L150 50 L110 90 L70 50 Z'/%3E%3Cpath d='M110 90 L150 130 L110 170 L70 130 Z'/%3E%3Cpath d='M10 110 L50 70 L90 110 L50 150 Z'/%3E%3Cpath d='M130 110 L170 70 L210 110 L170 150 Z'/%3E%3Ccircle cx='110' cy='110' r='14'/%3E%3Cpath d='M110 96 L110 124 M96 110 L124 110' /%3E%3Cpath d='M40 40 Q60 20 80 40 Q60 60 40 40Z'/%3E%3Cpath d='M180 180 Q160 160 180 140 Q200 160 180 180Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 220px 220px; mask-size: 220px 220px; -webkit-mask-repeat: repeat; mask-repeat: repeat;
    transition: background-color 0.6s ease;
}
body::before, body::after{
    content:''; position:fixed; width:60vw; height:60vw; max-width:520px; max-height:520px;
    border-radius:50%; filter: blur(70px); opacity:0.14; z-index:0; pointer-events:none; transition: background 0.6s ease;
}
body::before{ background: radial-gradient(circle, var(--p3), transparent 70%); top:-15%; right:-20%; }
body::after{ background: radial-gradient(circle, var(--p1), transparent 70%); bottom:-15%; left:-25%; }

.main-wrapper{width:100%;max-width:26rem;position:relative;z-index:1;padding:0.4rem 0.2rem;}
.header-row{display:flex;align-items:center;justify-content:flex-start;gap:0.7rem;margin-bottom:0.2rem;}

h1{font-family:'Aref Ruqaa','Marcellus',serif;font-size:2.3rem;font-weight:700;letter-spacing:0.03em;margin:0.3rem 0 0.2rem;
    background: linear-gradient(120deg, var(--p1) 0%, var(--p2) 35%, var(--p3) 50%, var(--p2) 65%, var(--p1) 100%);
    background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:shimmer 5s linear infinite; transition: background 0.6s ease; flex:1; text-align:center;}
@keyframes shimmer{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}

.top-links{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;}
.top-links a{color:var(--p3);font-size:0.82rem;text-decoration:none;border-bottom:1px dashed var(--soft);padding-bottom:2px;transition:all .3s;}
.top-links a:active{opacity:0.7;}

.theme-picker-wrap{position:relative;flex-shrink:0;}
.theme-btn{background:rgba(255,255,255,0.05);border:1px solid var(--soft);color:var(--p3);width:2.6rem;height:2.6rem;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:0;}
.theme-menu{display:none;position:absolute;top:110%;left:0;background:rgba(10,10,10,0.92);border:1px solid var(--soft);border-radius:1rem;padding:0.7rem;backdrop-filter:blur(16px);box-shadow:0 10px 40px rgba(0,0,0,.7);z-index:20;grid-template-columns:repeat(4,1fr);gap:0.55rem;width:15rem;}
.theme-menu.open{display:grid;}
.theme-swatch{width:2.1rem;height:2.1rem;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,0.15);position:relative;}
.theme-swatch.active{border-color:#fff;box-shadow:0 0 10px currentColor;}
.theme-swatch[data-t="gold"]{background:linear-gradient(135deg,#e91e63,#8A2BE2);}
.theme-swatch[data-t="ruby"]{background:linear-gradient(135deg,#ff0000,#cc0000);}
.theme-swatch[data-t="sapphire"]{background:linear-gradient(135deg,#4B0082,#6A5ACD);}
.theme-swatch[data-t="emerald"]{background:linear-gradient(135deg,#00FF00,#00CC00);}
.theme-swatch[data-t="amethyst"]{background:linear-gradient(135deg,#FFFF00,#CCCC00);}
.theme-swatch[data-t="rose"]{background:linear-gradient(135deg,#FFA500,#CC8400);}
.theme-swatch[data-t="teal"]{background:linear-gradient(135deg,#00FFFF,#00B3B3);}
.theme-swatch[data-t="silver"]{background:linear-gradient(135deg,#FF00FF,#B300B3);}

.lang-select-group{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin-bottom:1.4rem;}
.lang-button{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0));backdrop-filter:blur(6px);color:#a89a78;padding:0.75rem 0.5rem;border-radius:1rem;font-size:0.85rem;font-weight:700;cursor:pointer;border:1px solid var(--soft);transition:all .35s ease;text-align:center;}
.lang-button.active{color:#0f0d08;background:linear-gradient(135deg,var(--p2),var(--p3));border-color:var(--p3);box-shadow:0 0 18px var(--glow),0 6px 18px rgba(0,0,0,.5);font-weight:800;}

.glass-panel{background:rgba(20,17,12,0.5);border:1px solid var(--soft);border-radius:1.4rem;padding:1.2rem 1.1rem;backdrop-filter:blur(14px);box-shadow:0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .6s ease;}

.field-label{font-size:0.78rem;color:var(--p3);font-weight:700;margin-bottom:0.5rem;display:flex;align-items:center;justify-content:space-between;gap:0.4rem;letter-spacing:0.03em;}
.field-label i{font-size:0.85rem;}

.output{background:rgba(0,0,0,0.4);color:#f3ede0;padding:1.15rem;border-radius:1.1rem;font-size:1.2rem;font-weight:600;min-height:6rem;
    display:flex;align-items:center;justify-content:center;word-break:break-word;text-align:center;
    border:1px dashed var(--soft);margin-bottom:0.9rem;line-height:1.9;letter-spacing:0.03em;transition:min-height .3s ease;}
.output:not(:empty){border-style:solid;border-color:var(--p3);box-shadow:0 0 18px var(--soft);}
.output.expanded{min-height:16rem;max-height:60vh;overflow-y:auto;}

.mid-actions{display:flex;justify-content:center;gap:.5rem;margin:0 0 0.9rem;flex-wrap:wrap;}

textarea{width:100%;min-height:6.5rem;max-height:60vh;padding:1rem 1.1rem;margin-bottom:0.3rem;border-radius:1.1rem;
    background:rgba(0,0,0,0.35);color:#f3ede0;font-size:1.05rem;font-family:'Cairo',sans-serif;border:1px solid var(--soft);
    transition:border-color .3s ease, min-height .3s ease;resize:none;box-shadow:inset 0 2px 10px rgba(0,0,0,.5);}
textarea:focus{outline:none;border-color:var(--p3);box-shadow:0 0 0 1px var(--p3),0 0 22px var(--soft),inset 0 2px 10px rgba(0,0,0,.5);}
textarea::placeholder{color:rgba(168,154,120,.45);}
textarea.expanded{min-height:16rem;}

.expand-btn{background:rgba(255,255,255,0.06);border:1px solid var(--soft);color:var(--p3);width:1.7rem;height:1.7rem;border-radius:0.5rem;font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.expand-btn:active{border-color:var(--p3);}

.translate-button{background:linear-gradient(135deg,var(--p1),var(--p2),var(--p3));background-size:180% 180%;color:#0a0810;
    font-size:1.05rem;padding:.85rem 1.5rem;border-radius:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
    width:100%;border:none;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 6px 22px var(--soft),0 2px 8px rgba(0,0,0,.5);
    transition:all .3s ease;margin-top:0.9rem;margin-bottom:0.5rem;}
.translate-button:active{transform:translateY(1px);}

.action-buttons{display:flex;justify-content:center;gap:.5rem;margin-top:.3rem;flex-wrap:wrap;}
.action-button{background:rgba(255,255,255,.03);color:#a89a78;padding:.45rem .85rem;border-radius:.8rem;font-size:.78rem;font-weight:600;
    cursor:pointer;border:1px solid var(--soft);transition:all .25s ease;}
.action-button:active{border-color:var(--p3);color:var(--p3);transform:translateY(1px);}

footer{margin-top:2rem;text-align:center;font-size:.78rem;color:rgba(168,154,120,.55);letter-spacing:.04em;}
footer .divider{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--p2),transparent);margin:.7rem auto;}

#toast-message{visibility:hidden;min-width:260px;max-width:90vw;background:linear-gradient(135deg,var(--p2),var(--p1));color:#fff;
    text-align:center;border-radius:14px;padding:16px 20px;position:fixed;z-index:100;left:50%;transform:translateX(-50%);bottom:30px;
    font-size:.95rem;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 20px var(--soft);opacity:0;
    transition:opacity .4s ease,bottom .4s ease,background .6s ease;}
#toast-message.show{visibility:visible;opacity:1;bottom:45px;}

.share-menu-wrap{position:relative;display:inline-block;}
.share-menu{display:none;position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:rgba(10,10,10,0.95);border:1px solid var(--soft);border-radius:1rem;padding:0.6rem;backdrop-filter:blur(16px);box-shadow:0 10px 40px rgba(0,0,0,.7);z-index:30;min-width:11rem;}
.share-menu.open{display:block;}
.share-menu a, .share-menu button{display:flex;align-items:center;gap:0.5rem;width:100%;background:none;border:none;color:#e6dcc4;padding:0.5rem 0.6rem;border-radius:0.6rem;font-size:0.82rem;text-align:right;cursor:pointer;text-decoration:none;font-family:inherit;}
.share-menu a:active, .share-menu button:active{background:rgba(255,255,255,0.06);}
.share-menu i{width:1.2rem;text-align:center;color:var(--p3);}

.legend-toggle{display:block;text-align:center;color:var(--p3);font-size:.8rem;margin:1.2rem 0 .4rem;cursor:pointer;text-decoration:underline;opacity:.85;}
.legend{display:none;grid-template-columns:repeat(4,1fr);gap:.5rem;font-size:.85rem;margin-top:.8rem;max-height:260px;overflow-y:auto;
    padding:.6rem;background:rgba(0,0,0,.35);border-radius:.8rem;border:1px solid var(--soft);}
.legend.show{display:grid;}
.legend div{text-align:center;color:#a89a78;}
.legend span{display:block;color:var(--p3);font-size:1.1rem;}

.hidden{display:none !important;}
@media (max-width:380px){h1{font-size:1.85rem;}.lang-button{font-size:.78rem;padding:.65rem .4rem;}}

.scan-button{background:rgba(255,255,255,0.04);color:var(--p3);font-size:0.9rem;padding:0.7rem 1rem;border-radius:1rem;
    font-weight:700;letter-spacing:.02em;width:100%;border:1px dashed var(--soft);cursor:pointer;transition:all .3s ease;
    margin-top:0.6rem;display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.scan-button:active{border-color:var(--p3);border-style:solid;box-shadow:0 0 14px var(--soft);}

.qr-scan-actions{display:flex;gap:0.5rem;margin-top:0.6rem;}
.qr-scan-actions .scan-button{margin-top:0;}

.qr-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);z-index:200;
    align-items:center;justify-content:center;padding:1rem;}
.qr-modal.open{display:flex;}
.qr-modal-box{background:rgba(15,13,9,0.97);border:1px solid var(--soft);border-radius:1.4rem;padding:1.4rem;
    max-width:22rem;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 30px var(--soft);}
.qr-modal-title{color:var(--p3);font-weight:800;font-size:1rem;margin-bottom:0.9rem;}
.qr-code-container{display:flex;justify-content:center;background:#fff;padding:0.8rem;border-radius:0.8rem;margin-bottom:0.9rem;}
.qr-modal-hint{color:#a89a78;font-size:0.78rem;line-height:1.6;margin-bottom:1rem;}
.qr-modal-actions{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;}
.qr-video{width:100%;border-radius:0.8rem;margin-bottom:0.9rem;background:#000;max-height:60vh;}

.qr-pager{display:none;align-items:center;justify-content:center;gap:0.8rem;margin-bottom:0.7rem;color:var(--p3);font-size:0.85rem;font-weight:700;}
.qr-pager .action-button{padding:0.35rem 0.6rem;}